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:

- Using nested LinearLayouts (a horizontal layout inside a vertical layout)
- Using padding on the outer layout
- Using the `layout_gravity` attribute to position the horizontal layout on the right side of the screen
- Using a margin to put some space between buttons

#### 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:

- Using padding on the outer layout
- Positioning views realtive to one another using the `android:layout_below` and `android:layout_below` and `android:layout_toLeft`attributes.``
- Aligning the top edges of the buttons with the `android:layout_alignTop`attribute``
- Right-aligning the OK button with `android:layout_alignParentRight`
- Using a margin to put some space between buttons

#### 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:

- The Cursor now contains all phone numbers
- It uses a different template for each row: //device/apps/common/assets/res/any/layout/simple_list_item_2.xml
- Since simple_list_item_2.xml contains two views, were mapping two columns `{ Phones.NAME, Phones.NUMBER }` to the two views `{ "text1", "text2"}`
- The simple_list_item_2.xml uses a TwoLineListItem view, which is a subclass of LinearLayout that knows to only show the second item when it is selected.

#### 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