Bouton de cercle personnalisé


196

Je veux créer un bouton personnalisé et j'ai besoin qu'il soit en cercle. Comment créer un bouton circulaire? Je ne pense pas que ce soit possible avec draw9patch.

Aussi je ne sais pas faire de bouton personnalisé!

Avez-vous une suggestion?


vous devez étendre la classe de bouton et remplacer la méthode onDraw.
Ashwin N Bhanushali

2
mais le problème est ici si je prolonge cela, et l'utilisateur touche hors du cercle, Onlcick sera appelé, comment résoudre cela.
Ata

pourquoi ne définissez-vous pas simplement une image de forme ronde comme arrière-plan de votre bouton?
MKJParekh

J'ai fait simple OnDrawn, cela s'affiche en mode Conception, mais lorsque je veux exécuter une application, cela pose ce problème lors du chargement: android.view.InflateException: ligne de fichier XML binaire # 52: erreur de gonflage de la classe com.inaros.magicbox._customButtonPlay
Ata

Réponses:


355

Utilisez xml drawable comme ceci:

Enregistrez le contenu suivant round_button.xmldans le drawabledossier

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#c20586"/>
        </shape>
    </item>
</selector>

Effet matériel Android: bien que ce FloatingActionButtonsoit une meilleure option, si vous souhaitez le faire à l'aide du sélecteur xml, créez un dossier drawable-v21dans reset enregistrez-en un autre round_button.xmlavec le xml suivant

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#c20586">
    <item>
        <shape android:shape="oval">
            <solid android:color="#fa09ad"/>
        </shape>
    </item>
</ripple>

Et définissez-le comme arrière-plan Buttondans xml comme ceci:

<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/round_button"
android:gravity="center_vertical|center_horizontal"
android:text="hello"
android:textColor="#fff" />

Important:

  1. Si vous souhaitez qu'il affiche tous ces états (activé, désactivé, mis en surbrillance, etc.), vous utiliserez le sélecteur comme décrit ici .
  2. Vous devez conserver les deux fichiers afin de rendre le drawable rétrocompatible. Sinon, vous rencontrerez des exceptions étranges dans la version Android précédente.

Par dossier drawable, vous entendez ouvrir un dossier nommé 'drawable', ou l'enregistrer dans drawable-mdpi, hdpi, etc ...?
Jjang

@Jjang non, il vous suffit de l'enregistrer dans le dossier 'drawable', toute ressource xml pour drawable est généralement enregistrée dans 'drawable', pas en mdpi, hdpi etc.
Adil Soomro

K thx, je n'avais pas de dossier dessinable jusqu'à présent (seulement mdpi, hdpi ... et -v21) :)
Jjang

PS Comment donner au bouton une couleur d'ondulation par défaut? Comme le gris qui colore tous les boutons de l'application par défaut.
Jjang

@AdilSoomro j'ai besoin de votre adresse e-mail pls ou envoyez-moi un mail adilm717@gmail.com , adil de pak
Adiii

69

Markushi a écrit un widget de bouton circulaire avec des effets étonnants. Cliquez ici !

entrez la description de l'image ici


Comment l'utiliser avec une image non circulaire?
tomsoft

3
Attention: la bibliothèque liée à cette réponse est désormais obsolète. L'auteur (Markushi) recommande d'utiliser à la place un bouton d'action flottant .
Réintégrer Monica le

@ABoschman Pouvons-nous mettre du texte dans le widget du bouton cercle? Ou juste pour les tirages
Ruchir Baronia

@RuchirBaronia Je pense que vous devriez vraiment envisager le FAB Android. Combien de prose voulez-vous placer dans un petit bouton rond? Cela semble fait pour les icônes. Consultez: google.com/design/spec/components/…
Réintégrer Monica

@ABoschman Hé, mais j'aime vraiment l'effet de ce bouton dans cette bibliothèque. Y a-t-il un moyen?
Ruchir Baronia


17

Avec la bibliothèque officielle de composants matériels, vous pouvez utiliser l' MaterialButtonapplication d'un Widget.MaterialComponents.Button.Iconstyle.

Quelque chose comme:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_add"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

Actuellement , le app:iconPadding="0dp", android:insetLeft, android:insetTop, android:insetRight, les android:insetBottomattributs sont nécessaires pour centrer l'icône sur le bouton d' éviter l' espace de rembourrage supplémentaire.

Utilisez l' app:shapeAppearanceOverlayattribut pour obtenir des coins arrondis. Dans ce cas, vous aurez un cercle.

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

Le résultat final:

entrez la description de l'image ici


1
Merci @Gabriele Mariotti. Il convient de souligner la nécessité app:iconPadding="0dp"de s'assurer que l'icône est centrée. J'ai brûlé un tas de temps à essayer le centre jusqu'à ce que je trouve ça. Cela semble un oubli de cette application: iconGravity n'a pas de valeur «centre».
scottyab le

1
Merci @Gabriele Mariotti. Fonctionne bien pour moi!
Androidz

Pour supprimer l'élévation du bouton, on peut utiliser le style suivant: Widget.MaterialComponents.Button.UnelevatedButton.Icon
Marcola Carr

2

si vous voulez utiliser VectorDrawable et ConstraintLayout

<FrameLayout
            android:id="@+id/ok_button"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:background="@drawable/circle_button">
                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <ImageView
                        android:id="@+id/icon_of_button"
                        android:layout_width="32dp"
                        android:layout_height="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        app:srcCompat="@drawable/ic_thumbs_up"/>
                    <TextView
                        android:id="@+id/text_of_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        app:layout_constraintTop_toBottomOf="@+id/icon_of_button"
                        app:layout_constraintRight_toRightOf="parent"
                        app:layout_constraintLeft_toLeftOf="parent"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:text="ok"
                        />
                </android.support.constraint.ConstraintLayout>
            </FrameLayout>

arrière-plan du cercle: circle_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#41ba7a" />
<stroke
    android:width="2dip"
    android:color="#03ae3c" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />
</shape>

2

Pour un bouton à la recherche de FAB, ce style sur un MaterialButton:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

Résultat:

entrez la description de l'image ici

Si vous modifiez la taille, veillez à utiliser la moitié de la taille du bouton comme app:cornerRadius.


0

voici comment vous pouvez effectuer simplement, créer un fichier de ressources dessinable dans drawable.xml. Dites round_button.xml, puis collez le code suivant.

<?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/button_start_gradient_color"/>
       </shape>
    </item>
    <item
        android:drawable="@drawable/microphone"/>
</layer-list>

Remarque: - utilisez votre propre couleur et ressource dessinable comme j'ai utilisé @ drawable / microphone

Voici le résultat [1]: https://i.stack.imgur.com/QyhdJ.png


0

Si vous voulez faire avec ImageButton, utilisez ce qui suit. Il créera un ImageButton rond avec des ondulations de matière.

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_settings_6"
android:background="?selectableItemBackgroundBorderless"
android:padding="10dp"
/>

0

Malheureusement, utiliser un dessin XML et remplacer l'arrière-plan signifie que vous devez définir explicitement la couleur au lieu de pouvoir utiliser les couleurs de style d'application.

Plutôt que de coder en dur les couleurs des boutons pour chaque comportement, j'ai choisi de coder en dur le rayon du coin, qui semble légèrement moins hacky et conserve tout le comportement du bouton par défaut (changement de couleur lorsqu'il est enfoncé et autres effets visuels) et utilise les couleurs de style de l'application par défaut:

  1. Définir android:layout_heightet android:layout_widthà la même valeur
  2. Définir app:cornerRadiusà la moitié de la hauteur / largeur
  3. Set android:insetBottomand android:insetTopto 0dppour obtenir un cercle parfait

Par exemple:

<Button
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:layout_height="150dp"
    android:layout_width="150dp"
    app:cornerRadius="75dp"
    />
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.