Examples of how to use the android.view and android.widget platform APIs. For information about view and widget objects, see the topic "Designing the UI for an Android application" in the SDK documentation.

  1. Layouts
    1. RelativeLayout
      1. {@link com.android.samples.view.RelativeLayout1 Example 1}
      2. {@link com.android.samples.view.RelativeLayout2 Example 2}
    2. LinearLayout
      1. {@link com.android.samples.view.LinearLayout1 Example 1}
      2. {@link com.android.samples.view.LinearLayout2 Example 2}
      3. {@link com.android.samples.view.LinearLayout3 Example 3}
      4. {@link com.android.samples.view.LinearLayout4 Example 4}
      5. {@link com.android.samples.view.LinearLayout5 Example 5}
      6. {@link com.android.samples.view.LinearLayout6 Example 6}
      7. {@link com.android.samples.view.LinearLayout7 Example 7}
      8. {@link com.android.samples.view.LinearLayout8 Example 8}
    3. ScrollView
      1. {@link com.android.samples.view.ScrollView1 Example 1}
      2. {@link com.android.samples.view.ScrollView2 Example 2}
    4. TableLayout
      1. {@link com.android.samples.view.TableLayout1 Example 1}
      2. {@link com.android.samples.view.TableLayout2 Example 2}
      3. {@link com.android.samples.view.TableLayout3 Example 3}
      4. {@link com.android.samples.view.TableLayout4 Example 4}
      5. {@link com.android.samples.view.TableLayout5 Example 5}
      6. {@link com.android.samples.view.TableLayout6 Example 6}
      7. {@link com.android.samples.view.TableLayout7 Example 7}
      8. {@link com.android.samples.view.TableLayout8 Example 8}
      9. {@link com.android.samples.view.TableLayout9 Example 9}
      10. {@link com.android.samples.view.TableLayout10 Example 10}
  2. Radio Group
    1. {@link com.android.samples.view.RadioGroup1 Example 1}
  3. ScrollBars
    1. {@link com.android.samples.view.ScrollBar1 Example 1}
    2. {@link com.android.samples.view.ScrollBar2 Example 2}
  4. Visibility
    1. {@link com.android.samples.view.Visibility1 Example 1}
  5. Lists
    1. {@link com.android.samples.view.List1 Example 1}
    2. {@link com.android.samples.view.List2 Example 2}
    3. {@link com.android.samples.view.List3 Example 3}
    4. {@link com.android.samples.view.List4 Example 4}
    5. {@link com.android.samples.view.List5 Example 5}
    6. {@link com.android.samples.view.List6 Example 6}
    7. {@link com.android.samples.view.List7 Example 7}
  6. Custom
    1. {@link com.android.samples.view.CustomView1 Example 1}
  7. Gallery
    1. {@link com.android.samples.view.Gallery1 Example 1}
    2. {@link com.android.samples.view.Gallery2 Example 2}
  8. Spinner
    1. {@link com.android.samples.view.Spinner1 Example 1}
  9. Grid
    1. {@link com.android.samples.view.Grid1 Example 1}
  10. ImageSwitcher
    1. {@link com.android.samples.view.ImageSwitcher1 Example 1}
  11. Animation
    1. {@link com.android.samples.view.Animation1 Example 1}
    2. {@link com.android.samples.view.Animation2 Example 1}
  12. Controls
    1. {@link com.android.samples.view.Controls1 Example 1}

LinearLayout Example 1: Stacking Views

This example shows a simple use of a LinearLayout. The LinearLayout's height is set to android:layout_height="wrap-content", as is the height of each child. Each text view is as tall as it needs to be, and the height of the LinearLayout itself is the sum of the height of its children.

Demo

Views/Layouts/LinearLayout/Example 1

Source files

//device/samples/SampleCode/src/com/android/sdk/view/LinearLayout1.java Loads the linear_layout_1 layout resource
//device/samples/SampleCode/assets/res/any/layout/linear_layout_1.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

LinearLayout Example 2: Stacking Views Again

In this example, the LinearLayout's height is set to android:layout_height="fill-parent", so the LinearLayout fills the screen. Each text view is as tall as it needs to be, so the LinearLayout just stacks them from top to bottom.

Demo

Views/Layouts/LinearLayout/Example 2

Source files

//device/samples/SampleCode/src/com/android/sdk/view/LinearLayout2.java Loads the linear_layout_2 layout resource
//device/samples/SampleCode/assets/res/any/layout/linear_layout_2.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

LinearLayout Example 3: Distributing Extra Space

In this example, the LinearLayout's height is set to "fill-parent", so the LinearLayout fills the screen. Each text view is as tall as it needs to be. However, the middle text view has set android:layout_weight="1". This means that it will get all of the extra space left over after the LinearLayout has sized all of its children.

Demo

Views/Layouts/LinearLayout/Example 3

Source files

//device/samples/SampleCode/src/com/android/sdk/view/LinearLayout3.java Loads the linear_layout_3 layout resource
//device/samples/SampleCode/assets/res/any/layout/linear_layout_3.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

LinearLayout Example 4: Columns

This time, the orientation of the LinearLayout is set to horizontal. Each of the four child text views has set android:layout_weight="1" and android:layout_width="0". This means that each child is initially given a width of 0, and then all of the remaining space (the width of the screen) is divided equally among the four views.

Demo

Views/Layouts/LinearLayout/Example 4

Source files

//device/samples/SampleCode/src/com/android/sdk/view/LinearLayout4.java Loads the linear_layout_4 layout resource
//device/samples/SampleCode/assets/res/any/layout/linear_layout_4.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

LinearLayout Example 5: A Simple Form

This is a more complete example. It shows:

Demo

Views/Layouts/LinearLayout/Example 5

Source files

//device/samples/SampleCode/src/com/android/sdk/view/LinearLayout5.java Loads the linear_layout_5 layout resource
//device/samples/SampleCode/assets/res/any/layout/linear_layout_5.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

RelativeLayout Example 1: Stretching

There are three views in this example. The first view (view1) is pinned to the top of the screen through the use of this attribute: android:layout_alignParentTop="true". The second view (view2) is pinned to the bottom of the screen: android:layout_alignParentBottom="true". This demonstrates how views can be positioned relative to the RelativeLayout itself.

Views can also be positioned relative to each other as well. In this example, view3 is below view1 and above view2: android:layout_above="view2" android:layout_below="view1". This has the effect of making view3 stretch between view1 and view2.

Note that since view3 depends on the positions of both view1 and view2, it is defined after them in the layout file.

Demo

Views/Layouts/RelativeLayout/Example 1

Source files

//device/samples/SampleCode/src/com/android/sdk/view/RelativeLayout1.java Loads the relative_layout_1 layout resource
//device/samples/SampleCode/assets/res/any/layout/relative_layout_1.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

RelativeLayout Example 2: A Simple Form Revisited

The form created in LinearLayout Example 5 is recreated using a RelativeLayout. This example demonstrates:

Demo

Views/Layouts/RelativeLayout/Example 2

Source files

//device/samples/SampleCode/src/com/android/sdk/view/RelativeLayout2.java Loads the relative_layout_2 layout resource
//device/samples/SampleCode/assets/res/any/layout/relative_layout_2.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

Scrolling Example 1

All of the layout classes discussed above do not scroll. They simply arrange their children within whatever space is made available to them.

The ScrollView is used to implement vertical scrolling. It does not display any content of its own. Instead, it assumes it has one child and pans up and down to keep the interesting area of its child in view.

In this example, a ScrollView is used to wrap a LinearLayout. The LinearLayout in turn contains a stack of TextViews and Buttons. The ScrollView is as wide as the screen (android:layout_width="fill-parent") and tall enough to wrap the LinearLayout (android:layout_height="wrap-content"). The LinearLayout uses the same parameters, so it is also as wide as the screen and is as tall as the sum of the heigts of all of its children.

Demo

Views/Layouts/ScrollView/Example 1

Source files

//device/samples/SampleCode/src/com/android/sdk/view/ScrollView1.java Loads the scroll_view_1 layout resource
//device/samples/SampleCode/assets/res/any/layout/scroll_view_1.xml Defines the layout
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

Lists

ListView Example 1: A "Hello World" List

ListViews are used to display vertically scrolling list of information. Unlike the ScrollView, which pans up and down through a set of views that have already been built, the ListView is "virtualized", meaning that views are created only as necessary in order to display what is actually on the screen. ListViews can thus be used to efficiently display very large sets of data. (In this example, the list displays over 600 kinds of cheese.)

ListViews are highly customizable: you can change where the underlying data comes from, the internal representation of the data, and the Views that are used to display the data on the screen. All of this is done with a ListAdapter class. The Android platform includes some ListAdapters that are ready to use, or you can make your own to display custom information. (See ListView Example 4 and ListView Example 5.)

This example uses an existing ListAdapter called ArrayListAdapter. This adapter uses generics to map an array of objects to TextViews. In this case we are using an array of Strings.

Note that this example does not have a layout file. This is because the List1 class derives from ListScreen, which will provide a default layout if your activity does not provide an override.

Demo

Views/Lists/Example 1

Source files

//device/samples/SampleCode/src/com/android/sdk/view/List1.java Contains code for the List1 class
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

ListView Example 2: Displaying Data from a Cursor

It is very common to display data from a database in a ListView. The easiest way to do this is to use a SimpleCursorListAdapter. This is a class that will get data from a Cursor and display the data in each row in Views defined in an XML template.

In this example, the SimpleCursorListAdapter is provided with a cursor that contains a list of all people. Each row will be displayed using the Views defined in this XL file: //device/apps/common/assets/res/any/layout/simple_list_item_1.xml.

When creating a SimpleCursorListAdapter, you also provide a mapping from column names in the Cursor to view ids in the template file. In this case we are mapping the People.NAME column to the "text1" TextView.

Demo

Views/Lists/Example 2

Source files

//device/samples/SampleCode/src/com/android/sdk/view/List2.java Contains code for the List2 class
//device/apps/common/assets/res/any/layout/simple_list_item_1.xml Defines the XML template used for each row. (Note that this file is provided as part of the Android platform.)
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

ListView Example 3: Displaying Data from a Cursor, Fancier Version

This example extends the idea presented in Example 2. Instead of just presenting a list of names, though, it shows two lines of information for the selected item (name and phone number). It shows just the name for unselected items.

This example still uses a SimpleCursorListAdapter, but changes the following:

Demo

Views/Lists/Example 3

Source files

//device/samples/SampleCode/src/com/android/sdk/view/List3.java Contains code for the List3 class
//device/apps/common/assets/res/any/layout/simple_list_item_2.xml Defines the XML template used for each row. (Note that this file is provided as part of the Android platform.)
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

ListView Example 4: Writing a Custom ListAdapter

The previous examples all used standard ListAdapters. It is also possible to write your own ListAdapters to access data from custom sources.

This example introduces a SongListAdapter, which gets its data from an array of titles and an array of lyrics. The SongListAdapter then produces a SongView which is capable of displaying this data.

This example also shows how the ListView handles scrolling large items.

Demo

Views/Lists/Example 4

Source files

//device/samples/SampleCode/src/com/android/sdk/view/List4.java Contains code for the List4 class, along with a custom ListAdapter and custom View to display the data.
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

ListView Example 5: List Separators

ListView supports the concept of non-selectable "separators" between items. The ListView delegated to its ListAdapter the task of deciding whether a given position in the list is a separator or selectable data.

This example needs some cleanup.

Demo

Views/Lists/Example 5

Source files

//device/samples/SampleCode/src/com/android/sdk/view/List5.java Contains code for the List5 class, along with a custom ListAdapter.
//device/samples/SampleCode/AndroidManifest.xml Defines the activity

Working with Views

Custom View Example 1: LabelView

Note: This example does not support multi-line or right-to-left text. It is sample code only and should not be used in place of the TextView.

Demo

Views/Custom/Example 1

Source files

//device/samples/SampleCode/src/com/android/sdk/view/CustomView1.java Loads the custom_view_3 layout resource
//device/samples/SampleCode/src/com/android/sdk/view/LabelView.java Implementation of the custom view
//device/samples/SampleCode/assets/res/any/layout/custom_view_1.xml Defines a layout that uses LabelViews
//device/samples/SampleCode/AndroidManifest.xml Defines the activity