Scribd
Upload
31 views

Android UI Design: Pro. Xin Chen Email: Xinchen@zjnu - CN Mpi, Zjnu

This document provides an overview of Android UI design, including different layout types, styles and themes, and debugging tools. It discusses the main layout types like RelativeLayout, LinearLayout, TableLayout and GridLayout. It describes how to create and apply custom styles and themes. It also covers logging with LogCat and displaying messages with Toasts. The document provides code examples for defining layouts, styles, and using LogCat and Toasts. It concludes with a review of the key topics and a reminder to ask any questions.

Uploaded by

Abdulla Alim
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views

Android UI Design: Pro. Xin Chen Email: Xinchen@zjnu - CN Mpi, Zjnu

This document provides an overview of Android UI design, including different layout types, styles and themes, and debugging tools. It discusses the main layout types like RelativeLayout, LinearLayout, TableLayout and GridLayout. It describes how to create and apply custom styles and themes. It also covers logging with LogCat and displaying messages with Toasts. The document provides code examples for defining layouts, styles, and using LogCat and Toasts. It concludes with a review of the key topics and a reminder to ask any questions.

Uploaded by

Abdulla Alim
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Lecture 2

Android UI Design

Pro. Xin Chen


Email: [email protected]
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="http://schemas.android.com/apk/res/an
droid"
xmlns:tools="http://schemas.android.com/tools"
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 AndroidManifest.xml
<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 AndroidManifest.xml:
<activity
...
android: theme=@android: style/ Theme.Black
>
2.4.1 New Styles and Themes

* res/values /style.xml

<resources
xmlns:android="http://schemas.android.com/apk/res/and
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 AndroidManifest.xml

<activity

android:name="com.example.hello.MainActivity"
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 AndroidManifest.xm
l
2 create the test class and method
3 running test
1. Configure in AndroidManifest

<application .... >

<uses-library android:name="android.test.runner"/>

</application>

<instrumentation
android:name="android.test.InstrumentationTestRunner"
android:targetPackage="com.example.hello">
</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. System.out.println(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 = Toast.makeText(Context,Text,Time);
toast.show();

Toast.makeText(...,...",...).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?

You might also like