Comment créer la checkBox en forme circulaire?

Question

Je suis confronté au problème en créant la case à cocher de forme circulaire dans Android. J'ai essayé plusieurs méthodes mais mon problème n'est pas résolu.J'ai créé les formes et appliqué à la case à cocher, puis le problème n'est pas résolu.Veuillez m'aider à créer la case à cocher en forme de cercle .  

Comment créer la case circulaire comme sur l'image.

Answer 1

Après avoir passé du temps, j'ai créé ce modèle, que vous pouvez utiliser. Vous devrez peut-être modifier au besoin .

Dans activity.xml

<CheckBox
    Android:id="@+id/checkb"
    Android:layout_width="115dp"
    Android:layout_height="50dp"
    Android:button="@drawable/custom_checkbox"
    Android:scaleX="3"
    Android:scaleY="3"
    Android:layout_centerVertical="true"
    Android:layout_alignParentRight="true"
    Android:layout_alignParentEnd="true"
    Android:layout_marginRight="15dp"
    Android:layout_marginEnd="15dp" />

créer un nouveau fichier XML dans un dossier pouvant être appelé appelé custom_checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:state_checked="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="false"
        Android:drawable="@drawable/unchecked" />
</selector>

créer un nouveau fichier XML dans un dossier pouvant être appelé appelé vérifié.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_checked="true">
        <layer-list>
            <item>
                <shape Android:shape="oval">
                    <corners Android:radius="1dp" />
                    <stroke
                        Android:width="1dp"
                        Android:color="#777" />
                    <gradient
                        Android:startColor="#990000"
                        Android:centerColor="#990000"
                        Android:endColor="#990000"
                        Android:angle="270" />
                    <size
                        Android:width="30dp"
                        Android:height="30dp" />
                </shape>
                </item>

            <item
                Android:width="8dp"
                Android:height="2dp"
                Android:top="20dp"
                Android:left="6dp">
                <rotate
                    Android:fromDegrees="45">
                    <shape Android:shape="rectangle">
                        <solid Android:color="#fff"/>
                    </shape>
                </rotate>
            </item>

            <item
                Android:width="19dp"
                Android:height="2dp"
                Android:top="16dp"
                Android:left="9dp">
                <rotate
                    Android:fromDegrees="-45">
                    <shape Android:shape="rectangle">
                        <solid Android:color="#fff"/>
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>

</selector>

créer un nouveau fichier XML dans un dossier appelé Unchecked.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">
        <corners Android:radius="1dp" />
        <stroke
            Android:width="1dp"
            Android:color="#777" />
        <gradient
            Android:startColor="#990000"
            Android:centerColor="#990000"
            Android:endColor="#990000"
            Android:angle="270" />
        <size
            Android:width="30dp"
            Android:height="30dp" />
    </shape>

Lorsque décoché, il ressemble à ce qui suit. (vous pouvez ajouter le code entre from.xml vérifié et modifier le haut et la gauche pour donner X quand la case à cocher n'est pas cochée)

 

Lorsque coché, il ressemblera à celui ci-dessous

 

Si cela fonctionne, marquez-le comme réponse.

Answer 2

La solution acceptée est correcte, mais en suivant le même flux, vous pouvez modifier les formes pour utiliser un dessin sur le fichier "vérifié.xml". Cette solution devrait fonctionner avec les appareils Android avant l'API 21 car il n'y a pas de largeur ni de hauteur sur les formes dessinées au format XML.

XML ​​non vérifié:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval">


        <solid Android:color = "@color/lightgray" />
</shape>

XML ​​vérifié:

<?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:Android = "http://schemas.Android.com/apk/res/Android">
            <item>
                <shape Android:shape="oval">
                    <solid Android:color="@color/colorPrimary" />
                </shape>
                </item>

            <item
                         Android:drawable="@drawable/check_arrow_png" />
        </layer-list>

Answer 3

la plupart des réponses précédentes sont bien acceptées, la réponse de chirag90 étant la meilleure, mais elle nécessite également beaucoup de codage. Dans sa réponse, je reprendrai son concept, mais je vous montrerai comment vous pouvez créer vos propres cases à cocher circulaires avec tout le style que vous voulez sans si vous avez besoin de codage, vous utiliserez ensuite ce dessin pour définir les états de la case à cocher, comme dans la réponse de chirag90 

tout d’abord, allez sur freelogomaker.com et créez vos dessins, il est très facile à utiliser et vous pouvez créer n’importe quoi, sur le site Web, allez dans la barre de recherche de la forme et tapez "case à cocher" puis cliquez sur le bouton de recherche, une liste de tirages multiples vous sera présentée afin que vous puissiez choisir 

 

ci-dessus sont les éléments dessinables que j'ai sélectionnés, personnalisez-les à votre guise et enregistrez-les, puis accédez à appiconmaker.co et utilisez les éléments dessinables que vous avez créés pour générer les différentes tailles de conception des éléments dessinables, telles que mdpi, hdpi, xhdpi et xxhdpi. tirables j'ai fait 

  décoché 

  case à cocher 

une fois que cela est fait, vous pouvez ensuite ajouter les éléments dessinables à votre projet avec les noms correspondants cochés et décochés dans votre dossier des éléments dessinables. Une fois tout cela créé, créez maintenant custom_checkbox.xml comme dans la réponse de chirag90. 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item Android:state_checked="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="true"
        Android:drawable="@drawable/checked" />
    <item Android:state_pressed="false"
        Android:drawable="@drawable/unchecked" />
</selector>

maintenant dans votre mise en page créez votre case à cocher comme suit 

<CheckBox
 Android:id="@+id/checkman"
 Android:layout_width="wrap_content"
 Android:layout_height="wrap_content"
 Android:layout_alignParentEnd="true"
 Android:layout_alignParentRight="true"
 Android:layout_centerVertical="true"
 Android:layout_marginRight="15dp"
 Android:layout_marginEnd="15dp"
 Android:button="@drawable/custom_checkbox"
 Android:scaleX="0.8"
 Android:scaleY="0.8" />

vous pouvez ensuite modifier les Android:scaleX="0.8" et Android:scaleY="0.8" pour les adapter à votre présentation 

c'est le résultat dans mon projet 

  décoché 

  vérifié

espérons que cela aide beaucoup là-bas

Answer 4

En plus de la réponse de Rodolfo, je peux ajouter que vous pouvez utiliser les attributs inset si votre tirage est trop grand. Remarque: la solution de @ chirag90 ne fonctionne que pour les API 23 et supérieures. Note : vector drawable peut être mal rendu.

Checked.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="oval">
            <solid
                Android:color="@color/col_chat_selected"/>
            <size
                Android:width="35dp"
                Android:height="35dp"/>
        </shape>
    </item>

    <item>
        <inset
            Android:drawable="@drawable/shape"
            Android:insetBottom="10dp"
            Android:insetLeft="10dp"
            Android:insetRight="10dp"
            Android:insetTop="10dp"/>
    </item>

</layer-list>