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