Friday, March 30, 2012

Custom radio button and checkbox in android

Anybody know that real cool Android application must have not only excelent business logic. The one of the most important things what application must have is a nice UI.
If you want to create realy interesting application you need to create good UI. And …. hire a designer
Below i want to tell you how to create your own CheckBoxes and RadioButtons for your Android Applications. Sorry for this sample UI design. I didn’t hire a designer :).
First look at video of that:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <TextView 
  android:layout_width="wrap_content"
  android:textAppearance="?android:attr/textAppearanceLarge" 
  android:id="@+id/textView1"
  android:layout_height="wrap_content" 
  android:text="Custom Radio Button "/>
 <RadioGroup 
  android:id="@+id/radioGroup1"
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content">
  <RadioButton 
   android:text="Cool" 
   android:button="@drawable/my_ratingbar"
   android:layout_height="wrap_content" 
   android:id="@+id/radio0"
   android:layout_width="134dp"/>
  <RadioButton 
   android:text="Sexy" 
   android:button="@drawable/my_ratingbar"
   android:layout_height="wrap_content" 
   android:id="@+id/radio1"
   android:checked="true" 
   android:layout_width="wrap_content"/>
  <RadioButton 
   android:text="Both" 
   android:button="@drawable/my_ratingbar"
   android:layout_height="wrap_content" 
   android:id="@+id/radio2"
   android:layout_width="wrap_content"/>
 </RadioGroup>
 <TextView 
  android:layout_width="wrap_content"
  android:textAppearance="?android:attr/textAppearanceLarge"
  android:layout_marginTop="20dp" 
  android:id="@+id/textView1"
  android:layout_height="wrap_content" 
  android:text="Custom Check Box "/>
 <CheckBox 
  android:text="CheckBox1" 
  android:id="@+id/checkBox1"
  android:checked="true" 
  android:button="@drawable/my_ratingbar"
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content"/>
 <CheckBox 
  android:text="CheckBox2" 
  android:id="@+id/checkBox2"
  android:button="@drawable/my_ratingbar" 
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"/>
 <TextView 
  android:layout_width="wrap_content"
  android:textAppearance="?android:attr/textAppearanceLarge"
  android:layout_marginTop="20dp" 
  android:id="@+id/textView1"
  android:layout_height="wrap_content" 
  android:text="http://developer-dot-android.blogspot.com"/>
</LinearLayout>




my_ratingbar.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_checked="true" android:drawable="@drawable/red_holo" />
 <item android:state_checked="false" android:drawable="@drawable/red_full" />
</selector>

red_holo


red_full


1 comment:

Anonymous said...

Thanks for the tutorial. It's work perfect!