Bouton de cercle personnalisé

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?

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.

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

AngryTool pour le bouton Android personnalisé

Vous pouvez créer n'importe quel type de bouton Android personnalisé avec ce site d'outils ... Je crée un bouton rond et carré avec un coin rond avec ce site d'outils .. Visitez peut-être je vais vous aider

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:

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>

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:

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

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

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

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