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?
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?
Réponses:
Utilisez xml drawable comme ceci:
Enregistrez le contenu suivant round_button.xml
dans le 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 ce FloatingActionButton
soit une meilleure option, si vous souhaitez le faire à l'aide du sélecteur xml, créez un dossier drawable-v21
dans res
et enregistrez-en 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 définissez-le comme arrière-plan Button
dans 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:
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' MaterialButton
application d'un Widget.MaterialComponents.Button.Icon
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
, les android:insetBottom
attributs sont nécessaires pour centrer l'icône sur le bouton d' éviter l' espace de rembourrage supplémentaire.
Utilisez l' app:shapeAppearanceOverlay
attribut 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:
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».
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:
android:layout_height
et android:layout_width
à la même valeurapp:cornerRadius
à la moitié de la hauteur / largeurandroid:insetBottom
and android:insetTop
to 0dp
pour obtenir un cercle parfaitPar exemple:
<Button
android:insetBottom="0dp"
android:insetTop="0dp"
android:layout_height="150dp"
android:layout_width="150dp"
app:cornerRadius="75dp"
/>