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.

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:

Widget.AppCompat.Button.Colored:

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored:

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>

où @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

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"/>

Si je vous comprends bien, vous voulez faire quelque chose comme ça:

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 .

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.

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>

2. 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'.

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

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.

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) :

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

Rempli, sans niveauButton :

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

TexteButton :

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

IcôneButton :

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

Un texte Buttonavec une icône ::

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.

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

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;
        }
    });

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>

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

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

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