Android UI Creation

Timothy Sohn
Senior Research Scientist
NRC Palo Alto
 Android User Interface
■ Specified in XML or programmatically through Java
- UI declared in XML

- Instantiated at runtime

■ No WYSIWYG editor for UI creation

- layout preview through eclipse

- layoutopt tool to analyze inefficiencies

2
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
       
        <TextView
            android:text="red"
            android:gravity="center_horizontal"
            android:background="#aa0000"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"/>
       
    .....
               
    </LinearLayout>
       
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
               
        <TextView
            android:text="row four" 3
            android:textSize="15pt"
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
       
        <TextView
            android:text="red"
            android:gravity="center_horizontal"
            android:background="#aa0000"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"/>
       
    .....
               
    </LinearLayout>
       
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
               
        <TextView
            android:text="row four" 3
            android:textSize="15pt"
     android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:orientation="horizontal"

Linear Layout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
       
        <TextView
            android:text="red"
            android:gravity="center_horizontal"
            android:background="#aa0000"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"/>
       
    .....
               
    </LinearLayout>
       
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
               
        <TextView
            android:text="row four"
            android:textSize="15pt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

...
       
    </LinearLayout>
       
</LinearLayout>

3
Relative Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/
android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <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="10dip"
        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>

4
Relative Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/
android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <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="10dip"
        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>

4
Relative Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/
android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <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="10dip"
        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>

4
Auto Completion
  <AutoCompleteTextView android:id="@+id/edit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    AutoCompleteTextView textView =
(AutoCompleteTextView) findViewById(R.id.edit);
    ArrayAdapter adapter = new ArrayAdapter(this,
           
android.R.layout.simple_dropdown_item_1line,
COUNTRIES);
    textView.setAdapter(adapter);
}

5
Auto Completion
  <AutoCompleteTextView android:id="@+id/edit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    AutoCompleteTextView textView =
(AutoCompleteTextView) findViewById(R.id.edit);
    ArrayAdapter adapter = new ArrayAdapter(this,
           
android.R.layout.simple_dropdown_item_1line,
COUNTRIES);
    textView.setAdapter(adapter);
}

5
List View Filtering

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
 
  setListAdapter(new ArrayAdapter<String>(this,
          android.R.layout.simple_list_item_1,
COUNTRIES));
  getListView().setTextFilterEnabled(true);
}

6
List View Filtering

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
 
  setListAdapter(new ArrayAdapter<String>(this,
          android.R.layout.simple_list_item_1,
COUNTRIES));
  getListView().setTextFilterEnabled(true);
}

6
Views: GridView
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/
apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="90dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    GridView gridview = (GridView) findViewById

(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));
}

7
Views: GridView
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/
apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="90dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    GridView gridview = (GridView) findViewById

(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));
}

7
Views: MapView

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://
schemas.android.com/apk/res/android"
    android:id="@+id/mainlayout"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <com.google.android.maps.MapView
        android:id="@+id/mapview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:apiKey="Your Maps API Key"
    />

</RelativeLayout>

8
Views: MapView

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://
schemas.android.com/apk/res/android"
    android:id="@+id/mainlayout"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <com.google.android.maps.MapView
        android:id="@+id/mapview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:apiKey="Your Maps API Key"
    />

</RelativeLayout>

8
Views: WebView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://
schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />

</LinearLayout>

9
Views: WebView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://
schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />

</LinearLayout>

9
Other Views
Tab View Form View Gallery View

10
Menus

Screen Menu Context Menu

11
Notifications

Toast Notifications

Dialog Boxes

Notification Bar

12
Dialog Notifications

13
Dialog Notifications

13
Dialog Notifications

13
Dialog Notifications

13
Dialog Notifications

13
Dialog Notifications

13
 StyleSheet
■ Create “style elements” to use on all your views
■ Like CSS but written in XML

<TextView
    android:layout_width="fill_parent" <TextView
    android:layout_height="wrap_content"
    style="@style/CodeFont"
    android:textColor="#00FF00"
    android:text="@string/hello" />
    android:typeface="monospace"
    android:text="@string/hello" />

14
Demo