Thursday, December 01, 2016

Checkbox


In Android, Checkbox is use to select multiple options from number of choice. For the better user interference this is very important to customize the checkbox according to need of theme. In this tutorial i am covering some steps of customization.
  
 


<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title" />
 
 
Steps to use Checkbox in your project.
  1. Crate a project in android studio.
     
  2. Open your main_activity.xml and update it-
     <?xml version="1.0" encoding="utf-8"?>
    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        tools:context="com.pankaj.checkbox.MainActivity">
    
        <!--_____________________________________________________-->
        <!--                                                     -->
        <!--                create simple checkbox               -->
        <!--_____________________________________________________-->
    
        <CheckBox
            android:id="@+id/checkbox1Simple"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="checkbox1Simple" />
    
        <CheckBox
            android:id="@+id/checkbox2Simple"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="checkbox2Simple" />
    
        <!--_____________________________________________________-->
        <!--                                                     -->
        <!--                create custom checkbox               -->
        <!--_____________________________________________________-->
    
        <CheckBox
            android:id="@+id/checkbox3Custom"
            style="@style/custom_check_box"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="checkbox3Custom" />
    
        <CheckBox
            android:id="@+id/checkbox4Custom"
            style="@style/custom_check_box"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="checkbox4Custom" />
    
    </LinearLayout>
    
    
      
  3. In the above main_activity.xml, i am using two types of checkbox. First two checkbox have default theme. Last two checkbox have custom theme which is defined in style.xml. So open the style.xml and add new style to it.

     <!--check box styles-->
        <style name="custom_check_box" parent="android:Widget.CompoundButton.CheckBox">
            <item name="android:button">@drawable/selector_check_box</item>
            <item name="android:textColor">@color/colorPrimary</item>
            <item name="android:textSize">15sp</item>
            <item name="android:titleMargin">5dp</item>
            <item name="android:paddingLeft">5dp</item>
            <item name="android:layout_width">wrap_content</item>
            <item name="android:layout_height">wrap_content</item>
        </style>
    

  4. Now your style.xml should be like this-

    <resources>
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
    
        <!--check box styles-->
        <style name="custom_check_box" parent="android:Widget.CompoundButton.CheckBox">
            <item name="android:button">@drawable/selector_check_box</item>
            <item name="android:textColor">@color/colorPrimary</item>
            <item name="android:textSize">15sp</item>
            <item name="android:titleMargin">5dp</item>
            <item name="android:paddingLeft">5dp</item>
            <item name="android:layout_width">wrap_content</item>
            <item name="android:layout_height">wrap_content</item>
        </style>
    </resources>
    

     
  5. Now see in your style, there are a custom drawable is used
     
    <item name="android:button">@drawable/selector_check_box</item> 
  6. So go to your resource directory and select your drawable directory and create new drawable resource file(drawable/selector_check_box.xml).

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true" android:state_window_focused="false"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="true" android:state_window_focused="false"/>
        <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true" android:state_pressed="true"/>
        <item android:drawable="@drawable/check" android:state_checked="false" android:state_enabled="true" android:state_pressed="true"/>
        <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true" android:state_focused="true"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="true" android:state_focused="true"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="true"/>
        <item android:drawable="@drawable/check" android:state_checked="true" android:state_enabled="true"/>
    
        <!-- Disabled states -->
        <item android:drawable="@drawable/uncheck" android:state_checked="true" android:state_enabled="false" android:state_window_focused="false"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="false" android:state_window_focused="false"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="true" android:state_enabled="false" android:state_focused="true"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_enabled="false" android:state_focused="true"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="false"/>
        <item android:drawable="@drawable/uncheck" android:state_checked="true"/>
    </selector>
    
     
  7. Open your MainActivity.JAVA class and update it for change text at run time-

    package com.pankaj.checkbox;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.CheckBox;
    import android.widget.CompoundButton;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
    
        //create checkbox object
        private CheckBox checkbox1Simple, checkbox2Simple, checkbox3Custom, checkbox4Custom;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //initialize objects
            checkbox1Simple = (CheckBox) findViewById(R.id.checkbox1Simple);
            checkbox2Simple = (CheckBox) findViewById(R.id.checkbox2Simple);
            checkbox3Custom = (CheckBox) findViewById(R.id.checkbox3Custom);
            checkbox4Custom = (CheckBox) findViewById(R.id.checkbox4Custom);
    
            //add listener
            checkbox1Simple.setOnCheckedChangeListener(this);
            checkbox2Simple.setOnCheckedChangeListener(this);
            checkbox3Custom.setOnCheckedChangeListener(this);
            checkbox4Custom.setOnCheckedChangeListener(this);
        }
    
        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
           
            //A meesage will be show on every selected/unselected condition
            Toast.makeText(this, compoundButton.getText() + " : " + (b ? "Selected" : "Unselected"), Toast.LENGTH_SHORT).show();
        }
    }
    

  8. Now all the development process for Checkbox has completed, Please run the application.



  9. Now select any checkbox from first two checkboxes and see the result on screen-
     

     


  10. Now select any checkbox from last two checkboxes and see the result on screen-

     


  11.  Good bye, Thanks to read this blog.




No comments:

Post a Comment