How to remove unwanted spaces at the right of CheckBox?

Question

I am working on a custom list view. I want to show a CheckBox at the custom view. There is no text for the CheckBox. I found it always have some spaces at the right of the CheckBox.

Here is my layout xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:background="#fa9654"
android:paddingTop="65dp" android:paddingBottom="65dp">



<TextView android:id="@+id/bus_route_list_item_num"
    android:layout_height="wrap_content" android:layout_width="0dip"
    android:gravity="center" android:layout_gravity="center_vertical|center_horizontal"
    android:layout_weight="0.15"></TextView>

<TextView android:id="@+id/bus_route_list_item_station"
    android:layout_height="wrap_content" android:layout_width="0dip"
    android:gravity="left" android:layout_gravity="center_vertical|center_horizontal"
    android:layout_weight=".5"></TextView>


<TextView android:id="@+id/bus_route_list_item_fee"
    android:layout_height="wrap_content" android:layout_width="0dip"
    android:gravity="center" android:layout_gravity="center_vertical|center_horizontal"
    android:layout_weight=".15"></TextView>


<CheckBox android:id="@+id/bus_route_list_item_reminder" android:layout_height="wrap_content" 
    android:layout_width="0dip" android:layout_weight=".20" android:gravity="center" 
    android:layout_gravity="center" android:paddingRight="0dp" android:paddingLeft="0dp" 
    android:paddingTop="0dp" android:paddingBottom="0dp" android:background="#0066ff" 
    android:text=""
/>

</LinearLayout>

The result looks like:

Checkbox result

As you can see there are some space at the right of the checkbox. What I want is put the checkbox at the middle of the blue area.

Is it possible to remove the unwanted space? thanks

score 48 · Answer 1 · answered Nov 23 '20 at 11:47

48

by default, the Checkbox has minWidth and minHeight value

you can set its value to 0

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="0dp"
    android:minHeight="0dp" />

The result will be like that without any extra spaces

answered Nov 23 '20 at 11:47

Anwar SE

743
2
7
14

What is the parent of AppTheme you use in the app? – Anwar SE Dec 03 '20 at 23:19
MaterialComponent, it is the default theme since Android Studio 4.1. – Sam Chen Dec 04 '20 at 03:49
Worked great for me. My App theme extends from "Theme.MaterialComponents.NoActionBar" – Mark Lapasa Dec 20 '20 at 15:12

inazaruk · Accepted Answer · 2011-06-15T14:07:19.037

19

You can wrap CheckBox in LinearLayout and then use android:gravity="center" on that layout.

 <LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="0dip" 
    android:layout_weight=".20"              
    android:background="#ff0000" 
    android:gravity="center">

    <CheckBox android:id="@+id/bus_route_list_item_reminder" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content"                     
    />

</LinearLayout>

As another alternative, you can use RelativeLayout. This would greatly simplify you layout and you will be able to get rid of layout_weight.

edited Jun 15 '11 at 14:07

answered Jun 15 '11 at 14:00

inazaruk

74,247
24
188
156

that doens't work in android 4.1.2. I think it's some bug. Better not use CheckBox – Malachiasz Apr 04 '14 at 14:39
1

For me not working , I am getting space right side of the check box, How to resolve this – rams Oct 08 '19 at 10:01
@rams This answer worked perfectly https://stackoverflow.com/a/64967815/8853657 – Eton Otieno Jun 29 '21 at 14:30

Pavlus · Answer 3 · 2017-06-16T20:20:16.860

12

Neither of previous solutions worked for me, but I've tried applying a translation to the content and it worked pretty well, no need in additional layout hierarchy, nor implementing own views:

                <CheckBox
                ...
                android:text="@null"
                android:translationX="12dp" />

Also, it keeps bounds of the element in proper place, so touch area is not shifted.

edited Jun 16 '17 at 20:20

answered Jun 12 '17 at 13:19

Pavlus

1,651
1
13
24

For me not working, Getting space right side of the check box – rams Oct 08 '19 at 10:03
@rams probably you have RTL enabled? in such case you probably would need to use `-12dp` – Pavlus Oct 15 '19 at 19:02

Mahozad · Answer 4 · 2019-01-29T05:29:22.543

7

The translationX seems to work. But it causes problem if you want to support RTL layouts. Another solution would be to set the width of checkbox to a fixed length (e.g. 26dp):

<CheckBox
    android:layout_width="26dp"
    android:layout_height="wrap_content"
    android:text="@null" />

edited Jan 29 '19 at 05:29

answered Jan 12 '19 at 21:04

Mahozad

18,032
13
118
133

score 4 · Answer 5 · answered Dec 04 '13 at 11:52

To remove extra space at right of the image (when there is no text) extend CheckBox class and override getSuggestedMinimumWidth() method in order to return there image width. Complete solution:

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.CheckBox;

public class CheckBoxWithoutText extends CheckBox
{
    private Drawable buttonDrawable;

    public CheckBoxWithoutText(Context context)
    {
        super(context);
    }

    public CheckBoxWithoutText(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    @Override
    protected int getSuggestedMinimumWidth()
    {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
        {
            return getCompoundPaddingLeft() + getCompoundPaddingRight();
        }
        else
        {
            return buttonDrawable == null ? 0 : buttonDrawable.getIntrinsicWidth();
        }
    }

    @Override
    public void setButtonDrawable(Drawable d)
    {
        buttonDrawable = d;
        super.setButtonDrawable(d);
    }
}

score 1 · Answer 6 · answered Jun 15 '11 at 14:01

1

I would use a relative layout here. Aligning checkbox on parent right...

Regards, Stéphane

answered Jun 15 '11 at 14:01

Snicolas

37,840
15
114
173

How to remove unwanted spaces at the right of CheckBox?

6 Answers6

Linked