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