Centering CheckBox Views

问题

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

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>

回答1:

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.

回答2:

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

回答3:

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>

回答4:

Try it in style

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

I hope it will work.. thanks..

回答5:

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

回答6:

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

回答7:

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 :

来源：https://stackoverflow.com/questions/16698360/centering-checkbox-views

标签

android

android-styles