Buttons styled with Material Design

suggest change

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.

Simple Button: @style/Widget.AppCompat.Button

![Simple Button Image](http://i.stack.imgur.com/SHjLL.png)

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

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>

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

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

Found a mistake? Have a question or improvement idea? Let me know.

Table Of Contents