Android UI Development Android UI Studio

Widget

Layout

Android UI 1

Building Applications

2

§  A typical application will include:

§  Activities - MainActivity as your entry point - Possibly other activities (corresponding to multiple screens)

§  Views - Screen layouts - ViewGroups containing Views (i.e. components)

§  Intents - required if you have multiple Activity screens

Android UI

Android Development Environment

1.  Install Android Studio, and run ithttps://developer.android.com/studio/install.html

2.  Don’t import previous settings

3.  Choose “install standard type”

Android UI 3

Create new project – project component -

Android UI 4

§  Company Domain - only important if you release your

app, can just use something like: cs349.uwaterloo.ca

§  Need to choose which API to target - We’ll use API 15 for phone and

Tablet (need not to support the other devices)

Create new project - Activity templates -

Android UI 5

§  For the assignment, choose “Empty Activity”

Create Android Virtual Device (ADV) For testing

Android UI 6

- Device: Pixel - System: Android 8 x86 (Oreo API 26)

download

Android Virtual Device (AVD)

Android UI 7

- The AVD is slow to launch, so keep it running in the background while you’re programming / debugging.

Run sample code

Android UI 8

§  File -> Open -> select android/simple §  Run §  Select Deployment Target -> Pixel API 26 (the one just created) § 

Code Demo: Simple (Android Project Files)

Android UI 9

§  Manifest (app/manifests/) - Application setting

§  Java (app/java/) -  (*.java) source code

§  Resources (app/res/) -  layout: (*.xml) UI layout and

View definitions - values: (*.xml) constants like

strings, colours, … - also bitmaps and SVG images

(mipmap*, drawable*, ….)

Manifest

Android UI 10

§  Metadata about the app

§  App components, Intent filters

<applicationandroid:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:theme="@style/AppTheme"><activityandroid:name=".MainActivity"><intent-filter><actionandroid:name="android.intent.action.MAIN"/>

<category android:name="android.intent.category.LAUNCHER"/>

</intent-filter></activity></application>

Manifest – Permissions -

Android UI 11

§  Android must request permission to access sensitive user data

<manifest><uses-permission

android:name="android.permission.INTERNET"/><uses-permission

android:name="android.permission.ACCESS_FINE_LOCATION"/><uses-permission

android:name="android.permission.SEND_SMS"/></manifest>

App Resources

Android UI 12

§  Each type of resource in a specific subdirectory of your project's res/ directory

§  Access them using resource IDs that are generated in the project's R class

app/manifest/java/res/ drawable/ graphic.png layout/ activity_main.xml mipmap/ icon.png values/ strings.xml

Layouts

Android UI 13

§  Defines the structure for a user interface in your app

§  Can be nested

Editing XML: WYSIWYG Version

Android UI 14

Editing XML: XML Version

Android UI 15

Layout Example

Android UI 16

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><EditTextandroid:id="@+id/editTextName”android:layout_alignParentTop="true”android:layout_marginTop="30dp"android:ems="12"android:text="@string/name”

…/><Buttonandroid:id="@+id/btnConfirm" android:layout_below="@+id/editTextName" android:layout_marginTop="40dp"android:text="@string/confirm"

…/></RelativeLayout>

Layout

Android UI 17

§  When you compile your app, each XML layout file is compiled into a View resource

§  calling setContentView(), passing it the reference to your layout resource in the form of: R.layout.layout_file_name. 

§  app/java/MainActivity.java

protectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}

View (Widget)

Android UI 18

Properties:

§  Background color, text, font, alignment, size, padding, margin, etc

Event Listeners and Handlers:

§  respond to various events such as: click, long-click, focus change, etc.

Set focus:

§  Set focus on a specific view requestFocus() or use XML tag <requestFocus />

Visibility:

§  You can hide or show views using setVisibility(…).

Views: TextViews

Android UI 19

<TextViewandroid:id="@+id/txtHello"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="HelloWorld!"/>

TextViewhelloTextView=findViewById(R.id.txtHello);helloTextView.setText("CS349W18");

Views: EditText

Android UI 20

<EditTextandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content”android:inputType="textPersonName"android:text=”@string/name”><requestFocus/><EditText/>

EditTextnameView=findViewById(R.id.name);Textname=nameView.getText().toString();

Views: Buttons

Android UI 21

<Buttonandroid:id="@+id/btnAlarm"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/alarm"/>

https://developer.android.com/guide/topics/ui/controls/button.html

Responding to Button Events

Android UI 22

<Buttonandroid:id="@+id/btnAlarm"……android:onClick="sendMessage"/>

/**Calledwhentheusertouchesthebutton*/publicvoidsendMessage(Viewview){//Dosomethinginresponsetobuttonclick}

Buttonbutton=(Button)findViewById(R.id.btnAlarm);button.setOnClickListener(newView.OnClickListener(){publicvoidonClick(Viewv){//Dosomethinginresponsetobuttonclick}});

§  Option 1

§  Option 2

Radio Buttons

Android UI 23

<RadioGroupandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButtonandroid:id="@+id/radio_yes"android:layout_width="wrap_content"android:layout_height="wrap_content" android:weight=”1"android:onClick="onRadioButtonClicked"android:text="@string/yes"/> <RadioButtonandroid:id="@+id/radio_no"android:layout_width="wrap_content"android:layout_height="wrap_content" android:weight=”1"android:onClick="onRadioButtonClicked"android:text="@string/no"/></RadioGroup>

Radio Buttons

Android UI 24

publicvoidonRadioButtonClicked(Viewview){//Isthebuttonnowchecked?booleanchecked=((RadioButton)view).isChecked();//Checkwhichradiobuttonwasclickedswitch(view.getId()){caseR.id.radio_yes:if(checked)//codeforyesbreak;caseR.id.radio_maybe:if(checked)//codeformaybebreak;caseR.id.radio_no:if(checked)//codefornobreak;}}

Checkboxes

Android UI 25

<CheckBoxandroid:id="@+id/checkbox_morning"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="onCheckboxClicked"android:text="@string/morning"/><CheckBoxandroid:id="@+id/checkbox_afternoon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:onClick="onCheckboxClicked"android:text="@string/afternoon"/>

https://developer.android.com/guide/topics/ui/controls/checkbox.html

Checkboxes

Android UI 26 https://developer.android.com/guide/topics/ui/controls/checkbox.html

publicvoidonCheckboxClicked(Viewview){//Istheviewnowchecked?booleanchecked=((CheckBox)view).isChecked();//Checkwhichcheckboxwasclickedswitch(view.getId()){caseR.id.checkbox_morning:if(checked)//Addmorningsessionelse//Removemorningsessionbreak;caseR.id.checkbox_afternoon:if(checked)//Addafternoonsessionelse//Removeafternoonsessionbreak;}}

ImageView

Android UI 27

§  Save image resources to drawable folder - app/src/main/res/drawable/

<ImageViewandroid:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content”android:text="@drawable/lollipop"/>

Linear Layout

Android UI 28

§  LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

§  You can specify the layout direction with the android:orientation attribute.

§  All children of a LinearLayout are stacked one after the other - a vertical list will only have one child per row, no matter how

wide they are - a horizontal list will only be one row high

https://developer.android.com/guide/topics/ui/layout/linear.html

Key Attributes

Android UI 29

§  Orientation Should the layout be a column or a row? Use "horizontal" for a row, "vertical" for a column.

§  Fill model MATCH_PARENT: the view wants to be as big as its parent

WRAP_CONTENT: the view wants to be just large enough to fit its own internal content

§  Weight android:layout_weight attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen.

Attributes

Android UI 30

§  gravity

Specifies how an object should position its content, on both the X and Y axes (top, bottom, center,…)

§  Padding/margin

Setting padding/margin

LinearLayout

Android UI 31

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingLeft="16dp"android:paddingRight="16dp"android:orientation="vertical"><EditText

…/><EditText

…/><Button

…/></LinearLayout>

LinearLayout

Android UI 32

<LinearLayout…><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/to"/><EditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/subject"/><EditTextandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="top"android:hint="@string/message"/><Buttonandroid:layout_width="100dp"android:layout_height="wrap_content"android:layout_gravity="right"android:text="@string/send"/></LinearLayout>

Relative Layout

Android UI 33

§  RelativeLayout is a view group that displays child views in relative positions.

§  The position of each view can be specified as - relative to sibling elements (such as to the left-of or below

another view) -  in positions relative to the parent RelativeLayout area (such as

aligned to the bottom, left or center).

https://developer.android.com/guide/topics/ui/layout/linear.html

View Positioning

Android UI 34

§  RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID).

§  By default, all child views are drawn at the top-left of the layout

§  Example of some layout properties : - android:layout_alignParentTop - android:layout_centerVertical - android:layout_below - android:layout_toRightOf - More: RelativeLayout.LayoutParams

https://developer.android.com/guide/topics/ui/layout/linear.html

View Positioning in Relative Layout

Android UI 35

android:layout_above android:layout_below android:layout_toLeftOf android:layout_toRightOf android:layout_alignBottom android:layout_alignTop

android:layout_alignLeft android:layout_alignRight

Widget 1

Widget 2

Widget 2

Widget 1

Widget 1 Widget 2 Widget 2 Widget 1

Widget 1 Widget 2

Widget 1 Widget 2

Widget 1

Widget 2

Widget 1

Widget 2

Relative layout alignment parameters

Android UI 36

android:layout_alignParentTop android:layout_alignParentBottom android:layout_alignParentLeft android:layout_alignParentRight

android:layout_centerInParent android:layout_centerVertical android:layout_centerHorizontal

Android UI 37

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingLeft="16dp"android:paddingRight="16dp"><EditText

…/><Spinner

…/><Spinner

…/><Button …/></RelativeLayout>

Relative Layout

Android UI 38

<RelativeLayout…<EditTextandroid:id="@+id/name"android:layout_width="match_parent"android:layout_height="wrap_content”/><Spinnerandroid:id="@id/times"android:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/name"android:layout_alignParentRight="true"/><Spinnerandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_below="@id/name" android:layout_toLeftOf="@+id/times”android:layout_alignParentLeft="true”/><Buttonandroid:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/times"android:layout_alignParentRight="true"android:text="@string/done"/></RelativeLayout>

Nested Layout

Android UI 39

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/name_title"android:text=“@string/name"> ……</EditText> ……<LinearLayout

android:layout_below="@+id/session">………

<CheckBoxandroid:id="@+id/checkbox_morning"android:text="@string/morining”

……/><CheckBox

……/></LinearLayout></RelativeLayout>

Views

Views

Constraint Layout

Android UI 40

§  Similar to RelativeLayout - All views are laid out according to relationships with others

§  Easier to use with Android Studio’s Layout Editor - Default layout for a new layout

https://developer.android.com/training/constraint-layout/index.html

Layout test

Android UI 41

§  Check the layout with multiple screen sizes

Code Demo: WidgetDemo

Android UI 42

§  Notes - TextView - EditText - RadioButton - CheckBox - Spinners - Relative Layout - Linear Layout - Nested Layout

Tips & Tricks

Android UI 43

§  Use the debugging tools in Android Studio - You can set breakpoints etc. as usual -  logcat shows device output and you can write to it using the

android.util.Log class (sim. to printf).

§  Use “Build->Clean Project” for remove unnecessary files. - This sometime helps to fix errors