CODEWITHSUNDEEP
androidandroid-layout
Kris B
Kris B

Reputation: 3578

Align text left, checkbox right

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.

Upvotes: 50

Views: 89909

Answers (13)

Ojonugwa Jude Ochalifu
Ojonugwa Jude Ochalifu

Reputation: 27237

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

Upvotes: 1

Swetha Reddy
Swetha Reddy

Reputation: 61

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

Upvotes: 3

Sagar Devanga
Sagar Devanga

Reputation: 2819

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

Upvotes: 6

DolDurma
DolDurma

Reputation: 17289

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 enter image description here enter image description here enter image description here enter image description here

Upvotes: 13

Homer Wang
Homer Wang

Reputation: 590

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

originally it's "wrap_content"

Upvotes: 0

cfh008
cfh008

Reputation: 456

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.

Upvotes: 5

MSaudi
MSaudi

Reputation: 4652

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

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

Upvotes: 48

Amir
Amir

Reputation: 8929

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>

Upvotes: 0

dardan.g
dardan.g

Reputation: 699

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

Upvotes: 0

Oibaf it
Oibaf it

Reputation: 1952

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>

Upvotes: 12

Randy
Randy

Reputation: 1136

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

Upvotes: 2

user658042
user658042

Reputation:

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.

Upvotes: 30

Alex Gilleran
Alex Gilleran

Reputation: 598

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.

Upvotes: 0

Related Questions