Scribd
Upload
106 views29 pages

Developing With Android Ui

Android user interfaces can be specified using XML layout files or programmatically using Java code. There is no WYSIWYG editor for designing UI, but the Eclipse IDE provides layout previews and tools can analyze layout efficiency. Common layouts include linear layouts, which stack views horizontally or vertically, and relative layouts, which position views relative to each other or the parent container.

Uploaded by

Sujatha Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
106 views29 pages

Developing With Android Ui

Android user interfaces can be specified using XML layout files or programmatically using Java code. There is no WYSIWYG editor for designing UI, but the Eclipse IDE provides layout previews and tools can analyze layout efficiency. Common layouts include linear layouts, which stack views horizontally or vertically, and relative layouts, which position views relative to each other or the parent container.

Uploaded by

Sujatha Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

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

You might also like