Bouton circulaire personnalisé

Question

Je veux créer un bouton personnalisé et j'ai besoin qu'il soit circulaire. Comment puis-je créer un bouton circulaire ? Je ne pense pas que cela soit possible avec draw9patch.

Je ne sais pas non plus comment créer un bouton personnalisé !

Avez-vous une suggestion ?

Answer 1

Vous pouvez utiliser MaterialButton de la bibliothèque matérielle d'AndroidX.

<com.google.android.material.button.MaterialButton
     android:layout_width="75dp"
     android:layout_height="75dp"
     android:layout_margin="10dp"
     android:insetLeft="0dp"
     android:insetTop="0dp"
     android:insetRight="0dp"
     android:insetBottom="0dp"
     app:cornerRadius="50dp"
     app:icon="@drawable/ic_camera"
     app:iconGravity="textStart"
     app:iconPadding="0dp"
     app:iconSize="35dp" />

et ce sera comme ceci

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

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

Answer 3

Malheureusement, l'utilisation d'une table d'écriture XML et le remplacement de l'arrière-plan signifient que vous devez définir explicitement la couleur au lieu de pouvoir utiliser les couleurs du style de l'application.

Plutôt que de coder en dur les couleurs des boutons pour chaque comportement, j'ai opté pour le codage en dur du rayon des coins, ce qui est un peu moins compliqué et conserve tous les comportements par défaut des boutons (changement de couleur lorsqu'on appuie dessus et autres effets visuels) et utilise les couleurs du style de l'application par défaut :

1. Définir android:layout_height y android:layout_width à la même valeur

2. Définir app:cornerRadius à la moitié de la hauteur/largeur

   (Il semble en fait que tout ce qui est supérieur ou égal à la moitié de la hauteur/largeur fonctionne, donc pour éviter de devoir modifier le rayon à chaque fois que vous mettez à jour la hauteur/largeur, vous pourriez plutôt le définir sur une valeur très élevée, telle que 1000dp (le risque étant qu'il se brise si ce comportement change un jour).

3. Définir android:insetBottom y android:insetTop a 0dp pour obtenir un cercle parfait

Par exemple :

<Button
    android:insetBottom="0dp"
    android:insetTop="0dp"
    android:layout_height="150dp"
    android:layout_width="150dp"
    app:cornerRadius="75dp"
    />

Answer 4

Voici comment vous pouvez procéder : créez un fichier de ressources dans drawable.xml. Dites round_button.xml et ensuite 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>

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

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

Answer 5

Si vous voulez faire avec ImageButton, utilisez ce qui suit. Cela créera un ImageButton rond avec des ondulations matérielles.

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