Android material design buttons - Pre lollipop

Question

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

Answer 1

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

Answer 2

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.

Answer 3

You 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.

Answer 4

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.

Answer 5

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"

Answer 6

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)!

Answer 7

You asked for material design buttons Library - you got it - https://github.com/navasmdc/MaterialDesignLibrary

Answer 8

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>