Android Styles de boutons de conception de matériaux
Je suis confus sur les styles de boutons pour la conception des matériaux. Je voudrais obtenir des boutons en relief colorés comme dans le lien ci-joint, comme les boutons "arrêt forcé" et "désinstaller" dans la section 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 trouvé les styles de boutons 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 de fond du bouton en ajoutant
Android:background="@color/primary"
tous les styles disparaissent, tels que l’animation tactile, les ombres, les coins arrondis, etc.
J'ajouterai ma réponse puisque je n'utilise aucune des autres réponses fournies.
Avec la bibliothèque de support technique v7, tous les styles sont en fait déjà définis et prêts à être utilisés. 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 toute l'application:
La couleur de toutes les commandes de l'interface utilisateur (non seulement les boutons, mais également les boutons d'action flottante, 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:
<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 en héritant d'un des styles parent décrits ci-dessus. Dans l'exemple ci-dessous, je viens de changer les couleurs de fond 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>
Ensuite, il vous suffit 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 présentation, ajoutez cette ligne au thème styles.xml:
<item name="buttonStyle">@style/btn</item>
où @style/btn est le thème de votre bouton. Ceci définit le style de bouton pour tous les boutons dans une disposition 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: utilisez un espace de noms d'application dans votre fichier XML de présentation
<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 ceci:
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>
En plus de tilisation du didacticiel Thème Matéria .
La variante animée est ici .
Voici comment j'ai obtenu ce que je voulais.
D'abord, faites un bouton (dans 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, en tant que dessinable 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 cherchais.
Avec la version stable de Android Material Components en novembre 2018, Google a déplacé les composants matériels de l'espace de noms
Android.support.designverscom.google.Android.material.
Bibliothèque de composants matériels 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 vérifier les documentation complète ici et API ici .
Pour changer la couleur de fond , vous avez 2 options.
- Utilisation de l'attribut
backgroundTint.
Quelque chose comme:
<style name="MyButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">@color/button_selector</item>
//..
</style>
- 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 le nouvel attribut
materialThemeOverlay.
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 version Support Library 28.0. , la bibliothèque de conception contient désormais 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'accent de votre thème pour la couleur d'arrière-plan remplie de boutons ainsi que le blanc pour la couleur de texte des boutons.
Vous pouvez personnaliser le bouton avec ces attributs:
app:rippleColor: La couleur à utiliser pour l'effet d'ondulation 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 de l'arrière-plan.app:strokeColor: La couleur à utiliser pour le tracé du boutonapp:strokeWidth: La largeur à utiliser pour le traitapp: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>
Voici comment 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 rester cohérents avec le thème Material.
À côté de _Android.support.design.button.MaterialButton_ (mentionné par Gabriele Mariotti),
Il existe également un autre widget Button appelé (com.google.Android.material.button.MaterialButton qui a des styles différents 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 élévation Button: 
_style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
_ Texte Button: 
_style="@style/Widget.MaterialComponents.Button.TextButton"
_ Icône Button: 
_style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this
_ Un texte Button avec une icône: : 
Lire: https://material.io/develop/Android/components/material-button/
Une classe de commodité pour la création d'un nouveau bouton Matériau.
Cette classe fournit les styles de matériau mis à jour pour le bouton dans le constructeur. Le widget affiche les styles de matériau 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 conservait la bordure et augmentait l'effet sur les pré-Lollipop tout en ayant l'effet d'entraînement sur Lollipop sans inconvénient. Voici ma solution finale combinant plusieurs réponses (les bordures/reliefs ne sont pas bien rendus sur les gifs en raison de la profondeur de couleur en niveaux de gris):
Lollipop
Pre-Lollipop
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>
onCreate de l'activité
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 xml drawable et vous pouvez augmenter ou diminuer le rayon pour augmenter ou diminuer l’arrondi du coin du bouton. Définissez cette xml dessinable 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'animation par défaut d'ombre et 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 à la 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 de votre choix avec une couleur différente, ce qui vous permet de personnaliser les couleurs de manière aléatoire.
vous pouvez donner à l'aviation de la vue en y ajoutant l'axe z et avoir l'ombre par défaut. cette fonctionnalité a été fournie dans L preview et sera disponible après sa sortie. Pour l'instant, vous pouvez simplement ajouter une image qui donne cette apparence pour le fond du bouton