Home » Android » Removing the 'box' from the checkbox in Android

Removing the 'box' from the checkbox in Android

Posted by: admin May 14, 2020 Leave a comment

Questions:

I am an entry level software developer, and have found tons of great answers from this site, but I can’t seem to find how to hide the ‘box’ of a checkbox in Android. I just want the check mark to show, when a user selects an option. Here are some of the most recent things I have tried.

chkSortOrder.setBackgroundResource(android.R.color.transparent);
chkSortOrder.setBackgroundResource(android.R.drawable.checkbox_off_background);

Both of these still show the box.

How to&Answers:

put the following attribute in your checkbox tag in XML.

android:button="@android:color/transparent"

Answer:

It’s quite late but in any case, if it helps anyone. If you wanna set custom background to RadioButton programmatically, then you can set it like this,

checkbox.setButtonDrawable(null);
checkbox.setBackgroundResource(R.drawable.your_custom_drawable);

Answer:

I found this error when updating from androidx.appcompat:appcompat:1.0.0 to 1.1.0.

None of the other answers were useful to me as setting button attribute to @null or @android:color/transparent doesn’t work on Android API Level 20 or lower.

What I did is to change my CheckBox to ToggleButton and set textOn and textOff attributes to an empty string

<ToggleButton
    ...
    android:background="@drawable/custom_selector"
    android:textOff=""
    android:textOn="" />

This way I could update to androidx appCompat 1.1.0

Answer:

You can also toggle between a CheckBox and a TextView. Just make one view visible and another one hidden. This also makes sense because the CheckBox contains paddings around the check mark.

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >

            <CheckBox
                android:id="@+id/checkbox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:checkMark="@null"
                android:checked="true"
                android:gravity="center_vertical"
                android:paddingStart="3dp"
                android:paddingLeft="3dp"
                android:text="My text"
                android:textColor="@color/black"
                android:textSize="12sp"
                />

            <TextView
                android:id="@+id/label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="My text"
                android:textColor="@color/black"
                android:textSize="12sp"
                />

        </FrameLayout>

Answer:

It’s 2020! and many things have changed. But if you are struggling with this like me and tried everything here (and other solutions) with no luck, then try this one too. What I’ve got with other solutions came to this (Emulator, API 16):
enter image description here

Weird behavior! Two drawables, right is my custom box and default one on the left. And then accidentally i added this:

app:buttonCompat="@null"

and the second one is gone finally!
Here is the complete definition:

  <CheckBox
        android:id="@+id/cb_fs_ExactSearch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:gravity="center_vertical"
        android:padding="5dp"
        android:text="@string/fs_options_exact"
        android:textColor="@color/textPrimary"
        android:textSize="@dimen/textSmall"
        app:buttonCompat="@null"
        app:drawableRightCompat="@drawable/drw_checkbox" />

You need to set both button and buttonCompat to null.