Comment afficher la case à cocher Android sur le côté droit?

146

Par défaut, la case à cocher Android affiche le texte à droite et la case à cocher à gauche
Je veux afficher la case à cocher à droite avec le texte à gauche

comment y parvenir?

android  layout  checkbox 
— SOLUTIONS UMAR-MOBITS
source

Réponses:

41

Je ne peux pas penser à un moyen avec le style, mais vous pouvez simplement définir le texte de la case à cocher sur rien et mettre un TextView à gauche de la case à cocher avec le texte souhaité.

— xil3
source
J'ai une question à ce sujet: lorsque vous cliquez sur la mise en page, cela devrait montrer (pendant très peu de temps) que toute la ligne est sélectionnée. comment faire cela et simuler que c'est un effet natif?
— développeur android
peu importe - j'ai défini un sélecteur pour la mise en page et maintenant c'est ok.
— développeur android
@androiddeveloper, pouvez-vous publier la solution de sélection?
— Fouad Wahabi
1
@FouadWahabi Vous pouvez créer un dessin xml dans "res / drawable", comme tel: stackoverflow.com/a/2038086 , et définir l'arrière-plan de la vue / mise en page comme ce fichier dessinable. Vous devrez peut-être également le rendre cliquable. Je pense avoir également vu une conférence Google IO à ce sujet. pas certain. recommande vivement de vérifier leur vidéo.
— développeur android
1
@FouadWahabi Eh bien, vous pouvez étendre la classe de mise en page que vous avez choisie et ajouter cette logique par vous-même. Vous pouvez parcourir toutes les vues enfants et basculer leur état. Vous pouvez utiliser ces liens pour vous aider: developer.android.com/samples/CustomChoiceList/src/… , antoine-merle.com/blog/2013/07/17/… . ajoutez un clickListener et basculez la vérification, et à l'intérieur de "setChecked" définissez l'état des vues enfants en conséquence, mais uniquement si elles implémentent Checkable.
— développeur android
362

Je pense qu'il est trop tard pour répondre à cette question, mais en fait, il existe un moyen d'atteindre votre objectif. Il vous suffit d'ajouter la ligne suivante à votre case à cocher:

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

Vous pouvez également utiliser votre dessin personnalisé pour la case à cocher.

Et pour un radioButton:

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

Et si vous voulez le faire par programme:

Définissez une mise en page et nommez-la RightCheckBox et copiez les lignes suivantes:

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

et lorsque vous avez besoin de l'ajouter par programme, il vous suffit de le gonfler dans un CheckBox et de l'ajouter à la vue racine.

CheckBox cb = (CheckBox)((LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE)).inflate(R.layout.check_right_checkbox,null);
rootView.addView(cb);
— Hazhir
source
5
Et pour une case à cocher, vous pouvez utiliser android:drawableRight="?android:attr/listChoiceIndicatorMultiple". Je pense que c'est la meilleure solution pour une case à cocher sur la droite que j'ai trouvée jusqu'à présent.
— Pierre-Luc Paour
7
Veuillez noter que le SDK Android 5.0 vous montrera un avertissement concernant les appareils RTL. Pour le faire disparaître, ajoutez simplement android:drawableEnden plus de android:drawableRight(avec la même valeur).
— Quentin S.
6
Cette solution a plutôt bien fonctionné pour résoudre le problème. Sur Android 5. +, cependant, alors que le widget standard contient son ondulation pouvant être dessinée dans une petite zone autour de la vérification, ce widget modifié permet à l'ondulation de s'étendre bien au-delà des limites du widget lui-même. Si vous utilisez cette technique, je suggère de définir l'arrière-plan pour utiliser une ondulation pouvant être dessinée avec un masque rectangulaire.
— Justin Pollard
2
Android fournit une douzaine d'objets de vue, qui peuvent tous être modifiés pour dessiner un dessin Android ou un dessin personnalisé. Si vous voulez l'effet d'entraînement (5.0+) sur l'objet, définissez simplement son arrière-plan sur un dessin XML qui active l'ondulation. Le lien suivant montre plusieurs exemples d'objets de vue, CheckedTextView, CheckBox, ToggleButton, etc. avec le bon jeu de drwables. landenlabs.com/android/uicomponents/uicomponents.html#checkbox
— LanDenLabs
6
Il montre une ondulation ronde au centre du texte, mais pas sur le dessin à droite, semble donc moche sur les versions Android modernes
— Leo Droidcoder
122

Tu peux faire

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

La ligne suivante suffit 

android:layoutDirection="rtl"
— Mahesh Lad
source
3
Hacky et élégant à la fois. À votre santé!
— Roman Samoilenko
Bon truc! n'oubliez pas la gravité: android: gravity = "right | center" pour obtenir l'effet miroir attendu.
— Tobliug
3
ce n'est pas la bonne façon, car si votre appareil est en langage RTL, il ne sera pas correct.
— Martin Marconcini
cb.setLayoutDirection (CheckBox.LAYOUT_DIRECTION_RTL);
— paakjis
1
Vous devez définir android:gravity="end|center_vertical"pour afficher le texte à gauche car la mise en page commence maintenant.
— Serge
52

Vous pouvez ajouter, android:layoutDirection="rtl"mais il n'est disponible qu'avec l'API 17.

— La Berga
source
19

Copiez simplement ceci:

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

Bon codage! :)

— Ivo Stoyanov
source
14

Le texte de la case à cocher n'est peut-être pas aligné à gauche avec

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

dans certains appareils. Peut utiliser CheckedTextView en remplacement pour éviter le problème,

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

et ce lien sera utile: Aligner le texte à gauche, case à cocher à droite

— cfh008
source
C'est un bouton radio. Que diriez-vous de celui pour la case à cocher matériel s'il vous plaît?
— Monica Aspiras Labbao
1
Pour une utilisation de la case à cocherandroid:checkMark="?android:attr/listChoiceIndicatorMultiple"
— Philipp
Pour un radiobuttonandroid: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
source
Cela rend également le texte aligné à droite, donc si la vue de la case à cocher correspond à la largeur du parent, cela aura l'air bizarre.
— David Rector le
6

Comme suggéré par @The Berga Vous pouvez ajouter android:layoutDirection="rtl"mais il n'est disponible qu'avec l'API 17.
pour une implémentation dynamique, c'est ici

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

de plus de Hazhir imput, pour ce problème, il est nécessaire d'injecter cette propriété dans la case à cocher xml configuration android: paddingLeft = "0dp", c'est pour éviter l'espace vide à gauche de la case à cocher.

— zeusboy
source
3

Ajout d'une autre réponse à cette question qui utilise CheckedTextView Si quelqu'un essaie de le faire par programme. Il a également la possibilité d'utiliser des images personnalisées pour la case à cocher. Et peut être fait dans une seule vue

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

À partir de XML si vous souhaitez lancer - 

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

Le lien suivant montre comment rendre plusieurs objets de vue Android standard avec une case à cocher animée sur la droite en définissant le dessin de droite.

Définissez l'arrière-plan pour obtenir un effet d'entraînement.

[lien vers le site Web avec un exemple de case à cocher sur le côté droit et gauche.] [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" />

Exemple de checkline.xml (dans drawable, voir le lien pour la version animée dans drawable-v21)

Échantillon transparent_ripple.xml (dans 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>

Échantillon transparent_ripple.xml (dans drawable, mettez en surbrillance uniquement aucune ondulation 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
source
0

S'il n'est pas obligatoire d'utiliser un, CheckBoxvous pouvez simplement utiliser un Switch. Un commutateur affiche le texte sur le côté gauche par défaut.

— Oliver Kranz
source
0

Vous pouvez également l'utiliser,

<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
source
C'est toujours un crédit supplémentaire d'inclure un peu de détails ou une référence pour approfondir les études. Rend vos réponses plus utiles
— 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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.