Android User
Interface
Contents
Views, view groups, and view hierarchy
Layouts in XML and Java code
Drawable Resources
Screen Measurements
Keep It Simple!
“The more users’ expectations prove right,
the more they will feel in control of the system
and the more they will like it.“
Jakob Nielson
View
Everything you see is a view
If you look at your mobile
device,
every user interface element
that you see is a View.
Views
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)
Every kind of view is a subclass of View class
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
May have relationships to other views
Have two mandatory properties
layout_width and layout_height
Examples of views
Button CheckBox
RadioButton
EditText
Switch
SeekBar
Creating and laying out
views
Graphically within Android Studio
XML Files
Programmatically
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"
/>
Mandatory attributes
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"
Specifying size of View
Views and ViewGroups, at minimum, must have the
android:layout_width and android:layout_height
attributes
You can specify width and height with exact
measurements, though you probably won't want to do
this often. More often, you will use one of these
constants to set the width or height:
wrap_content tells your view to size itself to the dimensions
required by its content.
match_parent (named fill_parent before API Level 8) tells your
view to become as big as its parent view group will allow.
match_parent vs wrap_content
android:layout_width="wrap_content" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
match_parent vs wrap_content
android:layout_width="wrap_content" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
Specifying alignment of View
View alignment can be specified using View's
gravity and layout_gravity attributes
gravity is the alignment of the contents or child
Views inside of a View
layout_gravity is the alignment of the View
relative to its parent container
android:gravity
center top|center bottom|right
android:layout_gravity
center right center_horizontal
Layout Weight
This attribute assigns an
"importance" value to a view in
terms of how much space it should
occupy on the screen.
A larger weight value allows it to
expand to fill any remaining space
in the parent view.
Child views can specify a weight
value, and then any remaining
space in the view group is assigned
to children in the proportion of their
declared weight.
Default weight is zero.
Creating View in Java code
In an Activity:
context
TextView myText = new TextView(this);
myText.setText("Display this text!");
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);
ViewGroup &
View Hierarchy
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
Hierarchy of view groups
and views
Root view is always
a view group
View hierarchy and screen
layout
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
Android XML Layout
A layout defines the visual structure for a user interface, such as
the UI for an activity or app widget.
Using XML
Programmatically during runtime
Layouts defined with XML located in
res/layout folder
Load using:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
}
Nama layout file .xml
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
Common Layout Classes
LinearLayout RelativeLayout GridLayout TableLayout
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
Linear Layout
A Layout that arranges its children in a single
column or a single row. The default orientation is
horizontal.
AbsoluteLayout
(deprecated)
A layout that lets you
specify exact locations
(x/y coordinates) of its
children. Absolute
layouts are less flexible
and harder to maintain
than other types of
layouts without
absolute positioning.
FrameLayout
Organize child views
in a way that's
scalable to different
screen sizes while
child views are
drawn in a stack,
with the most
recently added child
on top.
GridLayout
Require min API 14 (android
4.0).
This layout allows you to organize
a view into a Grid. GridLayout
separates its drawing area into:
rows, columns, and cells.
You can specify how many
columns you want to define for
each View, in which row and
column it should be placed as
well as how many columns and
rows it should use.
TableLayout
A layout that arranges its
children into rows and
columns.
ScrollView
The ScrollView class
can be used to
contain one View that
might be to big to fit
on one screen. In this
case ScrollView will
display a scroll bar to
scroll the context.
ListView
A specific view
that shows items
in a vertically
scrolling list.
Uses adapter to
populate listView
items with data.
Constraint Layout
Allows you to create large and complex layouts
with a flat view hierarchy (no nested view groups)
More flexible than RelativeLayout and easier to
use with Android Studio's Layout Editor.
https://developer.android.com/training/
constraint-layout/
Constraint Layout
Constraint Layout
Constraint Layout
Constraint Layout Chain
A chain is a group of views that are linked to each other with bi-directional position
constraints. For example, figure 2 shows two views that both have a constraint to each
other, thus creating a horizontal chain.
However, the ConstraintLayout features several more attributes:
•layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
•layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of
another.
•layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of
another.
•layout_constraintBottom_toBottomOf — Align the bottom of the desired view to
the bottom of another.
•layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
•layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of
another.
•layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
•layout_constraintLeft_toRightOf — Align the left of the desired view to the right of
another.
•layout_constraintRight_toTopOf — Align the right of the desired view to the top of
another.
•layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of
another.
•layout_constraintRight_toLeftOf — Align the right of the desired view to the left of
another.
•layout_constraintRight_toRightOf — Align the right of the desired view to the right of
another.
•If desired, attributes supporting start and end are also available in place
of left and right alignment.
Good For Learn Constraint
Layout
https://medium.com/exploring-android/exploring
-the-new-android-constraintlayout-eed37fe8d8f1
https://medium.com/androiddevelopers/introduc
ing-constraint-layout-1-1-d07fc02406bc
https://codelabs.developers.google.com/
codelabs/constraint-layout/index.html?index
=..%2F..%2Fio2018#0
Layout created in XML
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
... />
<Button
... />
</LinearLayout>
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);
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);
View and
ViewGroup
Attributes
Attributes
Every View and ViewGroup object supports their own
variety of XML attributes.
Some attributes are specific to a View object
for example, TextView supports the textSize attribute
Some are common to all View objects, because they are
inherited from the root View class (like the id attribute).
And, other attributes are considered as "layout
parameters,"
attributes that describe layout properties of the View object
ID attribute
Any View object may have an integer ID associated with it,
to uniquely identify the View within the XML tree.
ID is referenced as an integer, but the ID is typically assigned
in the layout XML file as a string, in the id attribute.
The syntax for an ID, inside an XML tag is:
android:id="@+id/my_button_name_id"
The at-symbol (@) at the beginning of the string indicates that the XML parser should
parse and expand the rest of the ID string and identify it as an ID resource.
The plus-symbol (+) means that this is a new resource name that must be created and
added to our resources (in the R.java file).
XML Layout Attributes
xmlns:android
namespace declaration that tells the Android tools that you are
going to refer to common attributes defined in the Android
namespace. The outer most tag in every Android layout file must
have this attribute.
android:layout_width
This attribute defines how much of the available width on the
screen this View should consume.
android:layout_height refers to available screen height.
android:text
This sets the text that the TextView should display.
Layout Attributes
Attribute Description
layout_width specifies width of View or ViewGroup
layout_height specifies height
layout_marginTop extra space on top
layout_marginBottom extra space on bottom side
layout_marginLeft extra space on left side
layout_marginRight extra space on right side
layout_gravity how child views are positioned
layout_weight how much extra space in layout should be allocated to
View (only when in LinearLayout or TableView)
layout_x x-coordinate
layout_y y-coordinate
Resources
Resources
Separate static data from code in your layouts.
Strings, dimensions, images, menu text, colors,
styles
Useful for localization
Where are the resources in
your project?
resources and
resource files
stored in res folder
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"
Measurements
Use device-independent units
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)
Questions?
Let’s Code
Praktikum
Buatlah antarmuka aplikasi formulir pendaftaran
User baru yang setidaknya memuat isian:
Nama (FirstName, Lastname), email, password
Berikan sebuah tombol "Save" yang ditujukan untuk
menyimpan data yang diisikan ke dalam form tersebut.
Layout di slide selanjutnya
Praktikum 1 Gunakan Constraint Layout
ImageView
FORM PENDAFTARAN
LOGO
Harus bisa
menghandle multi
screen (5 inch dan FirstName LastName
10 inch)
Email
Password
SAVE
Praktikum 2
Buat Layout landscape dari Praktikum 1 untuk menghandle landscape
tanpa mempengaruhi layout portrait (praktikum 1). Lihat contoh layout
di halaman selanjutnya
Cara membuat landsc
variasi
Praktikum 2
Assignments
Buat Login Form dan Profile Page (untuk
menampilkan data dari registrasi).
Login menggunakan : email dan password.
Profile page menampilkan, nama(first+last name)
dan email
Layout sesuka anda, harus bisa menghandle
multi screen (5 inch – 10 inch)
