A Visual Guide to Android GUI Widgets

To make your life as a Java Android cell phone programmer/ui designer easier.

For rapid development of your user interfaces try DroidDraw

AnalogClock
<AnalogClock
id="@+id/clock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
Button
<Button id ="@+id/button1"
 android:text="Label"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
/>
<Button id ="@+id/button2"
 android:text="Label"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:typeface="serif"
/>
<Button id ="@+id/button3"
 android:text="Label"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:textStyle="bold_italic"
/>
CheckBox
<CheckBox id="@+id/plain_cb"
 android:text="Plain"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
/>
<CheckBox id="@+id/serif_cb"
 android:text="Serif"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:typeface="serif"
/>
<CheckBox id="@+id/bold_cb"
 android:text="Bold"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textStyle="bold"
/>
<CheckBox id ="@+id/italic_cb"
 android:text="Italic"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textStyle="italic"
/>
DatePicker
<DatePicker
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" >

...
// Required Java init code:
DatePicker dp = 
     (DatePicker)this.findViewById(R.id.widget27);

// for example init to 1/27/2008, no callback 
dp.init(2008, 0, 27, Calendar.SUNDAY, null);  
...
DigitalClock
<DigitalClock id="@+id/digitalclock"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"/>
EditText
<EditText id ="@+id/edittext1"
 android:text="EditText 1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
/>
<EditText id ="@+id/button2"
 android:text="(206)555-1212"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:typeface="serif"
 android:phoneNumber="true"
/>
<EditText id ="@+id/password"
 android:text="SuperSecret"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textStyle="bold_italic"
 android:password="true"
/>
Gallery
<Gallery
  id="@+id/gallery"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"/>
ImageButton
<ImageButton id="@+id/imagebutton"
  android:src="@drawable/brush"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"/>
ImageView
<ImageView id="@+id/imagebutton"
  android:src="@drawable/brush"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"/>
ProgressBar
<ProgressBar id="@+id/progress"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"/>
RadioButton
<RadioGroup
id="@+id/widget1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
>
<RadioButton
id="@+id/widget2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Plain"
android:checked="false"
android:layout_gravity="left"
android:layout_weight="0"
>
</RadioButton>
<RadioButton
id="@+id/widget3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Serif"
android:checked="true"
android:layout_gravity="left"
android:layout_weight="0"
android:typeface="serif"
>
</RadioButton>
<RadioButton
id="@+id/widget25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bold"
android:checked="false"
android:layout_weight="0"
android:layout_gravity="left"
android:textStyle="bold"
>
</RadioButton>
<RadioButton
id="@+id/widget24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bold & Italic"
android:checked="false"
android:layout_weight="0"
android:layout_gravity="left"
android:textStyle="bold_italic"
>
</RadioButton>
</RadioGroup>
Spinner
<Spinner
 id="@+id/widget1"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:drawSelectorOnTop="false"/>
TextView
<TextView id="@+id/plain"
 android:text="Plain"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
/>
<TextView id="@+id/serif"
 android:text="Serif"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:typeface="serif"
/>
<TextView id="@+id/bold"
 android:text="Bold"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textStyle="bold"
/>
<TextView id ="@+id/italic"
 android:text="Italic"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textStyle="italic"
/>
TimePicker
<TimePicker
 id="@+id/widget3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"/>