How to have icon in center inside a Checkbox in Android

Question

How can I have an icon in the center of the checkbox. The checkbox has a width and height of 48x48 and the icon is having width and height of 24x24

Image for reference ( the icon is attached on the left side of checkbox, but I want it to be in center )

I have already checked out answers here, and they don't seem to work for me. Does anybody has a better approach which I can apply here

XML code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/tags_dialog_tag_item"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:orientation="horizontal"
    android:paddingBottom="5dp"
    android:paddingStart="8dp"
    android:paddingEnd="8dp">

    <ImageButton
        android:id="@+id/id_expand_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_chevron_right_black"
        android:clickable="false" />

    <TextView
        android:id="@+id/tags_dialog_tag_item_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingStart="6dp"
        android:textSize="16sp"
        tools:text="Items Text" />

    <com.myapp.ui.CheckBoxStates
        android:id="@+id/tags_dialog_tag_item_checkbox"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:clickable="false"
        app:cycle_checked_to_indeterminate="false"
        app:cycle_indeterminate_to_checked="false"/>
</LinearLayout>

Mahmoud Tharwat · Answer 1 · 2022-08-19T15:08:11.027

First Solution

1- in your build.gradle file implement

implementation 'com.google.android.material:material:1.6.1'

2- Use MaterialCheckBox in your XML file

by adding

<com.google.android.material.checkbox.MaterialCheckBox
    android:id="@+id/tags_dialog_tag_item_checkbox"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:clickable="false"
    app:cycle_checked_to_indeterminate="false"
    app:cycle_indeterminate_to_checked="false"/>

instead of

<com.myapp.ui.CheckBoxStates
    android:id="@+id/tags_dialog_tag_item_checkbox"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:clickable="false"
    app:cycle_checked_to_indeterminate="false"
    app:cycle_indeterminate_to_checked="false"/>

OR

you can inheritance from MaterialCheckBox class to make your own Custom CheckBox View

Second solution

Use a new LinearLayout and put your CheckBox inside it but make LinearLayout with (48dp height and width) and gravity = "center" and make CheckBox with (wrap_content height and width)

your code should look like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/tags_dialog_tag_item"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:orientation="horizontal"
    android:paddingBottom="5dp"
    android:paddingStart="8dp"
    android:paddingEnd="8dp">

    <ImageButton
        android:id="@+id/id_expand_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_chevron_right_black"
        android:clickable="false" />

    <TextView
        android:id="@+id/tags_dialog_tag_item_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingStart="6dp"
        android:textSize="16sp"
        tools:text="Items Text" />


    <LinearLayout
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:gravity="center">

        <com.myapp.ui.CheckBoxStates
            android:id="@+id/tags_dialog_tag_item_checkbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false"
            app:cycle_checked_to_indeterminate="false"
            app:cycle_indeterminate_to_checked="false"/>


    </LinearLayout>

    
</LinearLayout>

This increases the linear layout width and height to 48x48 but the checkbox remains 24x24 and so is the clickable region because inside ` — oyeraghib, Aug 19 '22 at 14:08
I added another solution to my answer as the "First Solution", check it now and mark the answer if that is what are you looking for — Mahmoud Tharwat, Aug 19 '22 at 15:10

How to have icon in center inside a Checkbox in Android

1 Answers1