Wednesday, November 30, 2016

Radio Group/Radio Button


In Android, Radio Group/Radio Button is use to select single option from number of choice. For the better user interference this is very important to customize the radio button according to need of theme. In this tutorial i am covering some points of customization.
 
 
 
<RadioGroup
    android:id="@+id/radioGroupSimple"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/activity_vertical_margin">
   
 <RadioButton
        android:id="@+id/radioButton1Simple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="radioButton1Simple" />
   
 <RadioButton
        android:id="@+id/radioButton2Simple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="radioButton2Simple" />
   
 <RadioButton
        android:id="@+id/radioButton3Simple"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="radioButton3Simple" />
 
</RadioGroup>



Steps to use Radio Group/Radio Button 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.radio.group_button.MainActivity">
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                      create simple radio button group                                -->
        <!--_____________________________________________________-->
    
        <RadioGroup
            android:id="@+id/radioGroupSimple"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_vertical_margin">
    
            <RadioButton
                android:id="@+id/radioButton1Simple"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="radioButton1Simple" />
    
            <RadioButton
                android:id="@+id/radioButton2Simple"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="radioButton2Simple" />
    
            <RadioButton
                android:id="@+id/radioButton3Simple"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="radioButton3Simple" />
    
        </RadioGroup>
    
        <!--_____________________________________________________-->
        <!--                                                                                                          -->
        <!--                             create simple radio button group                         -->
        <!--                                   and add custom drawable                              -->
        <!--_____________________________________________________-->
    
        <RadioGroup
            android:id="@+id/radioGroupCustom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_vertical_margin">
    
            <RadioButton
                android:id="@+id/radioButton1Custom"
                style="@style/radio_button_custom_style"
                android:text="radioButton1Custom" />
    
            <RadioButton
                android:id="@+id/radioButton2Custom"
                style="@style/radio_button_custom_style"
                android:text="radioButton2Custom" />
    
            <RadioButton
                android:id="@+id/radioButton3Custom"
                style="@style/radio_button_custom_style"
                android:text="radioButton3Custom" />
        </RadioGroup>
    
    </LinearLayout>
    
    
    
    
      
  3. In the above main_activity.xml, i am using two types of radio buttons. First one radio group have simple radio buttons with default theme. Second radio group having custom theme which is defined in style.xml. So open the style.xml and add new style to it.

    <style name="radio_button_custom_style" parent="@android:style/Widget.CompoundButton.RadioButton">
        <item name="android:button">@drawable/bg_radio_buton</item>
        <item name="android:drawablePadding">50dp</item>
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">#16a085</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_margin">5dp</item>
        <item name="android:layout_width">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>
    
      <!-- Custom radio button theme. -->
        <style name="radio_button_custom_style" parent="@android:style/Widget.CompoundButton.RadioButton">
            <item name="android:button">@drawable/bg_radio_buton</item>
            <item name="android:drawablePadding">50dp</item>
            <item name="android:textSize">12sp</item>
            <item name="android:textColor">#16a085</item>
            <item name="android:layout_height">wrap_content</item>
            <item name="android:layout_margin">5dp</item>
            <item name="android:layout_width">wrap_content</item>
        </style>
    
    </resources>
    
    
    

     
  5. Now see in your style, there are a custom drawable is used
     
    <item name="android:button">@drawable/bg_radio_buton</item> 
  6. So go to your resource directory and select your drawable directory and create new drawable resource file(drawable/bg_radio_buton.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_window_focused="false" />
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_window_focused="false" />
        <item android:drawable="@drawable/check" android:state_checked="true" android:state_pressed="true" />
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_pressed="true" />
        <item android:drawable="@drawable/check" android:state_checked="true" android:state_focused="true" />
        <item android:drawable="@drawable/uncheck" android:state_checked="false" android:state_focused="true" />
        <item android:drawable="@drawable/uncheck" android:state_checked="false" />
        <item android:drawable="@drawable/check" android:state_checked="true" />
    </selector>
    
    
    
     
  7. Open your MainActivity.JAVA class and update it for change text at run time-

    package com.pankaj.radio.group_button;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.RadioButton;
    import android.widget.RadioGroup;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
    
        //create objects of radio group
        private RadioGroup radioGroupSimple, radioGroupCustom;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //initialize radiogroup objects
            radioGroupSimple = (RadioGroup) findViewById(R.id.radioGroupSimple);
            radioGroupCustom = (RadioGroup) findViewById(R.id.radioGroupCustom);
    
            //add listener
            radioGroupSimple.setOnCheckedChangeListener(this);
            radioGroupCustom.setOnCheckedChangeListener(this);
        }
    
        @Override
        public void onCheckedChanged(RadioGroup radioGroup, int i) {
    
            //find id of the selected radio button
            int selectedId = radioGroup.getCheckedRadioButtonId();
    
            // find the radiobutton by returned id
            RadioButton radioButton = (RadioButton) findViewById(selectedId);
    
            //show toast message for selecteded radio button
            Toast.makeText(this, radioButton.getText(), Toast.LENGTH_SHORT).show();
    
        }
    }
    
    

  8. Now all the development process for Radio group/Radio button has completed, Please run the application.



  9. Now select any radio button from first radio group and see the result on screen-
     

  10. Also select any radio button from second radio group and see the result on screen-
     
     


  11.  Good bye, Thanks to read this blog.




No comments:

Post a Comment