Android Buttons styled with Material Design


Example

The AppCompat Support Library defines several useful styles for Buttons, each of which extend a base Widget.AppCompat.Button style that is applied to all buttons by default if you are using an AppCompat theme. This style helps ensure that all buttons look the same by default following the Material Design specification.

In this case the accent color is pink.

  1. Simple Button: @style/Widget.AppCompat.Button

    Simple Button Image

    <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. Colored Button: @style/Widget.AppCompat.Button.Colored
    The Widget.AppCompat.Button.Colored style extends the Widget.AppCompat.Button style and applies automatically the accent color you selected in your app theme.

    Colored Button Image

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

    If you want to customize the background color without changing the accent color in your main theme you can create a custom theme (extending the ThemeOverlay theme) for your Button and assign it to the button's android:theme attribute:

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

    Define the theme in res/values/themes.xml:

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

    Borderless Button Image

    <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. Borderless Colored Button: @style/Widget.AppCompat.Button.Borderless.Colored

    Borderless Colored Button Image

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