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"/>