How do I implement the "raised button" and the "flat button" as described in google's material design guidelines?
Raised buttons add dimension to mostly flat layouts. They emphasize > functions on busy or wide spaces.
Use flat buttons for toolbars and dialogs to avoid excessive layering.
Source: http://www.google.com/design/spec/components/buttons.html
This requires Android 5.0
Raised Button
Inherit your button style from Widget.Material.Button, and the standard elevation and raising action will automatically be applied.
<style name="Your.Button" parent="android:style/Widget.Material.Button"> <item name="android:background">@drawable/raised_button_background</item> </style> Then you need to create a raised_button_background.xml file with your button's background color inside a ripple tag:
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?attr/colorControlHighlight"> <item android:drawable="@color/button_color"/> </ripple> Flat Button
Edit: Instead of my previous advice for flat buttons, you should instead use follow the advice given by Stephen Kaiser below:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DONE" style="?android:attr/borderlessButtonStyle" /> Edit: If you are using Support Library, you can achieve the same result on Pre-Lollipop devices by using style="?attr/borderlessButtonStyle". (notice the absence of android:) The above example then becomes
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DONE" style="?attr/borderlessButtonStyle" /> 
borderlessButtonStyle is set to @style/Widget.AppCompat.Button.Borderless. If you want it to pull the accent color, set the borderlessButtonStyle in your Theme to @style/Widget.AppCompat.Button.Borderless.Colored.In order to implement the flat buttons, you could just add style="?android:attr/borderlessButtonStyle".
Example:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DONE" style="?android:attr/borderlessButtonStyle" /> Here's the reference for the attribute.
style="@style/Widget.AppCompat.Button.Borderless" when using the AppCompat libraryYou can use MaterialDesignLibrary. It's third party library.
This is a library with components of Android L to you use in android 2.2 If you want use this library, you only have to download MaterialDesign project, import it into your workspace and add the project as a library in your android project settings.
I'm working on a material compatibility library. The button class is there and supports animated shadows and the touch ripple. Maybe you will find it useful. Here's the link.
I use this as a background for a button with AppCompat and it depicts a raised button (with ripples n all), hope it helps.
myRaisedButton.xml - inside the drawable folder:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/yourColor"/> <corners android:radius="6dp"/> </shape> </item> <item android:drawable="?android:selectableItemBackground"/> </layer-list> styles.xml:
<resources> <style name="AppTheme" parent="AppTheme.Base"/> <style name="AppTheme.Base" parent="Theme.AppCompat"> </resources> styles.xml (v21):
... <style name="AppTheme" parent="AppTheme.Base"> layout.xml:
... android:background="@drawable/myRaisedButton" 
For a description of how to do this using the appcompat libray, check my answer to another question: https://stackoverflow.com/a/27696134/1932522
This will show how to make use of the raised and flat buttons for both Android 5.0 and earlier (up to API level 11)!
You asked for material design buttons Library - you got it - https://github.com/navasmdc/MaterialDesignLibrary
You may also need to add a bottom margin to your button, in order to be able to see the raised-button shadow effect:
<item name="android:layout_marginBottom">@dimen/activity_vertical_margin</item> <item name="android:elevation">1dp</item> 