Tuesday, May 21, 2013

Customizing Checkboxes In Android

Learn Android Tutorial

In android we can customize the customize the default checkboxes. Default checkboxes are small and also not attractive, By using customized checkboxes we can design more attractive and better user interface.

To customize checkboxes we need to define our own drawables for checked and unchecked state.

Learn Customize Radio Button In Android

In this example I have  used these two drawables for checked and unchecked state.




We need to define the xml for our customized checkboxes

create the custom_checkbox_design.xml  file and put it in drawable folder( if drawable folder is not there ,cerate it (inside res folder, and put custom_checkbox_design.xm  file in this folder). It should look like following in pacakgae explorer

res
  -> drawable
         -> custom_checkbox_design.xml

custom_checkbox_design.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/checked" />
         <item android:state_checked="false" android:drawable="@drawable/unchecked" />
    
    </selector>



In checkbox  set android:button  property to the  custom_checkbox_design.xml  drawable  like
android:button="@drawable/custom_checkbox_design"

See the differences in default checkbox and customize checkbox in below screenshot.




main.xml


<LinearLayout
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:orientation="vertical"
               xmlns:android="http://schemas.android.com/apk/res/android">

   <TextView
                android:id="@+id/textView1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:gravity="center_horizontal"
                android:textSize="25dp"
                android:text="Default Check box" />

  
   <!--   Default Checkboxes  -->

   <CheckBox
                   android:id="@+id/checkBoxDeafult1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:layout_gravity="center_horizontal"
                   android:text="Checked Checkbox"
                   android:layout_marginTop="20dp"
                   android:checked="true"
                   android:textSize="20dp" />
     <CheckBox
                   android:id="@+id/checkBoxDeafult1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:text="Unchecked Checkbox"
                   android:layout_marginTop="10dp"
                   android:checked="false"
                   android:textSize="20dp" />
    
    
        <View
                   android:layout_width="fill_parent"
                   android:layout_height="1dp"
                   android:layout_marginTop="20dp"
                   android:background="#B8B894" />
    
      <TextView
                   android:id="@+id/textView1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:layout_marginTop="30dp"
                   android:gravity="center_horizontal"
                   android:textSize="25dp"
                   android:text="Customized Check box" />

     
     
      <!--   Customized Checkboxes  -->

   <CheckBox
                   android:id="@+id/checkBoxCustomized1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:text="Checked Checkbox"
                   android:layout_marginTop="20dp"
                   android:checked="true"
                   android:button="@drawable/custom_checkbox_design"
                   android:textSize="20dp" />
     <CheckBox
                   android:id="@+id/checkBoxCustomized1"
                   android:layout_width="fill_parent"
                   android:layout_height="wrap_content"
                   android:text="Unchecked Checkbox"
                   android:layout_marginTop="10dp"
                   android:checked="false"
                   android:button="@drawable/custom_checkbox_design"
                   android:textSize="20dp" />
  

</LinearLayout>



 

Advance Android Topics


                   Customizing Toast In Android 
                   Showing Toast for Longer Time
                   Customizing the Display Time of Toast
                   Using TimePickerDialog and DatePickerDialog In android
                   Animating A Button In Android
                    Populating ListView With DataBase

                    Customizing Checkboxes In Android 
                    Increasin Size of Checkboxes
                    Android ProgressBar
                    Designing For Different Screen Sizes
                    Handling Keyboard Events

More Android Topics:



  

Android : Introduction


       Eclipse Setup for Android Development

                     Configuring Eclipse for Android Development

          Begging With Android

                     Creating Your First Android Project
                     Understanding Android Manifest File of your android app


         Working With Layouts

                      Understanding Layouts in Android
                          Working with Linear Layout (With Example)
                                Nested Linear Layout (With Example)
                          Table Layout
                          Frame Layout(With Example)
                         Absolute Layout
                         Grid Layout


       Activity

                     Activity In Android
                     Activity Life Cycle
                     Starting Activity For Result
                     Sending Data from One Activity to Other in Android
                     Returning Result from Activity

     Working With Views

                     Using Buttons and EditText in Android 
                     Using CheckBoxes in Android 
                     Using AutoCompleteTextView in Android
                     Grid View

       Toast

                     Customizing Toast In Android
                     Customizing the Display Time of Toast
                     Customizing Toast At Runtime
                     Adding Image in Toast
                     Showing Toast for Longer Time

     Dialogs In Android

                     Working With Alert Dialog
                     Adding Radio Buttons In Dialog
                     Adding Check Boxes In Dialog
                     Creating Customized Dialogs in Android
                    Adding EditText in Dialog

                   Creating Dialog To Collect User Input

                 DatePicker and TimePickerDialog

                              Using TimePickerDialog and DatePickerDialog In android

    Working With SMS

                  How to Send SMS in Android
                  How To Receive SMS
                  Accessing Inbox In Android

    ListView:

               Populating ListView With DataBase

      Menus In Android

                    Creating Option Menu
                    Creating Context Menu In Android

      TelephonyManager

                    Using Telephony Manager In Android

     Working With Incoming Calls

                    How To Handle Incoming Calls in Android
                    How to Forward an Incoming Call In Android
                   CALL States In Android
 

    Miscellaneous

                   Notifications In Android
                   How To Vibrate The Android Phone
                   Sending Email In Android
                  Opening a webpage In Browser
                   How to Access PhoneBook In Android
                   Prompt User Input with an AlertDialog

   Storage:  Storing Data In Android


               Shared Prefferences  In Android

                             SharedPreferences In Android

               Files: File Handling In Android

                              Reading and Writing files to Internal Stoarage
                              Reading and Writing files to SD Card 
                           

                DataBase : Working With Database

                             Working With Database in Android
                             Creating Table In Android
                             Inserting, Deleting and Updating Records In Table in Android
                             How to Create DataBase in Android
                             Accessing Inbox In Android

     Animation In Android:

                  Animating A Button In Android





8 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. hi there.. where is the definition for checked and unchecked ?

    ReplyDelete
    Replies
    1. cheked and unchked are two drawables(images) that we have used for checked and unchecked state.

      I have given those drawables in this post(top).

      Delete
  3. can we skin the on press also . in the orginal theme unaltered the on press is working. when we skinned it like what we done here. there is no on press highlight anymore. pls help me add custom on press graphics. .. many thanks

    ReplyDelete
  4. cheked and unchked are two drawables(images) not given code

    ReplyDelete
  5. How can i determine size of drawble? just by the size of the drawble? thanks!

    ReplyDelete