Styles de boutons de conception de matériaux Android

308

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.

xsorifc28
la source
Je vais être le plus utile dans le bouton personnalisé angrytools.com/android/button
Kharak

Réponses:

750

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:

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

Widget.AppCompat.Button: entrez la description de l'image ici

Widget.AppCompat.Button.Colored: entrez la description de l'image ici

Widget.AppCompat.Button.Borderless entrez la description de l'image ici

Widget.AppCompat.Button.Borderless.Colored: entrez la description de l'image ici


Pour répondre à la question, le style à utiliser est donc

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

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 colorAccentcomme expliqué ici . Vous pouvez modifier ce style et appliquer votre propre couleur dans la définition de votre thème:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

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:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/Red</item>
    <item name="android:textColor">@color/White</item>
</style>

Il vous suffit ensuite d'appliquer ce nouveau style sur le bouton avec:

android:theme="@style/AppTheme.Button"

Pour définir une conception de bouton par défaut dans une mise en page, ajoutez cette ligne au thème styles.xml:

<item name="buttonStyle">@style/btn</item>

@style/btnest 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écifique

Yoann Hercouet
la source
6
Je pense que c'est en fait la meilleure façon de le faire dès maintenant.
xsorifc28
5
L'avez-vous testé sur l'appareil Kitkat?
maohieng
14
colorButtonNormalattr ne fonctionne pas pour moi sur Android 4.1.2. Impossible de définir la couleur du bouton ( android:backgroundcasse le style de matériau du bouton).
Konstantin Konopko
2
@YoannHercouet sur quelle version Android vous avez fait ces images? Sur mes boutons Andro 4.1.2 et 4.4.2 avec style = ".. AppCompat.Button" ne sont pas relevés.
Grzegorz Dev
5
@konopko Si vous êtes comme moi, vous avez utilisé style=""au lieu de Android:theme=""changer pour ce dernier résolu ce problème pour moi
John Snow
84

Solution la plus simple


Étape 1: utilisez la dernière bibliothèque de support

compile 'com.android.support:appcompat-v7:25.2.0'

Étape 2: utilisez AppCompatActivity comme classe d'activité parent

public class MainActivity extends AppCompatActivity

Étape 3: utiliser l'espace de noms d'application dans votre fichier XML de mise en page

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

Étape 4: utilisez AppCompatButton au lieu de Button

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

entrez la description de l'image ici

Ehtesham Hasan
la source
7
Vous n'avez pas besoin de le spécifier, android.support.v7.widget.AppCompatButtoncar l'outil de génération l'utilise automatiquement lorsque vous le spécifiezButton
Mark
2
activer / désactiver fonctionnera-t-il automatiquement? ou nous devons spécifier à nouveau des styles pour cela?
Sundeep1501
Cela supprime la liste des états sur la pré-sucette pour moi, ce qui entraîne un bouton sans aucun effet de clic
Florian Walther
Semble fonctionner sur Android P, sauf qu'il textColorremplace la couleur du texte pour l' état désactivé .
l33t
@ Sundeep1501 N'a pas changé en gris pour Widget.MaterialComponents.Button.OutlinedButton, au moins.
Dr.jacky
66

Si je vous comprends bien, vous voulez faire quelque chose comme ça:
entrez la description de l'image ici

Dans ce cas, il devrait suffire d'utiliser:

<item name="android:colorButtonNormal">#2196f3</item>

Ou pour une API inférieure à 21:

<item name="colorButtonNormal">#2196f3</item>

Outre l' utilisation du didacticiel sur le thème des matériaux .

La variante animée est ici .

AlexKorovyansky
la source
1
@androiddeveloper a poussé l'échantillon vers GitHub, le truc principal est ici - github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/… ,
AlexKorovyansky
Je pense que vous devez utiliser la bibliothèque compat pour les anciennes versions.
AlexKorovyansky
2
Ce n'est pas le cas, mais vous pouvez le définir au cas où l'API est supérieure ou égale à 21. J'ai trouvé un moyen, mais je ne sais pas quelle est la meilleure façon de le faire.
développeur Android
4
puis-je avoir plusieurs couleurs avec cette approche? semble qu'il ne permet qu'un à la fois.
gerfmarquez
2
@gerfmarquez U a besoin de tk a différents styles pour différents boutons
KISHORE_ZE
39

Voici comment j'ai obtenu ce que je voulais.

D'abord, fait un bouton (dedans styles.xml):

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

L'ondulation et l'arrière-plan du bouton, comme un dessin primary_round.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Cela a ajouté l'effet d'entraînement que je recherchais.

xsorifc28
la source
3
Le rayon de coin doit être de 2dp pour correspondre aux actifs du cadre. De plus, translationZ ne doit pas être défini en XML et il n'est pas nécessaire de remplacer l'élévation par défaut, minWidth, minHeight ou margin.
alanv
La marge par défaut devient 0 lorsqu'un style personnalisé est appliqué, pour une raison quelconque, les propriétés ne sont pas héritées.
xsorifc28
3
Ah, je n'ai pas remarqué qu'il te manque un style parent. Vous devez ajouter parent = "Widget.Material.Button" ou simplement ignorer la création d'un style personnalisé et définir l'arrière-plan du bouton lui-même.
alanv
Oh! Je ne savais pas que cela existait, je ne l'ai rencontré dans aucune documentation. Je vais essayer ça.
xsorifc28
Cependant, je ne sais pas comment je dois le faire sans style personnalisé. Pourriez-vous me montrer un exemple?
xsorifc28
33

Avec la sortie stable d'Android Material Components en novembre 2018, Google a déplacé les composants matériels de l'espace de noms android.support.designvers com.google.android.material.
La bibliothèque de composants de matériau remplace la bibliothèque de support de conception d'Android.

Ajoutez la dépendance à votre build.gradle:

dependencies { implementation com.google.android.material:material:1.0.0 }

Ajoutez ensuite le MaterialButtonà votre mise en page:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

Vous pouvez consulter la documentation complète ici et l' API ici .

Pour changer la couleur d'arrière - plan, vous avez 2 options.

  1. Utilisation de l' backgroundTintattribut.

Quelque chose comme:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. Ce sera la meilleure option à mon avis. Si vous souhaitez remplacer certains attributs de thème d'un style par défaut, vous pouvez utiliser un nouvel materialThemeOverlayattribut.

Quelque chose comme:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

L'option n ° 2 nécessite le 'com.google.android.material:material:1.1.0'.

entrez la description de l'image icientrez la description de l'image ici

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:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

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 bouton
  • app: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 bouton

  • app:strokeWidth: La largeur à utiliser pour la course du bouton
  • app:cornerRadius: Utilisé pour définir le rayon utilisé pour les coins du bouton
Gabriele Mariotti
la source
android.support.design.button.MaterialButton ne semble pas se compiler
IgorGanapolsky
3
@IgorGanapolsky Vous avez raison. Je viens de mettre à jour la réponse avec la version stable.
Gabriele Mariotti
20

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.

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

C'est ainsi que j'ai défini la forme et les effets du bouton dans le dossier res / drawable-v21 ...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Les coins 2dp doivent être cohérents avec le thème du matériau.

samkya
la source
6
Rétrocompatible?
Skynet
Désolé, je suis en retard pour répondre cependant, ce n'est pas rétrocompatible car les thèmes ont été introduits assez tard.
samkya
18

A côté android.support.design.button.MaterialButton( qui a mentionné par Gabriele Mariotti ),

Il existe également un autre Buttonwidget appelé com.google.android.material.button.MaterialButtonqui a différents styles et s'étend de AppCompatButton:

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Rempli, élevé Button(par défaut) :entrez la description de l'image ici

style="@style/Widget.MaterialComponents.Button"

Rempli, sans niveauButton :entrez la description de l'image ici

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

TexteButton : entrez la description de l'image ici

style="@style/Widget.MaterialComponents.Button.TextButton"

IcôneButton : entrez la description de l'image ici

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

Un texte Buttonavec une icône ::entrez la description de l'image ici


Lire: https://material.io/develop/android/components/material-button/

Une classe de commodité pour créer un nouveau bouton Matériel.

Cette classe fournit des styles de matériaux mis à jour pour le bouton dans le constructeur. Le widget affichera les styles de matériaux par défaut corrects sans utiliser l'indicateur de style.

ʍѳђ ઽ ૯ ท
la source
1
Savez-vous comment pouvez-vous en changer la couleur?
Daniel Gomez Rico
1
app:backgroundTint& app:backgroundTintModede la documentation .
ʍѳђ ઽ ૯ ท
comment ils attribuent la couleur de l'état désactivé
Zaid Mirza
6

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

entrez la description de l'image ici

Pré-sucette

entrez la description de l'image ici

build.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-v21 / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

drawable / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

Activité onCreate

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });
Rémy DAVID
la source
Je cherchais un exemple complet, surpris que cela ne soit pas voté plus haut - merci.
XMAN
4

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.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

bouton de coin arrondi

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

Arnav Rao
la source
1

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

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

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

xgc1986
la source
1
La bibliothèque génère une erreur rippleColor has already been defined
:,
0

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

Suhail Mehta
la source
Je vois. Je dois alors le faire manuellement. Comment pourrais-je ajouter l’effet tactile radial? Juste un effet de transition pour le bouton?
xsorifc28