Android Create Material Design Custom Checkbox using theme

How to change checkbox tick color on selection in android application using style.

Custom checkbox is required by thousands of android developer who wish to modify the checkbox functionality according to their customer requirement . So here is the complete step by step tutorial for Material Design Custom Checkbox using theme.

How to Create Material Design Custom Checkbox using theme.

Code for MainActivity.java file.

package com.android_examples.customcheckbox_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.android_examples.customcheckbox_android_examplescom.MainActivity">

    <CheckBox
        android:text="CheckBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="187dp"
        android:id="@+id/checkBox"
        android:theme="@style/CheckBoxTheme"/>

    <CheckBox
        android:text="CheckBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/checkBox"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="15dp"
        android:id="@+id/checkBox2"
        android:theme="@style/CheckBoxTheme"/>

    <TextView
        android:text="Custom CheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="48dp"
        android:id="@+id/textView"
        android:textSize="25dp"
        android:textColor="#000000"
        android:layout_above="@+id/checkBox2"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Code for styles.xml file.

<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>

    <style name="CheckBoxTheme" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">#FFC107</item>
        <item name="colorControlActivated">#9C27B0</item>
    </style>

</resources>

Screenshots:

 

Material Design Custom Checkbox using theme

Leave a Reply

Your email address will not be published. Required fields are marked *