Android Boutons stylisés avec Material Design


Exemple

La bibliothèque de prise en charge AppCompat définit plusieurs styles utiles pour les boutons , chacun d'entre eux Widget.AppCompat.Button style de base Widget.AppCompat.Button appliqué à tous les boutons par défaut si vous utilisez un thème AppCompat . Ce style permet de garantir que tous les boutons se ressemblent par défaut, conformément à la spécification de conception de matériau .

Dans ce cas, la couleur d'accent est rose.

  1. Bouton simple: @style/Widget.AppCompat.Button

    Image de bouton simple

    <Button
        style="@style/Widget.AppCompat.Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp" 
        android:text="@string/simple_button"/>
    
  1. Bouton de couleur: @style/Widget.AppCompat.Button.Colored
    Le style Widget.AppCompat.Button.Colored étend le style Widget.AppCompat.Button et applique automatiquement la couleur d'accentuation sélectionnée dans le thème de votre application.

    Image de bouton de couleur

    <Button
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp" 
        android:text="@string/colored_button"/>
    

    Si vous souhaitez personnaliser la couleur d'arrière-plan sans modifier la couleur d'accent de votre thème principal, vous pouvez créer un thème personnalisé (étendant le thème ThemeOverlay ) pour votre Button et l'affecter à l'attribut android:theme du bouton:

    <Button  
         style="@style/Widget.AppCompat.Button.Colored"  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content" 
         android:layout_margin="16dp"
         android:theme="@style/MyButtonTheme"/> 
    

    Définissez le thème dans res/values/themes.xml :

     <style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light"> 
          <item name="colorAccent">@color/my_color</item> 
     </style>
    
  2. Bouton sans bordure: @style/Widget.AppCompat.Button.Borderless

    Image de bouton sans bordure

    <Button
        style="@style/Widget.AppCompat.Button.Borderless"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp" 
        android:text="@string/borderless_button"/>
    
  1. Bouton de couleur sans bordure: @style/Widget.AppCompat.Button.Borderless.Colored

    Image de bouton de couleur sans bordure

    <Button
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp" 
        android:text="@string/borderless_colored_button"/>