Thursday, March 12, 2020

How to custom checkbox Android example

The CheckBox extension from CompoundButton creates a Button type that allows to display checkboxes, show checked or unchecked status information, code to customize CheckBox
CompoundButton
CompoundButton is an abstract base class extending from TextView (Button), from this class it is extended to build View: CheckBox, RadioButton, Switch, ToggleButton
The CheckBox, RadioButton, Switch, ToggleButton extension classes save properties and behaves similar to TextView, Button but have two checked and unchecked states.
Some properties, common methods for CheckBox, RadioButton, Switch, ToggleButton

Android Custom CheckBox

Android provides facility to customize the UI of view elements rather than default.
You are able to create custom CheckBox in android. So, you can add some different images of checkbox on the layout.
Example of Custom CheckBox
In this example, we create both default as well as custom checkbox. Add the following code in activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="example.javatpoint.com.customcheckbox.MainActivity">


    <TextView
        android:id="@+id/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:textSize="25dp"
        android:text="Default Check Box"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New CheckBox"
        android:id="@+id/checkBox"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="46dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New CheckBox"
        android:id="@+id/checkBox2"
        android:layout_below="@+id/checkBox"
        android:layout_alignLeft="@+id/checkBox"
        android:layout_alignStart="@+id/checkBox" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:layout_marginTop="200dp"
        android:background="#B8B894"
        android:id="@+id/viewStub" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox 1"
        android:id="@+id/checkBox3"
        android:button="@drawable/customcheckbox"
        android:layout_below="@+id/viewStub"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="58dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox 2"
        android:id="@+id/checkBox4"
        android:button="@drawable/customcheckbox"
        android:layout_below="@+id/checkBox3"
        android:layout_alignLeft="@+id/checkBox3"
        android:layout_alignStart="@+id/checkBox3" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textSize="25dp"
        android:text="Custom Check Box"
        android:id="@+id/textView"
        android:layout_alignTop="@+id/viewStub"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Checked"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>  
checkbox.xml in drawable file
<?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>  
MainActivity.java
public class MainActivity extends AppCompatActivity {
    CheckBox cb1,cb2;
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        cb1=(CheckBox)findViewById(R.id.checkBox3);
        cb2=(CheckBox)findViewById(R.id.checkBox4);
        button=(Button)findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                StringBuilder sb=new StringBuilder("");

                if(cb1.isChecked()){
                    String s1=cb1.getText().toString();
                    sb.append(s1);
                }

                if(cb2.isChecked()){
                    String s2=cb2.getText().toString();
                    sb.append("\n"+s2);

                }
                if(sb!=null && !sb.toString().equals("")){
                    Toast.makeText(getApplicationContext(), sb, Toast.LENGTH_LONG).show();

                }
                else{
                    Toast.makeText(getApplicationContext(),"Nothing Selected", Toast.LENGTH_LONG).show();
                }

            }

        });
    }
}  
How to custom checkbox Android example

No comments:

Post a Comment