Android Developer Fundamentals

Hello World

Lesson 1

View, Layouts, This

Thiswork
workisislicensed
licensedunder
undera a
Android Developer Fundamentals and Resources Creative
CreativeCommons
CommonsAttribution-NonComm
Attribution-NonComm 1
ercial
ercial4.0
4.0International
InternationalLicense
License
1.2 Views, Layouts, and
Resources

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 2
ercial 4.0 International License
Contents
● Views, view groups, and view hierarchy
● Layouts in XML and Java code
● Event Handling
● Resources
● Screen Measurements

This work is licensed under a

View, Layouts,
Android Developer Fundamentals Creative Commons Attribution-NonComm 3
and Resources ercial 4.0 International License
Views

Android Developer Fundamentals 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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 5
ercial 4.0 International License
What is a view
Views are Android's 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)
● subclass of View class

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 6
ercial 4.0 International License
Views have properties
● Have properties (e.g., 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
● Have relationships to other views

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 7
ercial 4.0 International License
Examples of views

Button CheckBox
RadioButton
EditText
Switch
SeekBar

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 8
ercial 4.0 International License
Creating and laying out views

● Graphically within Android Studio

● XML Files

● Programmatically

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 9
ercial 4.0 International License
Views defined in Layout Editor

Visual representation of
what's in XML file.
View, Layouts, This work is licensed under a
Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 10
ercial 4.0 International License
 Using the Layout Editor

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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 11
ercial 4.0 International License
Views 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"
/>
View, Layouts, This work is licensed under a
Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 12
ercial 4.0 International License
View properties 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"

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 13
ercial 4.0 International License
Create View in Java code
context
In an Activity:

TextView myText = new TextView(this);

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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 14
ercial 4.0 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);

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 15
ercial 4.0 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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 16
ercial 4.0 International License
 ViewGroup &
View Hierarchy

Android Developer Fundamentals 17

ViewGroup views
A ViewGroup (parent) is a type of view that can contain other
views (children)
ViewGroup is the base class for layouts and view containers
● ScrollView—scrollable view that contains one child view
● LinearLayout—arrange views in horizontal/vertical row
● RecyclerView—scrollable "list" of views or view groups

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 18
ercial 4.0 International License
Hierarchy of view groups and views

ViewGroup Root view is always a view group

ViewGroup View View

View View View

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 19
ercial 4.0 International License
View hierarchy and screen layout

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 20
ercial 4.0 International License
View hierarchy in the component tree

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 21
ercial 4.0 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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 22
ercial 4.0 International License
Layouts

Android Developer Fundamentals 23

Layout Views
Layouts
● are specific types of view groups
● are subclasses of ViewGroup
● contain child views
● can be in a row, column, grid, table, absolute

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 24
ercial 4.0 International License
Common Layout Classes

LinearLayout RelativeLayout GridLayout TableLayout

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 25
ercial 4.0 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
● GridView - 2D scrollable grid

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 26
ercial 4.0 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-a 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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 27
ercial 4.0 International License
Layout created in XML
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
... />
<Button
... />
</LinearLayout
View, Layouts, This work is licensed under a
Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 28
ercial 4.0 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);

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 29
ercial 4.0 International License
Setting width and height in Java code
Set the width and height of a view:
LinearLayout.LayoutParams layoutParams =
new Linear.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT);
myView.setLayoutParams(layoutParams);

Text and This work is licensed under a

Android Developer Fundamentals Scrolling Views
Creative Commons Attribution-NonComm 30
ercial 4.0 International License
Event Handling

Android Developer Fundamentals 31

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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 32
ercial 4.0 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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 33
ercial 4.0 International License
Handling clicks in XML & Java
Attach handler to view in Implement handler in activity:
layout: public void showToast(View view) {
String msg = "Hello Toast!";
android:onClick="showToast"
Toast toast = Toast.makeText(
this, msg, duration);
toast.show();
}
}

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 34
ercial 4.0 International License
Setting click handlers 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();
}
});

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 35
ercial 4.0 International License
Resources

Android Developer Fundamentals 36

Resources

● Separate static data from code in your layouts.

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

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 37
ercial 4.0 International License
Where are the resources in your project?

resources and resource files

stored in res folder

View, Layouts, This work is licensed under a

Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 38
ercial 4.0 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"
View, Layouts, This work is licensed under a
Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 39
ercial 4.0 International License
Measurements
● Device Independent Pixels (dp) - for Views
● Scale Independent Pixels (sp) - for text

Don't use device-dependent units:

● Actual Pixels (px)
● Actual Measurement (in, mm)
● Points - typography 1/72 inch (pt)
View, Layouts, This work is licensed under a
Android Developer Fundamentals and Resources Creative Commons Attribution-NonComm 40
ercial 4.0 International License
Learn more

Android Developer Fundamentals 41

Learn more
Views:
● View class documentation
● device independent pixels
● Button class documentation
● TextView class documentation
● Hierarchy Viewer for visualizing the view hierarchy
Layouts:
● developer.android.com Layouts
● Common Layout Objects
This work is licensed under a
View, Layouts,
Android Developer Fundamentals Creative Commons Attribution-NonComm 42
and Resources ercial 4.0 International License
Learn even more
Resources: Other:
● Android resources ● Android Studio documentation
● Color class definition ● Image Asset Studio
● R.color resources ● UI Overview
● Supporting Different Densities ● Vocabulary words and concepts glo
● Color Hex Color Codes ssary
● Model-View-Presenter
(MVP) architecture pattern
● Architectural patterns

This work is licensed under a

View, Layouts,
Android Developer Fundamentals Creative Commons Attribution-NonComm 43
and Resources ercial 4.0 International License
What's Next?

● Concept Chapter: 1.2 C Layouts, Views, and Resources

● Practicals:
○ 1.2A P Make Your First Interactive UI
○ 1.2B P Using Layouts

This work is licensed under a

View, Layouts,
Android Developer Fundamentals Creative Commons Attribution-NonComm 44
and Resources ercial 4.0 International License
END

Android Developer Fundamentals 45