¿Cómo mostrar la casilla de verificación de Android en el lado derecho?

146

De forma predeterminada, la casilla de verificación de Android muestra el texto en el lado derecho y la casilla de verificación a la izquierda
Quiero mostrar la casilla de verificación en el lado derecho con el texto a la izquierda

¿Cómo logro esto?

android layout checkbox UMAR-MOBITSOLUTIONS
fuente

Respuestas:

41

No puedo pensar en una manera con el estilo, pero podría establecer el texto de la casilla de verificación en nada y colocar un TextView a la izquierda de la casilla de verificación con el texto deseado.

xil3
fuente
Tengo una pregunta sobre esto: cuando hace clic en el diseño, debería mostrar (por un tiempo muy corto) que se ha seleccionado toda la fila. ¿Cómo haces eso y simulas que es un efecto nativo?
Desarrollador de Android
No importa: he configurado un selector para el diseño y ahora está bien.
Desarrollador de Android
@androiddeveloper, ¿puede publicar la solución del selector?
Fouad Wahabi
1
@FouadWahabi Puede crear un xml dibujable en "res / drawable", como tal: stackoverflow.com/a/2038086 , y establecer el fondo de la vista / diseño para que sea este archivo dibujable. Es posible que también deba hacer clic en él. Creo que también vi una conferencia de Google IO al respecto. no estoy seguro. Recomiendo ver su video.
Desarrollador de Android
1
@FouadWahabi Bueno, puede ampliar la clase de diseño que ha elegido y agregar esta lógica usted mismo. Puede repasar todas las vistas secundarias y alternar su estado. Puede usar esos enlaces para ayudarlo: developer.android.com/samples/CustomChoiceList/src/… , antoine-merle.com/blog/2013/07/17/… . agregue un ClickListener y active la comprobación, y dentro de "setChecked" establezca el estado de las vistas secundarias en consecuencia, pero solo si implementan Checkable.
Desarrollador de Android
362

Creo que es demasiado tarde para responder esta pregunta, pero en realidad hay una manera de lograr su objetivo. Solo necesita agregar la siguiente línea a su casilla de verificación:

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

También puede usar su casilla personalizable para dibujar.

Y para un radioButton:

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

Y si quieres hacerlo programáticamente:

Defina un diseño y asígnele el nombre RightCheckBox y copie las siguientes líneas:

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

y cuando necesita agregarlo mediante programación solo necesita inflarlo en un CheckBox y agregarlo a la vista raíz.

CheckBox cb = (CheckBox)((LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)).inflate(R.layout.check_right_checkbox,null);
rootView.addView(cb);
Hazhir
fuente
55
Y para una casilla de verificación, puede usar android:drawableRight="?android:attr/listChoiceIndicatorMultiple". Creo que esta es la mejor solución para una casilla de verificación a la derecha que he encontrado hasta ahora.
Pierre-Luc Paour
77
Tenga en cuenta que Android 5.0 SDK le mostrará una advertencia sobre los dispositivos RTL. Para que desaparezca, simplemente agregue android:drawableEndademás de android:drawableRight(con el mismo valor).
Quentin S.
66
Esta solución funcionó bastante bien para resolver el problema. Sin embargo, en Android 5. +, mientras que el widget estándar contiene su ondulación dibujable en un área pequeña alrededor del cheque, este widget modificado permite que la ondulación se expanda mucho más allá de los límites del widget en sí. Si usa esta técnica, sugiero configurar el fondo para usar una ondulación dibujable con una máscara rectangular.
Justin Pollard
2
Android proporciona una docena de objetos de vista, todos los cuales se pueden modificar para dibujar un dibujo de Android o un dibujo personalizado. Si desea el efecto dominó (5.0+) en el objeto, simplemente configure su fondo en un dibujo XML que permita la ondulación. El siguiente enlace muestra varios objetos de vista de muestra, CheckedTextView, CheckBox, ToggleButton, etc. con el conjunto drwable correcto. landenlabs.com/android/uicomponents/uicomponents.html#checkbox
LanDenLabs
66
Muestra una onda redonda en el centro del texto, pero no a la derecha dibujable, por lo que se ve feo en las versiones modernas de Android
Leo Droidcoder
122

Tu puedes hacer

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

Seguir la línea es suficiente 

android:layoutDirection="rtl"
Mahesh Lad
fuente
3
Hacky y elegante al mismo tiempo. ¡Salud!
Roman Samoilenko
Buen truco hombre! no olvide la gravedad: android: gravity = "right | center" para obtener el efecto de reflejo esperado.
Tobliug
3
esta no es la forma correcta, porque si su dispositivo está en un lenguaje RTL, no se verá bien.
Martin Marconcini
cb.setLayoutDirection (CheckBox.LAYOUT_DIRECTION_RTL);
paakjis
1
Debe configurar android:gravity="end|center_vertical"para que el texto se muestre a la izquierda porque el diseño comienza en este momento.
Serge
52

Puede agregar android:layoutDirection="rtl"pero solo está disponible con API 17.

La berga
fuente
19

Solo copia esto:

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

¡Feliz codificación! :)

Ivo Stoyanov
fuente
14

El texto de la casilla de verificación puede no estar alineado a la izquierda con

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

En algún dispositivo. Puede usar CheckedTextView como reemplazo para evitar el problema,

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

y este enlace será útil: alinee el texto a la izquierda, marque la casilla a la derecha

cfh008
fuente
Ese es un botón de radio. ¿Qué tal la casilla de verificación de material por favor?
Monica Aspiras Labbao
1
Para usar una casilla de verificaciónandroid:checkMark="?android:attr/listChoiceIndicatorMultiple"
Philipp
Para un uso de botón de radioandroid:checkMark="?android:attr/listChoiceIndicatorSingle"
Philipp
13 
    <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" />`
Kerim FIRAT
fuente
Eso también hace que el texto esté alineado a la derecha, por lo que si la vista de la casilla de verificación coincide con el ancho principal, se verá extraño.
David Rector
6

Según lo sugerido por @The Berga Puede agregar, android:layoutDirection="rtl"pero solo está disponible con API 17.
para implementación dinámica, aquí va

chkBox.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
Sri Kanth
fuente
3

además de Hazhir imput, para este problema es necesario inyectar esa propiedad en la configuración de la casilla de verificación xml android: paddingLeft = "0dp", esto es para evitar el espacio vacío en el lado izquierdo de la casilla de verificación.

zeusboy
fuente
3

Agregar otra respuesta a esta pregunta que use CheckedTextView Si alguien está tratando de hacerlo programáticamente. También tiene la opción de usar imágenes personalizadas para la casilla de verificación. Y se puede hacer en una sola vista

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");

Desde XML si desea iniciar: 

<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"/>
Kapil G
fuente
0

El siguiente enlace muestra cómo representar varios objetos de vista estándar de Android con una casilla de verificación animada a la derecha configurando el dibujable correcto.

Establecer el fondo para obtener un efecto dominó.

[enlace al sitio web con casilla de verificación de ejemplo en el lado derecho e izquierdo.] [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" />

Checkline.xml de muestra (en drawable, vea el enlace para la versión animada en drawable-v21)

Muestra transparent_ripple.xml (en 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>

Muestra transparent_ripple.xml (en dibujable, resalte solo no hay ondulación disponible 

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

LanDenLabs
fuente
0

Si no es obligatorio usar un CheckBox, puede usar un Switchen su lugar. Un interruptor muestra el texto en el lado izquierdo de forma predeterminada.

Oliver Kranz
fuente
0

Puedes usar esto también,

<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"/>
Tejas Kanani
fuente
Siempre es un crédito adicional incluir un poco de detalles o una referencia para seguir estudiando. Hace sus respuestas más útiles
mw509
-1 
<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>
FAHAD HAMMAD ALOTAIBI
fuente