How to show android checkbox at right side?
AndroidLayoutCheckboxAndroid Problem Overview
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?
Android Solutions
Solution 1 - Android
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);
Solution 2 - Android
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"
Solution 3 - Android
You can add android:layoutDirection="rtl"
but it's only available with API 17.
Solution 4 - Android
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.
Solution 5 - Android
<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" />`
Solution 6 - Android
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! :)
Solution 7 - Android
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: https://stackoverflow.com/questions/7989014/align-text-left-checkbox-right?rq=1
Solution 8 - Android
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);
Solution 9 - Android
You can use checkedTextView instead.
http://developer.android.com/reference/android/widget/CheckedTextView.html
Solution 10 - Android
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.
Solution 11 - Android
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"/>
Solution 12 - Android
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.
Solution 13 - Android
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)
http://schemas.android.com/apk/res/android">
-
-
-
-
-
-
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>
Solution 14 - Android
You can use this also,
<CheckBox
android:layout_width="match_parent"
android:layout_height="@dimen/button_height_35"
android:text="@string/english"
android:checked="true"
android:paddingEnd="@dimen/padding_5"
android:paddingStart="@dimen/padding_5"
android:layoutDirection="rtl"
android:drawablePadding="@dimen/padding_5"
android:drawableEnd="@drawable/ic_english"
style="@style/TextStyleSemiBold"
android:textSize="@dimen/text_15"
android:button="@drawable/language_selector"/>
Solution 15 - Android
<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>