How to show android checkbox at right side?

Question

By default android checkbox shows text at right side and checkbox at left
I want to show checkbox at right side with text at left

how do I achieve this?

Hazhir · Answer 1 · 2014-06-20T06:34:06.170

418

I think it's too late to answer this question, but actually there is a way to achieve your goal. You just need to add the following line to your checkbox:

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

You can use your customized drawable for checkbox as well.

And for a radioButton:

android:button="@null"
android:drawableRight="@android:drawable/btn_radio"

And if you want to do it programmatically:

Define a layout and name it RightCheckBox and copy the following lines :

<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
    android:text="hello"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:button="@null"
    android:drawableRight="?android:attr/listChoiceIndicatorMultiple"/>

and when you need to add it programmatically you just need to inflate it to a CheckBox and add it to the root view.

CheckBox cb = (CheckBox)((LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)).inflate(R.layout.check_right_checkbox,null);
rootView.addView(cb);

edited Jun 20 '14 at 06:34

answered Feb 24 '14 at 15:01

Hazhir

4,464
2
16
13

5

And for a checkbox, you can use `android:drawableRight="?android:attr/listChoiceIndicatorMultiple"`. I think this is the best solution for a checkbox on the right I have found so far. – Pierre-Luc Paour Feb 26 '14 at 08:05
@Pierre-LucPaour I wanted to write how to show the checkbox on right side but instead by mistake I wrote about radio-button. Now, my answer is updated and describe how to show checkbox and radiobutton on right side. Thanks for you comment. – Hazhir Feb 26 '14 at 10:09
How would you do this programmaticaly? I have to add a variable amount of CB's to a layout in a fragment and not sure how to set box on the right dynamically – JPM Jun 19 '14 at 21:46
Yes I guess I could do it that way, I couldn't find how to modify the drawableRight in code, but this works! +1 – JPM Jun 20 '14 at 14:49
8

Please note that Android 5.0 SDK will show you a warning about RTL devices. To make it go away, just add `android:drawableEnd` in addition to `android:drawableRight` (with the same value). – Quentin S. Oct 18 '14 at 08:44
Checkbox text may be not aligning to left with this solution in some device. Can use [CheckedTextView](http://developer.android.com/reference/android/widget/CheckedTextView.html) as a replacement to avoid the problem, and this link will be helpful: http://stackoverflow.com/questions/7989014/align-text-left-checkbox-right?rq=1 – cfh008 Jan 08 '15 at 06:17
6

This solution worked pretty well to solve the problem. On Android 5.+, however, while the standard widget contains its ripple drawable to a small area around the check, this modified widget allows the ripple to expand well beyond the bounds of the widget itself. If using this technique, I suggest setting the background to use a ripple drawable with a rectangular mask. – Justin Pollard Feb 03 '15 at 02:24
2

Android provides a dozen view objects, all of which can be altered to draw either an android drawable or a custom drawable. If you want the ripple effect (5.0+) on the object, simply set its background to an XML drawable which enables the ripple. The following link shows several samples view objects, CheckedTextView, CheckBox, ToggleButton, etc with the right drwable set. http://landenlabs.com/android/uicomponents/uicomponents.html#checkbox – LanDenLabs Jan 02 '16 at 23:40
1

For radiobuttons you can also use: `?android:attr/listChoiceIndicatorSingle` – donfuxx Mar 09 '16 at 17:11
By this, how to change button background? – Seyyed Mahmood Ahmadi May 31 '16 at 20:55
Another way to do it in code without making a separate layout for the checkbox. TypedValue value = new TypedValue(); // you'll probably want to use your activity as context here: getContext().getTheme().resolveAttribute(android.R.attr.listChoiceIndicatorMultiple, value, true); int resid= value.resourceId; // now set the resolved check mark resource id: fieldValue.setCompoundDrawablesWithIntrinsicBounds(0, 0, resid, 0); – Muhammad Ahmed AbuTalib Nov 01 '16 at 13:04
The drawable attribute part is straightforward. However, some explanation on why the button is set to null would be great. Thanks! – Avid Programmer May 04 '18 at 02:27
7

It shows a round ripple in the center of the text, but not on the right drawable, thus looks ugly on modern Android versions – Leo DroidCoder Jul 28 '18 at 23:55
To remove the ripple set the background color to white or whatever color you need `android:background="@color/white"` – Robin Dec 21 '21 at 08:38
It will draw a check mark in both states. To hide a check mark when `checked="false"` you should create a drawable `` (https://stackoverflow.com/questions/3192173/change-icons-of-checked-and-unchecked-for-checkbox-for-android). – CoolMind Jun 01 '22 at 12:40

Mahesh Lad · Answer 2 · 2017-06-12T09:56:13.770

170

You can do

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right|center"//or "center_vertical" for center text
android:layoutDirection="rtl"
android:text="hello" />

Following line is enough

android:layoutDirection="rtl"

edited Jun 12 '17 at 09:56

answered Jun 12 '17 at 09:50

Mahesh Lad

1,997
1
9
8

Good trick man ! do not forget the gravity : android:gravity="right|center" to get the expected mirroring effect. – Tobliug Jul 02 '18 at 15:30
5

this is not the correct way, because if your device is on a RTL language, it won’t look right. – Martin Marconcini Aug 08 '18 at 18:54
cb.setLayoutDirection(CheckBox.LAYOUT_DIRECTION_RTL); – paakjis Dec 06 '18 at 12:48
3

Need to set `android:gravity="end|center_vertical"` to make text display at left because layout starts at right now. – MainActivity Sep 12 '19 at 07:01
setting `layoutDirection="rtl"` will mess up your layout in some extend when you are using `ConstraintLayout` & need to cope with both LTR & RTL locales, in which situation you'll better adjust the layout in code. – dumbfingers Jun 23 '21 at 09:39
This has interesting side-effects when used with ConstraintLayout. Not impossible to correct, but a little surprising. You'll see when you try it! :) – SMBiggs Nov 12 '21 at 16:56
set `android:layoutDirection="@integer/flip_direction"` and then add `1` to default value resource and `0` to ldrtl value resource – Hanan Oct 21 '22 at 07:11

score 58 · Answer 3 · answered May 27 '16 at 13:21

58

You can add android:layoutDirection="rtl" but it's only available with API 17.

answered May 27 '16 at 13:21

The Berga

3,744
2
31
34

score 42 · Accepted Answer · answered Jul 01 '10 at 10:10

42

I can't think of a way with the styling, but you could just set the text of the checkbox to nothing, and put a TextView to the left of the checkbox with your desired text.

answered Jul 01 '10 at 10:10

xil3

16,305
8
63
97

i have a question about this: when you click on the layout , it should show (for a very short time) that the whole row is selected . how do you do that and simulate that it's a native effect? – android developer Apr 24 '12 at 10:52
never mind - i've set a selector to the layout and now it's ok . – android developer Apr 24 '12 at 12:03
@androiddeveloper please can you post the selector solution ? – Fouad Wahabi Oct 29 '14 at 22:15
1

@FouadWahabi You can create an xml drawable in "res/drawable" , as such: http://stackoverflow.com/a/2038086/ , and set the background of the view/layout to be this drawable file. You might need to make it clickable too. I think I also saw a Google IO lecture about it. not sure. highly recommend checking their video. – android developer Oct 29 '14 at 22:24
@androiddeveloper thanks , I know this , but how when we click the layout the checkbox is then checked ? It requires to be programmatically ? – Fouad Wahabi Oct 29 '14 at 22:30
1

@FouadWahabi Well you can extend the layout class you've chosen, and add this logic by yourself. You can go over all of the child views and toggling their state. You can use those links to help you out: https://developer.android.com/samples/CustomChoiceList/src/com.example.android.customchoicelist/CheckableLinearLayout.html , http://antoine-merle.com/blog/2013/07/17/adding-a-foreground-selector-to-a-view/ . add a clickListener, and toggle the checking, and inside "setChecked" set the state of the child views accordingly but only if they implement Checkable. – android developer Oct 30 '14 at 00:06
@FouadWahabi Anyway, if you get stuck, post a new question and I will be able to show you a full code for this. Something similar to what I've done on my app : https://play.google.com/store/apps/details?id=com.lb.app_manager – android developer Oct 30 '14 at 00:07
Do not do this. It is bad for accessibility (people with screen readers won't know what the checkbox is for, and clicking the text won't change the checkbox.) – phreakhead Jul 15 '16 at 19:09
android:layoutDirection="rtl" – Atif Mahmood Feb 16 '18 at 10:42

score 21 · Answer 5 · answered Oct 14 '19 at 07:33

21

    <android.support.v7.widget.AppCompatCheckBox
  android:id="@+id/checkBox"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="10dp"
  android:layoutDirection="rtl"
  android:text="text" />`

answered Oct 14 '19 at 07:33

kfc

567
1
5
10

1

That also makes the text right-aligned so if the checkbox view is matching the parent width, it will look weird. – David Rector Apr 14 '20 at 00:30
making width also "wrap content" making it better. – Shaleen May 23 '21 at 06:44

score 19 · Answer 6 · answered Jun 25 '15 at 08:47

Just copy this:

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your text:"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            />
    </LinearLayout>

Happy codding! :)

score 15 · Answer 7 · edited May 23 '17 at 10:31

15

Checkbox text may be not aligning to left with

android:button="@null"
android:drawableRight="@android:drawable/btn_radio"

in some device. Can use CheckedTextView as a replacement to avoid the problem,

<CheckedTextView
    ...
    android:checkMark="@android:drawable/btn_radio" />

and this link will be helpful: Align text left, checkbox right

edited May 23 '17 at 10:31

Community

1
1

answered Jan 08 '15 at 06:25

cfh008

436
5
8

That is a radio button. How about the one for the material checkbox please? – Monica Aspiras Labbao Aug 24 '16 at 02:32
1

For a checkbox use `android:checkMark="?android:attr/listChoiceIndicatorMultiple"` – Philipp Jan 02 '17 at 20:04
For a radiobutton use `android:checkMark="?android:attr/listChoiceIndicatorSingle"` – Philipp Jan 02 '17 at 20:05

score 7 · Answer 8 · edited Jun 08 '17 at 07:25

7

As suggested by @The Berga You can add android:layoutDirection="rtl" but it's only available with API 17.
for dynamic implementation, here it goes

chkBox.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);

edited Jun 08 '17 at 07:25

duggu

37,851
12
116
113

answered Jan 16 '17 at 15:33

Sri Kanth

311
4
18

score 5 · Answer 9 · answered Feb 09 '16 at 10:00

5

You can use checkedTextView instead.

http://developer.android.com/reference/android/widget/CheckedTextView.html

answered Feb 09 '16 at 10:00

Abhigyan

641
10
25

score 3 · Answer 10 · answered Oct 17 '14 at 15:10

3

furthermore from Hazhir imput, for this issue is necessary inject that property in the checkbox xml configuration android:paddingLeft="0dp", this is for avoid the empty space at the checkbox left side.

answered Oct 17 '14 at 15:10

zeusboy

151
2
4

score 3 · Answer 11 · answered Jul 29 '17 at 07:49

Adding another answer to this question that uses CheckedTextView If anyone is trying to do it programatically. It also has the option of using custom images for checkbox. And can be done in a single View

final CheckedTextView checkBox = new CheckedTextView(getApplicationContext());
    checkBox.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
    checkBox.setId(1);
    checkBox.setCheckMarkDrawable(android.R.drawable.checkbox_off_background);
    checkBox.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (checkBox.isChecked()){
                checkBox.setChecked(false);
                checkBox.setCheckMarkDrawable(android.R.drawable.checkbox_off_background);
            }else{
                checkBox.setChecked(true);
                checkBox.setCheckMarkDrawable(android.R.drawable.checkbox_on_background);
            }
        }
    });
    checkBox.setTextColor(Color.BLACK);
    checkBox.setGravity(Gravity.LEFT);
    checkBox.setText("hi");

From XML if you want to initiate -

<CheckedTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkMark="@android:drawable/checkbox_off_background"
        android:checked="false"
        android:text="Hi from xml"/>

score 1 · Answer 12 · answered Feb 14 '17 at 13:16

1

If it is not mandatory to use a CheckBox you could just use a Switch instead. A Switch shows the text on the left side by default.

answered Feb 14 '17 at 13:16

Oliver Kranz

3,741
2
26
31

LanDenLabs · Answer 13 · 2016-01-03T03:39:09.357

The following link demonstrates how to render seveveral Standard Android view objects with an animated checkbox on the right by setting the right drawable.

Set the background to get a ripple effect.

[link to website with example checkbox on right and left side.][1] http://landenlabs.com/android/uicomponents/uicomponents.html#checkbox

         <Button
            android:id="@+id/p2Button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="Button"
            android:textAllCaps="false"

            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/p2Button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="AppCompatButton"
            android:textAllCaps="false"

            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <TextView
            android:id="@+id/p2TextView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:hapticFeedbackEnabled="true"

            android:text="TextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/p2TextView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:background="@drawable/transparent_ripple"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:hapticFeedbackEnabled="true"

            android:text="AppCompatTextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/white" />

        <CheckBox
            android:id="@+id/p2Checkbox1"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:button="@null"
            android:checked="true"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="CheckBox"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatCheckBox
            android:id="@+id/p2Checkbox2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:button="@null"
            android:checked="true"
            android:drawableRight="@drawable/checkline"
            android:gravity="left|center_vertical"
            android:text="AppCompatCheckBox"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <android.support.v7.widget.AppCompatCheckedTextView
            android:id="@+id/p2Checkbox3"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checkMark="@drawable/checkline"
            android:checked="true"
            android:gravity="left|center_vertical"
            android:text="AppCompatCheckedTextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <!--  android:checkMark="?android:attr/listChoiceIndicatorMultiple" -->
        <CheckedTextView
            android:id="@+id/p2Checkbox4"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checkMark="@drawable/checkline"
            android:checked="true"
            android:gravity="left|center_vertical"
            android:text="CheckedTextView"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <CheckBox
            android:id="@+id/p2Checkbox5"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checked="true"
            android:gravity="center_vertical|end"
            android:text="CheckBox"
            android:textColor="@android:color/white"
            android:textSize="@dimen/buttonTextSize" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/white" />


        <ToggleButton
            android:id="@+id/p2ToggleButton1"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checked="true"
            android:drawableRight="@drawable/checkline"
            android:gravity="center_vertical|left"
            android:textAllCaps="false"
            android:textColor="@android:color/white"

            android:textOff="ToggleButtonOff"

            android:textOn="ToggleButtonOn"
            android:textSize="@dimen/buttonTextSize" />

        <ToggleButton
            android:id="@+id/p2ToggleButton2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/buttonHeight"
            android:background="@drawable/transparent_ripple"
            android:checked="true"
            android:drawableRight="@drawable/btn_check_material_anim"
            android:gravity="center_vertical|left"
            android:textAllCaps="false"

            android:textColor="@android:color/white"
            android:textOff="ToggleBtnnAnimOff"
            android:textOn="ToggleBtnnAnimOn"
            android:textSize="@dimen/buttonTextSize" />

Sample checkline.xml (in drawable, see link for animated version in drawable-v21)

Sample transparent_ripple.xml (in drawable-v21)

<!-- Limit ripple to view object, can also use shape such as oval -->
<item android:id="@android:id/mask" android:drawable="@android:color/white" />

<item>
    <selector xmlns:android="http://schemas.android.com/apk/res/android"
        android:enterFadeDuration="200"
        android:exitFadeDuration="200">

        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <solid android:color="#80c0c000" />
            </shape>
        </item>
    </selector>
</item>

Sample transparent_ripple.xml (in drawable, highlight only no ripple available

<item android:state_pressed="true">
    <shape android:shape="rectangle">
        <solid android:color="#80c0c000" />
    </shape>
</item>
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

Tejas Kanani · Answer 14 · 2022-09-21T12:58:05.343

0

You can use this also,

<CheckBox
       android:layout_width="match_parent"     
       android:layout_height="wrap_content"
       android:layoutDirection="rtl"
       android:drawablePadding="@dimen/padding_5"
       android:drawableEnd="@drawable/ic_english"
       android:button="@drawable/language_selector"/>

edited Sep 21 '22 at 12:58

answered Mar 16 '20 at 09:01

Tejas Kanani

21
4

It's always extra credit to include a bit of details or a reference for further studying. Makes your answers more useful – mw509 Mar 16 '20 at 09:33

score 0 · Answer 15 · answered Sep 19 '22 at 04:15

The simplest solution that I use:

checkBox.setLayoutDirection(getResources().getConfiguration().getLayoutDirection() == View.LAYOUT_DIRECTION_LTR ? View.LAYOUT_DIRECTION_RTL : View.LAYOUT_DIRECTION_LTR);

Tip:

If you want to make CheckBox on the right side so it is better for the text to be from left to right such as English, Spanish, and Italian.

Also If you want to make CheckBox on the left side so it is better for the text to be from right to left such as Arabic, Hebrew, and Farsi.

score -1 · Answer 16 · answered Jul 27 '17 at 23:02

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/location_permissions"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@android:color/black" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <CheckBox
                android:id="@+id/location_permission_checkbox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="8dp"
                android:onClick="onLocationPermissionClicked" />

        </RelativeLayout>
    </LinearLayout>

How to show android checkbox at right side?

16 Answers16

Linked

Related