Como mostrar a caixa de seleção do Android no lado direito?

146

Por padrão, a caixa de seleção do Android mostra o texto no lado direito e a caixa de seleção à esquerda.
Eu quero mostrar a caixa de seleção no lado direito com o texto à esquerda

como faço para conseguir isso?

android  layout  checkbox 
— UMAR-MOBITSOLUTIONS
fonte

Respostas:

41

Não consigo pensar em uma maneira de estilizar, mas você pode simplesmente definir o texto da caixa de seleção para nada e colocar um TextView à esquerda da caixa de seleção com o texto desejado.

— xil3
fonte
Eu tenho uma pergunta sobre isso: quando você clica no layout, ele deve mostrar (por um tempo muito curto) que toda a linha está selecionada. como você faz isso e simula que é um efeito nativo?
— desenvolvedor android
não importa - eu configurei um seletor para o layout e agora está ok.
— desenvolvedor android
@androiddeveloper, você pode postar a solução seletora?
— Fouad Wahabi
1
@FouadWahabi Você pode criar um drawable xml em "res / drawable", como: stackoverflow.com/a/2038086 , e definir o plano de fundo da visualização / layout como esse arquivo drawable. Pode ser necessário torná-lo clicável também. Acho que também vi uma palestra do Google IO sobre isso. não tenho certeza. recomendo verificar o vídeo deles.
— desenvolvedor android
1
@FouadWahabi Bem, você pode estender a classe de layout escolhida e adicionar essa lógica por si mesmo. Você pode revisar todas as visualizações filho e alternar seu estado. Você pode usar esses links para ajudá-lo: developer.android.com/samples/CustomChoiceList/src/… , antoine-merle.com/blog/2013/07/17/… . adicione um clickListener, alterne a verificação e, dentro de "setChecked", defina o estado das visualizações filho de acordo, mas somente se elas implementarem Checkable.
— desenvolvedor android
362

Acho que é tarde demais para responder a essa pergunta, mas na verdade existe uma maneira de atingir seu objetivo. Você só precisa adicionar a seguinte linha à sua caixa de seleção:

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

Você também pode usar sua gaveta personalizada para a caixa de seleção.

E para um radioButton:

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

E se você quiser fazer isso programaticamente:

Defina um layout e nomeie RightCheckBox e copie as seguintes linhas:

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

e quando você precisar adicioná-lo programaticamente, basta inflá-lo em um CheckBox e adicioná-lo à visualização raiz.

CheckBox cb = (CheckBox)((LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)).inflate(R.layout.check_right_checkbox,null);
rootView.addView(cb);
— Hazhir
fonte
5
E para uma caixa de seleção, você pode usar android:drawableRight="?android:attr/listChoiceIndicatorMultiple". Penso que esta é a melhor solução para uma caixa de verificação à direita que encontrei até agora.
— Pierre-Luc Paour 26/02
7
Observe que o Android 5.0 SDK mostrará um aviso sobre dispositivos RTL. Para fazê-lo desaparecer, basta adicionar android:drawableEndalém de android:drawableRight(com o mesmo valor).
— Quentin S.
6
Esta solução funcionou muito bem para resolver o problema. No Android 5. +, no entanto, embora o widget padrão contenha sua ondulação desenfreada em uma pequena área ao redor da verificação, esse widget modificado permite que a ondulação se expanda muito além dos limites do próprio widget. Se estiver usando essa técnica, sugiro definir o plano de fundo para usar um desenho ondulado com uma máscara retangular.
— Justin Pollard
2
O Android fornece uma dúzia de objetos de visualização, todos os quais podem ser alterados para desenhar um drawable android ou um drawable personalizado. Se você deseja o efeito cascata (5.0 ou superior) no objeto, basta definir seu plano de fundo como um desenho XML que permite a cascata. O link a seguir mostra vários exemplos de objetos de exibição, CheckedTextView, CheckBox, ToggleButton, etc. com o conjunto drwable correto. landenlabs.com/android/uicomponents/uicomponents.html#checkbox
— LanDenLabs
6
Ele mostra uma ondulação redonda no centro do texto, mas não na drawable direita, assim, olha feio em versões modernas Android
— Leo Droidcoder
122

Você pode fazer

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

A linha a seguir é suficiente 

android:layoutDirection="rtl"
— Mahesh Lad
fonte
3
Hacky e elegante ao mesmo tempo. Felicidades!
— Roman Samoilenko
Bom truque, cara! não esqueça a gravidade: android: gravity = "right | center" para obter o efeito de espelhamento esperado.
— Tobliug 2/07
3
essa não é a maneira correta, porque se o seu dispositivo estiver em uma linguagem RTL, ele não parecerá correto.
— Martin Marconcini
cb.setLayoutDirection (CheckBox.LAYOUT_DIRECTION_RTL);
— paakjis
1
É necessário definir android:gravity="end|center_vertical"para exibir o texto à esquerda, porque o layout começa agora.
— Serge
52

Você pode adicionar, android:layoutDirection="rtl"mas está disponível apenas com a API 17.

— The Berga
fonte
19

Basta copiar isso:

    <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 codificação! :)

— Ivo Stoyanov
fonte
14

O texto da caixa de seleção pode não estar alinhado à esquerda com

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

em algum dispositivo. Pode usar o CheckedTextView como um substituto para evitar o problema,

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

e este link será útil: Alinhar texto à esquerda, caixa de seleção à direita

— cfh008
fonte
Esse é um botão de opção. Que tal a caixa de seleção do material, por favor?
— Monica Aspiras Labbao
1
Para uma caixa de seleção, useandroid:checkMark="?android:attr/listChoiceIndicatorMultiple"
— Philipp
Para usar o botão de opçãoandroid: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
fonte
Isso também torna o texto alinhado à direita; portanto, se a exibição da caixa de seleção corresponder à largura pai, ela parecerá estranha.
— David Rector
6

Como sugerido por @ The Berga Você pode adicionar, android:layoutDirection="rtl"mas está disponível apenas na API 17.
Para implementação dinâmica, aqui vai

chkBox.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
— Sri Kanth
fonte
3

Além disso, a partir da entrada Hazhir, para esse problema, é necessário injetar essa propriedade na configuração xml da caixa de seleção android: paddingLeft = "0dp", para evitar o espaço vazio no lado esquerdo da caixa de seleção.

— zeusboy
fonte
3

Adicionando outra resposta a esta pergunta que usa o CheckedTextView Se alguém estiver tentando fazer isso programaticamente. Ele também tem a opção de usar imagens personalizadas para a caixa de seleção. E pode ser feito em uma única visualização

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

Do XML, se você deseja 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
fonte
0

O link a seguir demonstra como renderizar vários objetos de exibição padrão do Android com uma caixa de seleção animada à direita, definindo o desenho correto.

Defina o plano de fundo para obter um efeito cascata.

[link para o site com exemplo de caixa de seleção no lado direito e esquerdo.] [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" />

Exemplo checkline.xml (no drawable, consulte o link para versão animada no drawable-v21)

Exemplo de transparent_ripple.xml (em 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>

Amostra transparent_ripple.xml (no drawable, realce apenas nenhuma ondulação disponível 

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

Se não for obrigatório usar um, CheckBoxvocê pode simplesmente usar um Switch. Um Switch mostra o texto no lado esquerdo por padrão.

— Oliver Kranz
fonte
0

Você pode usar isso também,

<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
fonte
É sempre um crédito extra incluir alguns detalhes ou uma referência para estudos adicionais. Torna as suas respostas mais úteis
— mw509 16/03
-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
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.