Lecture 2
Android UI Design
Pro. Xin Chen
Email: xinchen@[Link]
MPI, ZJNU
Contents
1. Layout types & elements;
2. Styles & Themes;
3. LogCat & Toast
1. Layout
The Android UI is defined with the Layout files, which ar
e XML files and stored within the res/layout folder.
Layout options
1. RelativeLayout
2. LinearLayout
3. FrameLayout
4. TableLayout
5. GridLayout
6. AbsoluteLayout
2.1 UI Intro.
Android UI consists of containers and widgets:
container : the phone screen.
widget : TextViews, Buttons, EditTexts, ....
Layout elements:
Layout type
Widgets
Style
Theme
2.1 A layout file
<RelativeLayout xmlns:android="[Link]
droid"
xmlns:tools="[Link]
android: layout_width="match_parent"
android: layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeftt="true"
android:layout_alignParentTop="true"
android:layout_marginLeft=20dp"
android:layout_marginTop=50dp"
android:text="@string/hello_world"
tools:context=".MainActivity" />
</RelativeLayout>
Android Layout types
LinearLayout
RelativeLayout
TableLayout
GridLayout
FrameLayout
AbsoluteLayout
2.2 RelativeLayout
RelativeLayout is the default layout type for a new proje
ct.
Two cases:
Relative to the parent container
Relative to another widget
2.3 LinearLayout
In the LinearLayout, widgets are arranged on a ve
rtical or horizontal line.
android orientation =vertical | horizontal
2.4 TableLayout
Wdigets are embedded in a table, in which
<TableRow>
layout_column attribute value starts from 0.
2.5 GridLayout
Each cell has the same width
android: columnCount=4
Look-out
GridLayout is a new feature in Android 4.0, so the minimum S
DK version must be specified as Android4.0 API14
To configure the SDK compatible minimum and maximum ve
rsion in [Link]
<uses-sdk
android: minSdkVersion="14"
android: targetSdkVersion="17" />
2.3.5 FrameLayout
Each widget corresponds to a blank fr
ame
Only one widget/ frame is shown on t
he top-left corner of the screen
If there are more than one widgets ar
e defined, they will be overlapped, an
d the last defined frame will be on the
top.
2.3.6 AbsoluteLayout
With the two attributes android:layout_x , androi
d:layout_y to position the widget on the screen.
This layout type is abandoned in Android 1.5 and h
igher versions.
2.3.7 study case user registration
To design such a UI for user registration by creatin
g your own layout file with the widgets like textvie
w, edittext,radiogroup, and button. Chinese or Eng
lish version are both ok.
The layout file are required.
2.4 Styles &
Themes
A style is used to control the style of an individual vie
w , while a theme is for the whole activity.
To use a system theme for an activity:
Specify an activity attribute in [Link]:
<activity
...
android: theme=@android: style/ [Link]
>
2.4.1 New Styles and Themes
* res/values /[Link]
<resources
xmlns:android="[Link]
roid">
<style name=textStyle">
<item name="android:textSize">16sp</item>
<item
name="android:textColor">#FF0000</item>
</style>
<style name=myTheme">
<item
name="android:background">#D9D9D9</item>
</style>
</resources>
2.4
2. to quote the MyTheme in [Link]
<activity
android:name="[Link]"
android:label="@string/app_name"
android:theme="@style/yyTheme"
>
3. to use the text style in the layout file
<Button
style="@style/textStyle"
android:id="@+id/bt1"
android:text="OK"
android:layout_alignTop="@+id/tv1"
android:layout_marginTop="18dp"
/>
<Button
style="@style/textStyle"
android:id="@+id/bt2"
android:text="OK"
android:layout_below="@+id/bt1"
android:layout_marginTop="18dp"
/>
2.5 Debugging
2.6.1 Junit : Unit Testing
JUnit
Steps
1 config the Junit environment ( JUnit ) in [Link]
l
2 create the test class and method
3 running test
1. Configure in AndroidManifest
<application .... >
<uses-library android:name="[Link]"/>
</application>
<instrumentation
android:name="[Link]"
android:targetPackage="[Link]">
</instrumentation>
2.6 Debugging
2.6.1 LogCat
LogCat gives the log information for an Android pr
oject with 5 levels
Verbose V
Debug D
Info I
Warning W
Error E
LogCat
Two ways to print Log information:
1. Log.i( Tag, TextMessage);
2. [Link](TextMessage)
2.6.2 Toast
Toast show a message that disappears in a while.
Toasts methods
1. makeText(): to set the message
2. show(): to show the message
Toast toast = [Link](Context,Text,Time);
[Link]();
[Link](...,...",...).show();
Review
Different Layout Types along with widgets
Create and use new styles (themes)
Debug your android project by observing the Logcat
information or Toast texts.
Questions?