[Tutorial] [Part-2] Make Your Checkbox a Custom one In Android With Sample Code Github

Hello everyone,

This is a continuation of the previous tutorial on how to implement a basic checkbox in android with kotlin you can read about that here [Tutorial][Part-1] How to Impalement a Basic Checkbox in Android Kotlin With Sample Code Github 

In this tutorial we are going to look at how can we make our android checkbox a custom one with more a unique look, so recently we have shared an article on [Tutorial] How to Use Checkbox in Android Kotlin With Sample Code Github, in that article I have shared a quite a few things that are very much useful if you're setting up you android application with a checkbox for the first time, also that post contains lots of things that you would like to know beforehand like, updating the checkbox programmatically. What I didn't share earlier is that how to make the checkbox look like a custom one like in the below picture because I thought not to mess up the post with lots of information it will be more like a step by step tutorial, so step one is to create an android checkbox and step to is to make it a custom one. And if you're here for the code it is shared at the end of the post follow through the tutorial so that you won't miss anything, also share this article to get more like this.

Android Custom CheckBox

So I have made two images to handle the state as checked and unchecked like below

For selected

For unselected

So now we are going to using a new drawable which is going to be the selector of the checkbox more about that below, for now, let's create a new drawable file

Steps to create a selector drawable file in the android studio:

1. Navigate to the project tab
2. Click on the drawable folder
3. New -> Drawable resource file
4. Enter file name "custom_checkbox_selector"
5. Root element as a selector
6. And directory as drawable

Refer below screenshots for details

So, the important thing here you might have already know that how to make a drawable and maybe create a custom textview if you followed of my previous tutorial in here Android TextView - All Things You Need To Know Where I have given the glimpse about the Android shape tag in the drawable file but inhere we are going to be using the selector tag.

What is the difference between android drawable XML selector and shape tags?

• Shape -  tags are useful if you want to make a static design only like a rounded corner or a circle with a stroke
• Selector - tag is to control make state-based android drawable like in our checkbox, one drawable for the checked state, and another drawable for the unchecked state.

So now let's make our checkbox a custom one,  before that you have to move the two images that for your checkbox's state you have to move it to the drawable folder since I have only one resolution of the image I will be putting those images in drawable-xxxhdpi, if you have multiple resolution images you can put it in all the drawable-* directories.

• Learn How to Store Data In Android With Shared Preference In Kotlin

Once you have put the images in the images in drawable directory, you can copy-paste below code

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

The above code will make our android checkbox make more customized, in the view. What this piece of code does is, this selector will select the drawable based on the state so, if we look closely into the code the android:state_checked= handles the changing of the drawable whenever the state of the view changes, let's say that we have two states for our checkboxes' checked and unchecked, to change the drawable on clicking the drawable we have to set an onCheckedChangelisterner to the checkbox here [Tutorial] How to Use Checkbox in Android Kotlin With Sample Code Github, also keep in mind that you have set onClickListerner on toa button like explained in this tutorial here [Tutorial] How To SetOnClickListener In Android Button Click With Kotlin.

The selector supports multiple item tags inside it, in which we were going to define the state-based drawable so for our case we set the selected drawable to the android:state_checked="true" and the unselected drawable to android:state_checked="false" so what it will do is the android system will select the drawable of the view based on the state. Below is a screenshot on how it will look like in the android studio and when changing the state,

State Checked

State Unchecked

Now that we have made our custom checkbox selector drawable we can implement this drawable in the android checkbox to make it a custom one, for that we are going to use the android:button="" attribute in our previous tutorials when setting the drawable of a button or textview we have set it to the background because those views are extending the view class but the checkbox extends compound button class to manage its state, so instead of setting it to the background we will be setting it to the button attribute also this only makes sense right we are not setting a background rather we are setting a buttons image. Below is the code to achieve our desired design

    <CheckBox

        android:id="@+id/customCheckBox"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:padding="8dp"

        android:button="@drawable/custom_check_box_selector"

        android:text="Check Box 3"

        android:textAppearance="@style/TextAppearance.AppCompat.Medium"

        android:visibility="visible"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.5"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/normalCheckBox2" />

Above is the code for a normal checkbox with our custom selector set to the button attribute which is the one going to handle the change of image in our checkbox according to the state of our drawable, also you may see some constraint attribute which is nothing but that I have used constraint layout for this tutorial you can learn about android constraint layout in here [Tutorial] Android Constraint Layout Example With Sample Code, also this codes is part of the code from our previous tutorial in where I have given some insights about how to start with the android checkbox to the end on how to programmatically set the state, you can get the tutorial here [Tutorial] How to Use Checkbox in Android Kotlin With Sample Code Github.

And here is the final output:

Now that we have served our purpose here, we can look at some of the cool things you can learn along with it are here :

1. [Tutorial] Show Toast Message Android Kotlin With Sample Code -MAD
2. [Tutorial] Create Android Fragment With Kotlin Sample Code Included
3. [Tutorial] How To Change The Font Of An Android Application
4. [Tutorial] How To Create Recycler View In android With Kotlin

And for the best part, you can get the code get the complete project code here for future reference  from GitHub: Android Custom CheckBox Code

Feel free to leave a like on Facebook Mad Tutorial Facebook Page
And follow me on Twitter Mad Tutorial Twitter Page

Don't be a stranger, feel free to ask you a question, speak you mind

keywords:
learn android application development
learn how to create an android checkbox tutorial with sample code