Je suis confus sur les styles de boutons pour la conception de matériaux. Je voudrais obtenir des boutons en relief colorés comme dans le lien ci-joint., Comme les boutons "forcer l'arrêt" et "désinstaller" vus dans la section d'utilisation. Existe-t-il des styles disponibles ou dois-je les définir?
http://www.google.com/design/spec/components/buttons.html#buttons-usage
Je n'ai pas pu trouver les styles de bouton par défaut.
Exemple:
<Button style="@style/PrimaryButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calculate"
android:id="@+id/button3"
android:layout_below="@+id/editText5"
android:layout_alignEnd="@+id/editText5"
android:enabled="true" />
Si j'essaie de changer la couleur d'arrière-plan du bouton en ajoutant
android:background="@color/primary"
tous les styles disparaissent, tels que l'animation tactile, l'ombre, les coins arrondis, etc.
Réponses:
J'ajouterai ma réponse car je n'utilise aucune des autres réponses fournies.
Avec la bibliothèque de support v7, tous les styles sont en fait déjà définis et prêts à l'emploi, pour les boutons standard, tous ces styles sont disponibles:
Widget.AppCompat.Button
:Widget.AppCompat.Button.Colored
:Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored
:Pour répondre à la question, le style à utiliser est donc
Comment changer la couleur
Pour l'ensemble de l'application:
La couleur de tous les contrôles de l'interface utilisateur (non seulement les boutons, mais aussi les boutons d'action flottants, les cases à cocher, etc.) est gérée par l'attribut
colorAccent
comme expliqué ici . Vous pouvez modifier ce style et appliquer votre propre couleur dans la définition de votre thème:Pour un bouton spécifique:
Si vous devez modifier le style d'un bouton spécifique, vous pouvez définir un nouveau style, héritant de l'un des styles parents décrits ci-dessus. Dans l'exemple ci-dessous, je viens de changer les couleurs d'arrière-plan et de police:
Il vous suffit ensuite d'appliquer ce nouveau style sur le bouton avec:
Pour définir une conception de bouton par défaut dans une mise en page, ajoutez cette ligne au thème styles.xml:
où
@style/btn
est votre thème de bouton. Cela définit le style de bouton pour tous les boutons d'une mise en page avec un thème spécifiquela source
colorButtonNormal
attr ne fonctionne pas pour moi sur Android 4.1.2. Impossible de définir la couleur du bouton (android:background
casse le style de matériau du bouton).style=""
au lieu deAndroid:theme=""
changer pour ce dernier résolu ce problème pour moiSolution la plus simple
Étape 1: utilisez la dernière bibliothèque de support
Étape 2: utilisez AppCompatActivity comme classe d'activité parent
Étape 3: utiliser l'espace de noms d'application dans votre fichier XML de mise en page
Étape 4: utilisez AppCompatButton au lieu de Button
la source
android.support.v7.widget.AppCompatButton
car l'outil de génération l'utilise automatiquement lorsque vous le spécifiezButton
textColor
remplace la couleur du texte pour l' état désactivé .Widget.MaterialComponents.Button.OutlinedButton
, au moins.Si je vous comprends bien, vous voulez faire quelque chose comme ça:
Dans ce cas, il devrait suffire d'utiliser:
Ou pour une API inférieure à 21:
Outre l' utilisation du didacticiel sur le thème des matériaux .
La variante animée est ici .
la source
Voici comment j'ai obtenu ce que je voulais.
D'abord, fait un bouton (dedans
styles.xml
):L'ondulation et l'arrière-plan du bouton, comme un dessin
primary_round.xml
:Cela a ajouté l'effet d'entraînement que je recherchais.
la source
Ajoutez la dépendance à votre
build.gradle
:Ajoutez ensuite le
MaterialButton
à votre mise en page:Vous pouvez consulter la documentation complète ici et l' API ici .
Pour changer la couleur d'arrière - plan, vous avez 2 options.
backgroundTint
attribut.Quelque chose comme:
materialThemeOverlay
attribut.Quelque chose comme:
L'option n ° 2 nécessite le
'com.google.android.material:material:1.1.0'.
Ancienne bibliothèque de support:
Avec la nouvelle bibliothèque de support 28.0.0 , la bibliothèque de conception contient désormais le
MaterialButton
.Vous pouvez ajouter ce bouton à notre fichier de mise en page avec:
Par défaut, cette classe utilisera la couleur d'accentuation de votre thème pour la couleur d'arrière-plan remplie de boutons ainsi que le blanc pour la couleur du texte des boutons.
Vous pouvez personnaliser le bouton avec ces attributs:
app:rippleColor
: La couleur à utiliser pour l'effet d'entraînement du boutonapp:backgroundTint
: Utilisé pour appliquer une teinte à l'arrière-plan du bouton. Si vous souhaitez modifier la couleur d'arrière-plan du bouton, utilisez cet attribut au lieu d'arrière-plan.app:strokeColor
: La couleur à utiliser pour le coup de boutonapp:strokeWidth
: La largeur à utiliser pour la course du boutonapp:cornerRadius
: Utilisé pour définir le rayon utilisé pour les coins du boutonla source
Voici un exemple qui vous aidera à appliquer le style de bouton de manière cohérente dans votre application.
Voici un exemple de thème que j'ai utilisé avec les styles spécifiques.
C'est ainsi que j'ai défini la forme et les effets du bouton dans le dossier res / drawable-v21 ...
Les coins 2dp doivent être cohérents avec le thème du matériau.
la source
A côté
android.support.design.button.MaterialButton
( qui a mentionné par Gabriele Mariotti ),Il existe également un autre
Button
widget appelécom.google.android.material.button.MaterialButton
qui a différents styles et s'étend deAppCompatButton
:Rempli, élevé
Button
(par défaut) :Rempli, sans niveau
Button
:Texte
Button
:Icône
Button
:Un texte
Button
avec une icône ::Lire: https://material.io/develop/android/components/material-button/
la source
app:backgroundTint
&app:backgroundTintMode
de la documentation .J'ai essayé beaucoup de réponses et de bibliothèques tierces, mais aucune ne gardait la frontière et augmentait l'effet sur la pré-sucette tout en ayant l'effet d'entraînement sur la sucette sans inconvénient. Voici ma solution finale combinant plusieurs réponses (bordure / relief n'est pas bien rendu sur les gifs en raison de la profondeur de couleur en niveaux de gris):
Sucette
Pré-sucette
build.gradle
layout.xml
drawable-v21 / btn_bg.xml
drawable / btn_bg.xml
Activité onCreate
la source
1) Vous pouvez créer un bouton de coin arrondi en définissant le dessin xml et vous pouvez augmenter ou diminuer le rayon pour augmenter ou diminuer la rondeur du coin du bouton. Définissez ce fichier XML comme arrière-plan du bouton.
2) Pour modifier l'ombre par défaut et l'animation de transition d'ombre entre les états des boutons, vous devez définir le sélecteur et l'appliquer au bouton à l'aide de la propriété android: stateListAnimator. Pour une référence complète de personnalisation des boutons: http://www.zoftino.com/android-button
la source
Je viens de créer une bibliothèque Android, qui vous permet de modifier facilement la couleur du bouton et la couleur de l'ondulation
https://github.com/xgc1986/RippleButton
Vous n'avez pas besoin de créer un style pour chaque bouton que vous souhaitez avec une couleur différente, vous permettant de personnaliser les couleurs au hasard
la source
rippleColor has already been defined
vous pouvez donner de l'aviation à la vue en y ajoutant un axe z et y avoir une ombre par défaut. cette fonctionnalité a été fournie dans l'aperçu L et sera disponible après sa sortie. Pour l'instant, vous pouvez simplement ajouter une image qui donne ce look pour l'arrière-plan du bouton
la source