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)