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

Utilisez le xml drawable comme ceci :

Enregistrez le contenu suivant en tant que round_button.xml en drawable dossier

<?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 FloatingActionButton est une meilleure option, si vous voulez le faire en utilisant un sélecteur xml, créez un dossier drawable-v21 en res et en sauver un autre round_button.xml avec 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 le définir comme arrière-plan de Button en 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 voulez qu'il affiche tous ces états (activé, désactivé, en surbrillance, etc.), vous utiliserez le sélecteur suivant décrit ici .
2. Vous devez conserver les deux fichiers afin de rendre le dessinable rétrocompatible. Sinon, vous serez confronté à des exceptions bizarres dans les versions précédentes d'Android.

Answer 2

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

Answer 3

Avec l'officiel Bibliothèque des composants matériels vous pouvez utiliser le MaterialButton appliquer un Widget.MaterialComponents.Button.Icon le style.

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 , android:insetBottom sont nécessaires pour centrer l'icône sur le bouton en évitant tout espace de remplissage supplémentaire.

Utilisez le app:shapeAppearanceOverlay pour obtenir des coins arrondis. Dans ce cas, vous obtiendrez un cercle.

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

Le résultat final :

---

Avec jetpack compose que vous pouvez utiliser :

    Button(
        onClick = { /* Do something! */ },
        modifier = Modifier.width(48.dp).height(48.dp),
        shape = CircleShape
    ) {
        Icon(Icons.Filled.Add, "")
    }

Answer 4

AngryTool pour bouton Android personnalisé

Vous pouvez faire n'importe quel type de bouton Android personnalisé avec cet outil... J'ai fait un bouton rond et carré avec un coin rond avec cet outil... Visitez-le peut-être je vais vous aider

Answer 5

Pour un bouton au look 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 en tant que app:cornerRadius .