Week 2:

Creating
Application
CET3013: MOBILE APPLICATION DEVELOPMENT
Today’s Topics
An Android Application?
Activities
Layouts
UI design and views
Main Template Launch Code
 This file is in MainActivity.kt

 What's an Activity?
 Where's the main method?
 Where does it say to print "Hello
World!” ?
Views, ViewGroups & Layouts
(FINAL)
A View is the Android term for a user-interface element.
- We’ll see more about Views later.
A ViewGroup is a special kind of View that can have one or
more children.
Layouts are subclasses of ViewGroup.
 Most recommended: Constraint layout – can be used also
to do nested layout
Other layout will take more memory
Layouts TableLayout, TableRow, Space normally didn’t use

Similar to the layout managers in Swing.

There are:
◦ AbsoluteLayout
◦ LinearLayout -> Like FLowLayout
◦ RelativeLayout-> Location, my left hand side
◦ ConstraintLayout, etc (linking->spring tight)
In best practice, they are defined in XML.
Layouts can be nested.
LinearLayout
Has any number of children, all arranged in the same
direction
◦ Depending on the orientation: horizontal or vertical.

No matter how many children there are, there will only
ever be one row or column, no matter the sizes of the
individual views.
It respects, for its children:
◦ Margins
◦ Gravity
◦ Right, Centre or Left Alignment
LinearLayout
We can assign a weight to individual children.
Determines how much space they take up.
Example:
◦ Three buttons, weights 0, 2, and 1
◦ The first button only takes up the space required by its content.
◦ The second and third buttons take up the remaining space.
RelativeLayout
Child positions are specified relative to other children, using
their IDs.
Flexibile, powerful but rather more complex.
GridBagLayout in Swing (ever used it?)
 RelativeLayout Example
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/blue"
android:padding="10px" >

<TextView android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Type here:" />

<EditText android:id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label" />

<Button android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10px"
android:text="OK" />

<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>
Constraint Layouts
New in Studio 2.2!
ConstraintLayout is a view group available in the Constraint
Layout library,
◦ Claimed should never need to edit the XML by hand.

Constraint-based layout system allows you to build most

layouts without nested any view groups.
Recommended you should convert older layouts to
ConstraintLayout for improved layout performance,
Constraint Layouts
Constraint Layouts
ConstraintLayout chains provide a way for the layout
behavior of two or more widgets to be defined as a group.
Chains can be declared in either the
vertical or horizontal axis and configured to define how the
widgets in the chain are spaced and sized.
Constraint Layouts
ConstraintLayout class currently supports the following
chain layout styles:
◦ Spread Chain
◦ Spread Inside Chain
◦ Weighted Chain
◦ Packed Chain
Constraint Layouts
Constraint Layouts
 Advantages of Constraint
Layouts
ConstraintLayout provides a level of flexibility and reduce nested
layout.
ConstraintLayout was also implemented with a view to
addressing the wide range of Android device screen sizes
available on the market today.
ConstraintLayout makes it easier for user interfaces to be
designed that respond and adapt to the device on which the app
is running.
Responsive layout – automatically assigned the layout button location
at the same location although the screen size change
Specifying Layouts: Attributes
Views and ViewGroups have a number of attributes which
can be set.
We will look at several of these.
Layout Attributes: ID
android:id="@+id/my_button"

Used to identify a View or ViewGroup.

@ Parse the rest of the string.
+ Create a new ID in the R.java file.

This ID could be referred to in code: (R = resource – built in

dictionary in acdroid)

val myButton = findViewById<Button>(R.id.my_button)

Android View Binding
Before Android Studio 3.6, the only option for gaining
access to a view from within the app code involved
writing code to manually find a view based on its id
via a method named findViewById(). For example:

val exampleView = findViewById<TextView>(R.id.exampleView)

 Android View Binding
When view binding is enabled in an app module the layout
views can be accessed from within the code without the
need to use findViewById.
Enable the view binding in build gradle file.
Android View Binding
The binding class name will be same as the layout file name
but in “camel case”.
Android View Binding
Example:
Android View Binding
Example: (textView is one of the GUI component)
 layout_width
Layout Attributes: layout_height

These need to be specified for all Views.

Most often we specify either:
wrap_content: ( 字多大它的格子就多大 )
◦ The View is sized according to its content

match_parent: ( 只要有空位它就會整行都變成那個字的 text box)

◦ The view becomes as big as its parent allows it to be.
Layout Attributes: Padding
We can also specify padding—the amount of space around
a view.
Views
Event Handling
Types of View
Examples
Alerts
Event Handling
Uses listeners in a similar way to Swing/AWT (although the
events covered and the handler parameters are different).
It can often be a good idea not to create anonymous inner
classes but to pass this to the add…Listener method.
Since all the event handlers have the View which received
the event as a parameter you can use findViewById()
to find which it was.
 Event Handling

Source: https://workingdev.net/java/android/2020/04/23/event-handling-android.html
 Principal Event Handlers
“View” is a parameter which is GUI itselfs
Listener Details Public Method to implement
onClickListener Responds to a click void onClick(View v)
onLongClickListener Responds to a long boolean onLongClick(View v)
click
onKeyListener Respond to a Key boolean onKey(View v, int keyCode,
Event KeyEvent event)
onTouchListener Respond to a touch boolean onTouch(View v, MotionEvent
event)

Methods which return a boolean should return true if the event has been
“consumed”.
There are a couple of others—and several additional ones for later versions of
Android.
Types of View
TextView ViewFlipper
EditText QuickContactBadge
ListView AnalogClock, DigitalClock
Spinner KeyboardView
Button ProgressBar
CheckBox DatePicker, TimePicker
RadioButton ScrollView
RadioGroup WebView

There are several others too—some of which we will meet the labs.
EditText
This example uses an EditText to enable the user to enter a
string of text.
When Return is pressed, the string is displayed using a
Toast.
EditText
Lambda function – no need the () and rewrite the parameter inside

CheckBox
RadioButtons—Layout
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton android:id="@+id/radio_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Red" />
<RadioButton android:id="@+id/radio_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Blue" />
</RadioGroup>
RadioButtons—Code

//TODO CODE:
Alert Dialogs
Creating a dialog
◦ All of AlertDialog’s constructors are protected.
◦ What to do?
◦ Use AlertDialog.Builder.
◦ Should be created in an override of the Activity method
onCreateDialog(int).
Showing a dialog
◦ Call showDialog(int), passing the ID of the dialog you
want to show.
Two common button:
OK means positive button
Cancel means negative button
Alert Dialogs
Alert Dialogs
More code here soon
Alert Dialogs
Displaying Dialog
Resolution and Density
Independence
Unlike (say) iDevices, there is a very wide range of
Android devices with different capabilities.
We want our applications to run unmodified on as
many as possible (why?)
Screen sizes from 3in to 10in
Different resolutions
Android offers support!
Resolution and Density
Independence
Makes use of the optional sequences to resource files.
◦ Screen size: small, medium, large
◦ Resolution
◦ Ldpi – 120px (New android studio no longer support this small densities already)
◦ Mdpi – 160px
◦ Hdpi – 240px
◦ Xhdpi – 320px
Resolution and Density
Independence
Different size of screen will automatically use different size of icon,
so need to prepare various size of the icon
If not the app will be crashed when use only 1 icon to fulfil every size of android