Align text left, checkbox right

Question

I'm trying to create a layout for a ListView, with a checkbox to the right and some text to the left. The checkbox should be aligned all the way to the right and the TextView aligned all the way to left of the row, eg:

 ------------------------
 text            checkbox
 ------------------------
 text            checkbox
 ------------------------
 text            checkbox
 ------------------------

This is what I have so far:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:orientation="vertical"
      android:paddingLeft="5dip"
      android:paddingRight="5dip"
      android:paddingTop="8dip"
     android:paddingBottom="8dip"
>

<TextView  
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="left" 
/>

<CheckBox 
    android:id="@+id/chekcbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="right" 
 /> 

 </RelativeLayout>

However, what actually renders is the TextBox is overlaying the checkbox, to the left of the row.

possible duplicate of [How to show android checkbox at right side?](http://stackoverflow.com/questions/3156781/how-to-show-android-checkbox-at-right-side) — Rishabh Srivastava, Nov 27 '14 at 07:58

score 48 · Answer 1 · answered Aug 09 '14 at 03:29

48

And to get the checkbox's box to the right , in check box attributes

android:button="@null"
android:drawableRight="?android:attr/listChoiceIndicatorMultiple"

answered Aug 09 '14 at 03:29

MSaudi

4,442
2
40
65

1

You sir, just saved my life. I've been struggling to find the default checkbox image and i was about to get the appcompat. +1 for '?' usage. – Barışcan Kayaoğlu Dec 19 '14 at 18:17
3

So this puts the `CheckBox` on the right side but the `AppCompat` widget tinting using the `colorAccent` doesn't work when you have the property `android:button="@null"` . How can you get widget tinting with a `CheckBox` that is on the right side? – Etienne Lawlor Jan 16 '15 at 05:00
best answer i got – icgoogo Feb 08 '21 at 01:16

score 30 · Accepted Answer · 2011-11-03T00:50:59.463

30

Since you are already using a RelativeLayout, make use of it's attributes:

Remove android:gravity from the children and replace them with android:layout_alignParentLeft="true" for the TextView and android:layout_alignParentRight="true" for the CheckBox.

That positions the children relative to the parents borders. You may also want to add android:layout_centerVertical="true" to each child to center the two vertical within each list item.

For further options and attributes see the documentation.

edited Nov 03 '11 at 00:50

answered Nov 03 '11 at 00:44

it's better to add android:layout_marginRight="36dp" to the TextView, if your text is too long, it will override the checkbox – Hiep Nov 18 '12 at 16:54
1

Hi, what if I'm using a Linear Layout!! Can I still achieve, the checkbox compound button in right whilst the text in the left?? – Shail Adi Apr 23 '13 at 05:22

DolDurma · Answer 3 · 2017-08-10T08:40:39.947

for first time you must set button to @null

android:button="@null"

if you want to onl move android checkbox to right use :

android:drawableRight="?android:attr/listChoiceIndicatorMultiple"

otherwise if you like to have custom image for checkbox use:

android:drawableRight="@drawable/selector_check_box"

and for set gravity to right :

android:gravity="right|center_vertical"

full action for use customize checkbox:

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="false" android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/_ics_btn_check_on" />
    <item android:state_window_focused="false" android:state_enabled="true" android:state_checked="false" android:drawable="@drawable/_ics_btn_check_off" />
    <item android:state_enabled="true" android:state_checked="true" android:state_pressed="true" android:drawable="@drawable/_ics_btn_check_on_pressed" />
    <item android:state_enabled="true" android:state_checked="false" android:state_pressed="true" android:drawable="@drawable/_ics_btn_check_off_pressed" />
    <item android:state_enabled="true" android:state_checked="false" android:drawable="@drawable/_ics_btn_check_off" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/_ics_btn_check_on" />
    <item android:state_window_focused="false" android:state_checked="true" android:drawable="@drawable/_ics_btn_check_on_disabled" />
    <item android:state_window_focused="false" android:state_checked="false" android:drawable="@drawable/_ics_btn_check_off_disabled" />
    <item android:state_checked="false" android:drawable="@drawable/_ics_btn_check_off_disabled" />
    <item android:state_checked="true" android:drawable="@drawable/_ics_btn_check_on_disabled" />
</selector>

images :

enter image description here

score 12 · Answer 4 · answered Sep 15 '12 at 14:53

12

My solution in this case is to use:

<CheckBox
...
    android:button="@null"
    android:drawableRight="@drawable/my_check"
...
/>

where my_radio could be for example you custom selector! Example of selector could be:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/check_checked" />
    <item android:state_checked="false" android:drawable="@drawable/check_unchecked" />
</selector>

answered Sep 15 '12 at 14:53

Oibaf it

1,842
16
9

So this puts the `CheckBox` on the right side but the `AppCompat` widget tinting using the `colorAccent` doesn't work when you have the property `android:button="@null"` . How can you get widget tinting with a `CheckBox` that is on the right side? – Etienne Lawlor Jan 16 '15 at 05:01

score 6 · Answer 5 · answered Mar 09 '18 at 13:23

6

Use this as your LIST / RECYCLER ITEM. The below 2 lines are the key.

android:textDirection="ltr" android:layoutDirection="rtl"

<CheckBox
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:textDirection="ltr"
            android:layoutDirection="rtl"
            />

answered Mar 09 '18 at 13:23

Sagar Devanga

2,815
27
30

What happens to the view if Locale is changed to RTL? – nitinkumarp May 10 '19 at 10:21
That's a very valid point, as of now I didn't check that would be great if you check and update the answer if you have a finding. – Sagar Devanga May 14 '19 at 06:43
I have used CheckedTextView for my purpose – nitinkumarp May 15 '19 at 05:57

score 5 · Answer 6 · edited May 23 '17 at 11:47

5

At the basis of Oibaf it's or MSaudi's solution

android:button="@null"
android:drawableRight="?android:attr/listChoiceIndicatorMultiple"

to add

android:paddingLeft="0dp"

to avoid the empty space at the checkbox left side in some device. The source link:

How to show android checkbox at right side?

answered by zeusboy.

edited May 23 '17 at 11:47

Community

1
1

answered Jan 08 '15 at 06:58

cfh008

436
5
8

So this puts the `CheckBox` on the right side but the `AppCompat` widget tinting using the `colorAccent` doesn't work when you have the property `android:button="@null"` . How can you get widget tinting with a `CheckBox` that is on the right side? – Etienne Lawlor Jan 16 '15 at 05:01
to toobsco42: Sorry, i don't encounter the scene you mentioned. Maybe you could create a question with the detail of your layout file and code, and somebody will give a solution. – cfh008 Jan 22 '15 at 00:26

score 3 · Answer 7 · answered Sep 20 '18 at 11:16

You can achieve this by adding layoutDirection to "rtl"

<CheckBox
            android:id="@+id/checkbox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right|center"
            android:layoutDirection="rtl"
            android:text="@string/declare_info_correct" />

Randy · Answer 8 · 2012-07-29T23:35:31.427

After trying to do this myself, I finally did it. You just need to put a TextView and a CheckBox in a horizontal layout, and put the gravity on the layout to the right.

Here's the code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="horizontal"
          android:gravity="right"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
        >
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/LabelText"
        />
<CheckBox
        android:id="@+id/ChecKBox_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

EDIT: I just noticed that you wanted text all the way to the left side of the screen. this will put the check box all the way to the right, and the text right next to it on the left side of the check box.

Like this:

------------------------
           text checkbox
------------------------
           text checkbox
------------------------
           text checkbox
------------------------

score 1 · Answer 9 · answered Nov 27 '18 at 14:03

1

Using match_parent for layout_width and android:layoutDirection="rtl" are enough:

<android.support.v7.widget.AppCompatCheckBox
        android:id="@+id/taxDevRadioButton"
        android:layout_width="match_parent"
        android:layoutDirection="rtl"
        android:layout_height="wrap_content"
        android:layout_below="@+id/divider2"
        android:layout_marginTop="10dp"
        android:text="ELIGIBLE FOR TAX" />

answered Nov 27 '18 at 14:03

Ojonugwa Jude Ochalifu

26,627
26
120
132

1

`android:layoutDirection="rtl"` worked, thanks! – biinui Aug 04 '21 at 12:53

score 0 · Answer 10 · answered Jun 04 '13 at 20:40

Use android:gravity="start

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Has Diploma:"
        android:textSize="15dp"
        android:id="@+id/checkBox_HasDiploma"
        android:gravity="start"/>

score 0 · Answer 11 · answered Feb 24 '14 at 11:00

You also remove android:orientation="vertical" since Relative layout does not support this attribute. It is attribute of Linear Layout.

You can try it

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingBottom="8dip"
        android:paddingLeft="5dip"
        android:paddingRight="5dip"
        android:paddingTop="8dip" >

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="check"
             />

        <CheckBox
            android:id="@+id/chekcbox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true" />
    </LinearLayout>

score 0 · Answer 12 · answered Feb 28 '15 at 10:48

0

Just set the switch: Layout Parameters -> Width to "match_parent"

originally it's "wrap_content"

answered Feb 28 '15 at 10:48

Homer Wang

531
6
8

score 0 · Answer 13 · answered Nov 03 '11 at 00:46

If you're going to use a relativelayout you might want to consider using the less annoying relativelayout attributes, alignParentLeft and alignParentRight, like so:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:paddingTop="8dip"
    android:paddingBottom="8dip"
>

<TextView  
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:alignParentLeft="true"
/>

<CheckBox 
    android:id="@+id/chekcbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:alignParentRight="true"
/> 

</RelativeLayout>

Just watch out for elements getting on top of other elements.

Align text left, checkbox right

13 Answers13

Linked