Centering CheckBox Views

Question

If you're interested in RadioButtons in addition to (or instead of) CheckBoxes, see this question instead.

Despite the presence of

<item name="android:layout_gravity">center_horizontal</item>

in the style file, the two checkboxes are not centered, but appear "left-justified".

non-centered

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/MyLL"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <CheckBox
        android:id="@+id/cb1"
        style="@style/CB_style" />

    <CheckBox
        android:id="@+id/cb2"
        style="@style/CB_style" />

</LinearLayout>

res/values/styles.xml

<style name="CB_style" parent="@android:style/TextAppearance.Medium">
    <item name="android:layout_gravity">center_horizontal</item>
    <item name="android:layout_weight">1</item>
    <item name="android:gravity">center</item>
    <item name="android:checked">false</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
</style>

bendyna · Answer 1 · 2013-05-22T19:31:18.853

You have android:layout_weight = 1. So your checkboxes fill all width of screen. Remove android:layout_weight from style and add margin between checkboxes.

Gravity in Checkbox don't affect the inner tick button, only text.

EDIT

Ok, try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/MyLL"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="0dp"
        android:layout_height="5dp"
        android:layout_weight="1"/>

    <CheckBox
        android:id="@+id/cb1"
        style="@style/CB_style" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="5dp"
        android:layout_weight="1"/>

    <CheckBox
        android:id="@+id/cb2"
        style="@style/CB_style" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="5dp"
        android:layout_weight="1"/>

</LinearLayout>

And remove layout_weight from style.

Another way is create custom checkbox. But I think it's too complicated for this problem.

Yes, but I would like the LinearLayout to occupy the width of the screen. If I remove android:layout_weight=1, the two checkboxes collapse to the left of the screen. They do become centered, but that's only because they have wrap_content set. — Calaf, May 22 '13 at 18:00

score 0 · Answer 2 · answered May 22 '13 at 20:45

Here's something that may help:

android:gravity vs android:layout_gravity

android:gravity is usually internal, usually asking the view itself what to do with the pixels it has
android:layout_gravity is usually external, usually asking the parent ViewGroup (LinearLayout/RelativeLayout/FrameLayout) how to position the view with extra pixels that the view is not using

If you are using a view with wrap_content, you probably want to use layout_gravity. If you are using a view with match_parent, you probably want to try gravity.

Sometimes wrapping another ViewGroup around a troublesome View can help with positioning. Views and ViewGroups go through an intricate "screen space" negotiating phase, and different Views (Buttons/TextView/ImageView/etc) and ViewGroups (LinearLayout/RelativeLayout/TableLayout/etc) have different rules and negotiating powers

This is why sometimes pairing a troublesome View with another parent like a FrameLayout or LinearLayout can make it behave all of the sudden

score 0 · Answer 3 · answered Jun 17 '16 at 05:45

This is a little messy but it works, and yes it works as well for 3 or more checkbox inputs:

 <LinearLayout
                        android:padding="0dip"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:hint="name"
                        android:layout_height="40dip"
                        android:textAlignment="center" android:layout_gravity="center"
                        android:orientation="horizontal"
                        >
                        <TextView
                            android:layout_width="0dip"
                            android:layout_height="1dip" android:layout_weight="1" android:text=" " />
                        <CheckBox
                            android:id="@+id/chk1"
                            android:layout_width="wrap_content"
                            android:layout_height="fill_parent"
                            android:scaleX="1.5" android:scaleY="1.5"
                            >
                        </CheckBox>
                        <TextView
                            android:layout_width="0dip"
                            android:layout_height="1dip" android:layout_weight="1" android:text=" " />
                        <CheckBox
                            android:id="@+id/chk2"
                            android:layout_width="wrap_content"
                            android:layout_height="fill_parent"
                            android:scaleX="1.5" android:scaleY="1.5"
                           >
                        </CheckBox>
                        <TextView
                            android:layout_width="0dip"
                            android:layout_height="1dip" android:layout_weight="1" android:text=" " />                            
                    </LinearLayout>

score 0 · Answer 4 · answered Jun 17 '16 at 06:11

0

Try it in style

 <item name="android:layout_width">0dp</item>

I hope it will work.. thanks..

answered Jun 17 '16 at 06:11

Kush

1,080
11
15

score 0 · Answer 5 · answered Aug 27 '17 at 17:34

<style name="TextlessCheckBox" parent="android:Widget.Material.CompoundButton.CheckBox">
    <item name="android:button">@null</item>
    <item name="android:foreground">?android:listChoiceIndicatorMultiple</item>
    <item name="android:foregroundGravity">center</item>
</style>

longi · Answer 6 · 2013-05-22T19:03:13.760

-1

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/MyLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="#ff0000"
    android:gravity="center" >
    <CheckBox
        android:id="@+id/cb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.5"
    android:background="#00FF00"
    android:gravity="center" >
<CheckBox
    android:id="@+id/cb2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
 </LinearLayout>

ok, last try for today ;) you should post a picture next time, HOW it should look... well, now you ll have your LinearLayout divided into two similar wide part (red & green), and in every block your checkbox is in the center...did i got it right this time?!

edited May 22 '13 at 19:03

answered May 22 '13 at 17:50

longi

11,104
10
55
89

Removing the two gravity lines in the style file and adding the gravity you suggest to the LinearLayout does not work. Does it work on your side? You don't need a device. Eclipse shows the problem. – Calaf May 22 '13 at 18:01
i updated my answer... your problem is the layout weight 1, where you tell that your element should take all the space it has (or half of it, if you define two of them...) – longi May 22 '13 at 18:09
But I **do** want the LinearLayout to take all the space it has. I also want the two checkboxes to split that space equally (hence 1,1). The solution you suggest makes the two checkboxes bundle together, this time in the center. – Calaf May 22 '13 at 18:28
You got it. Only I have a couple of issues with this solution. Are the two extra LinearLayouts necessary? If I add a LinearLayout for every widget that I want centered, I am nearly doubling the total number of nodes in my XML file. The second issue is that I would like to do exactly the same for a RadioGroup that contains many RadioButtons. In that case it is no longer possible (IIUC) to squeeze a LinearLayout between the RadioGroup and the buttons. – Calaf May 22 '13 at 19:13
Well, there are many ways to create UIs.. But I guess you should check out the GridLayout. This will fit your need I guess. http://developer.android.com/reference/android/widget/GridLayout.html – longi May 22 '13 at 19:23

score -1 · Answer 7 · answered Jun 17 '16 at 07:37

Just add this to your LinearLayout :

android:gravity="center_horizontal"

This line specifies that anything inside this layout will be in the center. The Full layout code :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">


    <CheckBox
        android:id="@+id/cb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox ONE"
        />

    <CheckBox
        android:id="@+id/cb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox TWO" />


</LinearLayout>

Here is the output i got :

Centering CheckBox Views

7 Answers7

Linked