Android Developer Fundamentals V2

Build your
first app

Lesson 1

Layouts and This

Thiswork
workisislicensed
licensedunder
undera a
Android Developer
Android Developer resources for Creative
CreativeCommons
CommonsAttribution
Attribution4.0
4.0 1
Fundamentals V2
Fundamentals V2 the UI International
InternationalLicense
License
 1.2 Layouts and
resources for the UI

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 2
Fundamentals V2 the UI International License
Contents
● Views, view groups, and view hierarchy
● The layout editor and ConstraintLayout
● Event handling
● Resources and measurements

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 3
Fundamentals V2 the UI International License
Views

Android Developer Fundamentals V2 4

Everything you see is a view
If you look at your mobile device,
every user interface element that
you see is a View.

Views

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 5
Fundamentals V2 the UI International License
What is a view?
View subclasses are basic user interface building
blocks
● Display text (TextView class), edit text (EditText
class)
● Buttons (Button class), menus, other controls
● Scrollable (ScrollView, RecyclerView)
● Show images (ImageView)
Layouts and This work is licensed under a

● Group views (ConstraintLayout and

Android Developer
Fundamentals V2
resources for
the UI
Creative Commons Attribution 4.0
International License
6
Examples of view subclasses

Button CheckBox

EditText RadioButton

Slider Switch

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 7
Fundamentals V2 the UI International License
View attributes
● Color, dimensions, positioning
● May have focus (e.g., selected to receive user
input)
● May be interactive (respond to user clicks)
● May be visible or not
● Relationships to other views

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 8
Fundamentals V2 the UI International License
Create views and layouts

● Android Studio layout editor: visual representation

of XML
● XML editor
● Java code

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 9
Fundamentals V2 the UI International License
Android Studio layout editor
1. XML layout file
2. Design and Text
tabs
3. Palette pane
4. Component
Tree
5. Design and
blueprint panes
6. Attributes tab
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 10
Fundamentals V2 the UI International License
View defined in XML
<TextView
android:id="@+id/show_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/myBackgroundColor"
android:text="@string/count_initial_value"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/count_text_size"
android:textStyle="bold"
/>
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 11
Fundamentals V2 the UI International License
View attributes in XML
android:<property_name>="<property_value>"
Example: android:layout_width="match_parent"

android:<property_name>="@<resource_type>/resource_id"
Example: android:text="@string/button_label_next"

android:<property_name>="@+id/view_id"
Example: android:id="@+id/show_count"

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 12
Fundamentals V2 the UI International License
Create View in Java code
context
In an Activity:

TextView myText = new TextView(this);

myText.setText("Display this text!");

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 13
Fundamentals V2 the UI International License
What is the context?
● Context is an interface to global information about
an application environment
● Get the context:
Context context = getApplicationContext();
● An Activity is its own context:
TextView myText = new TextView(this);

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 14
Fundamentals V2 the UI International License
Custom views
● Over 100 (!) different types of views available from
the Android system, all children of the View class
● If necessary, create custom views by subclassing
existing views or the View class

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 15
Fundamentals V2 the UI International License
ViewGroup
and View
hierarchy

Android Developer Fundamentals V2 16

ViewGroup contains "child"
views
● ConstraintLayout: Positions UI elements using
constraint connections to other elements and to
the layout edges
● ScrollView: Contains one element and enables
scrolling
● RecyclerView: Contains a list of elements and
enables scrolling by adding and removing
elements dynamically Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 17
Fundamentals V2 the UI International License
ViewGroups for layouts
Layouts
● are specific types of ViewGroups (subclasses of
ViewGroup)
● contain child views
● can be in a row, column, grid, table, absolute

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 18
Fundamentals V2 the UI International License
 Common Layout Classes

LinearLayout ConstraintLayo GridLayou TableLayout

ut t

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 19
Fundamentals V2 the UI International License
Common Layout Classes
● ConstraintLayout: Connect views with constraints
● LinearLayout: Horizontal or vertical row
● RelativeLayout: Child views relative to each other
● TableLayout: Rows and columns
● FrameLayout: Shows one child of a stack of children

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 20
Fundamentals V2 the UI International License
Class hierarchy vs. layout
hierarchy
● View class-hierarchy is standard object-oriented
class inheritance
○ For example, Button is-a TextView is-a View is-an Object
○ Superclass-subclass relationship

● Layout hierarchy is how views are visually

arranged
○ For example, LinearLayout can contain Buttons
arranged in a row
○ Parent-child relationship
Android Developer
Layouts and
resources
This work is licensed under a
for Creative Commons Attribution 4.0 21
Fundamentals V2 the UI International License
Hierarchy of viewgroups and
views
ViewGroup Root view is always a
ViewGroup

ViewGroup View View

View View View

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 22
Fundamentals V2 the UI International License
View hierarchy and screen
layout

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 23
Fundamentals V2 the UI International License
View hierarchy in the layout
editor

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 24
Fundamentals V2 the UI International License
Layout created in XML
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
... />
<TextView
... />
<Button
... />
</LinearLayout
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 25
Fundamentals V2 the UI International License
Layout created in Java Activity
code
LinearLayout linearL = new LinearLayout(this);
linearL.setOrientation(LinearLayout.VERTICAL);

TextView myText = new TextView(this);

myText.setText("Display this text!");

linearL.addView(myText);
setContentView(linearL);

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 26
Fundamentals V2 the UI International License
Set width and height in Java
code
Set the width and height of a view:
LinearLayout.LayoutParams layoutParams =
new Linear.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_CONTENT);
myView.setLayoutParams(layoutParams);

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 27
Fundamentals V2 the UI International License
Best practices for view
hierarchies
● Arrangement of view hierarchy affects app
performance
● Use smallest number of simplest views possible
● Keep the hierarchy flat—limit nesting of views and
view groups

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 28
Fundamentals V2 the UI International License
The layout
editor and
Constraint
Layout

Android Developer Fundamentals V2 29

The layout editor with
ConstraintLayout
● Connect UI elements to parent
layout
● Resize and position elements
● Align elements to others
● Adjust margins and
dimensions
● Change attributes
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 30
Fundamentals V2 the UI International License
What is ConstraintLayout?
● Default layout for new Android Studio project
● ViewGroup that offers flexibility for layout design
● Provides constraints to determine positions and
alignment of UI elements
● Constraint is a connection to another view, parent
layout, or invisible guideline

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 31
Fundamentals V2 the UI International License
Layout editor main toolbar

1. Select Design Surface: Design and Blueprint panes

2. Orientation in Editor: Portrait and Landscape
3. Device in Editor: Choose device for preview
4. API Version in Editor: Choose API for preview
5. Theme in Editor: Choose theme for preview
6. Locale in Editor: Choose language/locale for
preview Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 32
Fundamentals V2 the UI International License
ConstraintLayout toolbar in
layout editor

1. Show: Show Constraints and Show Margins

2. Autoconnect: Enable or disable
3. Clear All Constraints: Clear all constraints in layout
4. Infer Constraints: Create constraints by inference
5. Default Margins: Set default margins
6. Pack: Pack or expand selected elements
7. Align: Align selected elements
8. Guidelines: Add vertical or horizontal guidelines
9. Zoom controls: Zoom in or out
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 33
Fundamentals V2 the UI International License
Autoconnect
● Enable Autoconnect
in toolbar if disabled
● Drag element to any
part of a layout
● Autoconnect
generates constraints
against parent layout
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 34
Fundamentals V2 the UI International License
ConstraintLayout handles

1. Resizing handle
2. Constraint line and
handle
3. Constraint handle
4. Baseline handle

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 35
Fundamentals V2 the UI International License
Align elements by baseline
1. Click the baseline
constraint button
2. Drag from baseline to
other element's
baseline

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 36
Fundamentals V2 the UI International License
Attributes pane
● Click the Attributes tab
● Attributes pane
includes:
○ Margin controls for
positioning
○ Attributes such as
layout_width

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 37
Fundamentals V2 the UI International License
Attributes pane view inspector
1. Vertical view size control
specifies layout_height
2. Horizontal view size control
specifies layout_width
3. Attributes pane close button

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 38
Fundamentals V2 the UI International License
 Layout_width and layout_height
layout_width and layout_height change with size
controls
● match_constraint: Expands element to fill its
parent
● wrap_content: Shrinks element to enclose
content
● Fixed number of dp (density-independent
pixels)
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 39
Fundamentals V2 the UI International License
Set attributes
To view and edit all attributes for element:
1. Click Attributes tab
2. Select element in design, blueprint, or Component
Tree
3. Change most-used attributes
4. Click at top or View more attributes at bottom
to see and change more attributes
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 40
Fundamentals V2 the UI International License
Set attributes example:
TextView

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 41
Fundamentals V2 the UI International License
Preview layouts
Preview layout with horizontal/vertical orientation:
1. Click Orientation in Editor button
2. Choose Switch to Landscape or Switch to
Portrait
Preview layout with different devices:
3. Click Device in Editor button
4. Choose device
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 42
Fundamentals V2 the UI International License
Create layout variant for
landscape
1. Click Orientation in Editor
button
2. Choose Create Landscape
Variation
3. Layout variant created:
activity_main.xml (land)
4. Edit the layout variant as
needed Android Developer Layouts and
resources for
This work is licensed under a
Creative Commons Attribution 4.0 43
Fundamentals V2 the UI International License
Create layout variant for tablet
1. Click Orientation in Layout Editor
2. Choose Create layout x-large Variation
3. Layout variant created: activity_main.xml
(xlarge)
4. Edit the layout variant as needed

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 44
Fundamentals V2 the UI International License
 Event
Handling

Android Developer Fundamentals V2 45

Events
Something that happens
● In UI: Click, tap, drag
● Device: DetectedActivity such as walking, driving,
tilting
● Events are "noticed" by the Android system

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 46
Fundamentals V2 the UI International License
Event Handlers
Methods that do something in response to a click
● A method, called an event handler, is triggered
by a specific event and does something in
response to the event

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 47
Fundamentals V2 the UI International License
Attach in XML and implement in
Java
Attach handler to Implement handler in
view in XML layout: Java activity:
android:onClick="showToa public void showToast(View view)
st" {
String msg = "Hello Toast!";
Toast toast = Toast.makeText(
this, msg, duration);
toast.show();
}
}
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 48
Fundamentals V2 the UI International License
Alternative: Set click handler in
Java
final Button button = (Button)
findViewById(R.id.button_id);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
String msg = "Hello Toast!";
Toast toast = Toast.makeText(this, msg,
duration);
toast.show();
}
Layouts and This work is licensed under a
}); Android Developer resources for
the UI
Creative Commons Attribution 4.0
International License
49
Fundamentals V2
Resources
and
measureme
nts

Android Developer Fundamentals V2 50

Resources

● Separate static data from code in your layouts.

● Strings, dimensions, images, menu text, colors,
styles
● Useful for localization

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 51
Fundamentals V2 the UI International License
Where are the resources in
your project?
resources and resource files
stored in res folder

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 52
Fundamentals V2 the UI International License
Refer to resources in code
● Layout:
R.layout.activity_main
setContentView(R.layout.activity_main);

● View:
R.id.recyclerview
rv = (RecyclerView) findViewById(R.id.recyclerview);

● String:
In Java: R.string.title
In XML: android:text="@string/title"
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 53
Fundamentals V2 the UI International License
Measurements
● Density-independent Pixels (dp): for Views
● Scale-independent Pixels (sp): for text

Don't use device-dependent or density-dependent

units:
● Actual Pixels (px)
● Actual Measurement (in, mm)
● Points - typography 1/72 inch (pt)
Layouts and This work is licensed under a
resources for
Android Developer Creative Commons Attribution 4.0 54
Fundamentals V2 the UI International License
Learn more

Android Developer Fundamentals V2 55

Learn more
Views:
● View class documentation
● device independent pixels
● Button class documentation
● TextView class documentation
Layouts:
● developer.android.com Layouts
● Common Layout Objects

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 56
Fundamentals V2 the UI International License
Learn even more
Resources: Other:
● Android resources ● Android Studio documentati
● Color class definition on
● R.color resources ● Image Asset Studio
● Supporting Different Densiti ● UI Overview
es ● Vocabulary words and conce
● Color Hex Color Codes pts glossary
● Model-View-Presenter
(MVP) architecture pattern
● Architectural patterns
Layouts and This work is licensed under a
Android Developer resources for Creative Commons Attribution 4.0 57
Fundamentals V2 the UI International License
What's Next?

● Concept Chapter:
1.2 Layouts and resources for the UI
● Practicals:
○ 1.2A : Your first interactive UI
○ 1.2B : The layout editor

Layouts and This work is licensed under a

Android Developer resources for Creative Commons Attribution 4.0 58
Fundamentals V2 the UI International License
END

Android Developer Fundamentals V2 59