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

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

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

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

Solution 4

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"

Solution 5

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.

View more solutions

Comments

[rickyalbert]

Where do you use this xml? In drawable folder?

[rickyalbert]

Thank you and sorry for this late answer. Is there a way to achieve the same result with Support Library? I inherited my theme from Theme.AppCompat.Light.DarkActionBar and in Android Studio I can see the raised but I want, but when I run the app on my phone (api 17) I see the usual button

[thanosChatz]

Yep,name it for example myRaisedButton.xml and access it from your layout with android:background="@drawable/myRaisedButton"

[rickyalbert]

Thank you, it works! I had to delete the last line because I got an exception, how can I fix it? Sorry but I still have problems working with styles in xml

[rickyalbert]

Yes I did that, but I get this exception if I don't delete the last line: "Binary XML file line #10: <item> tag requires a 'drawable' attribute or child tag defining a drawable"

[thanosChatz]

Hmm, please check my edited solution, and make sure that in your layout you have android:background=".." and not android:drawable=".."

[Gabriel]

Sorry, ripple effects and elevation aren't supported in the support library. What I'd recommend doing is using flat buttons with the same color styles pre 5.0 and having v21 resource files so 5.0+ will be able to use the additional effects. If you still want to use ripple effects, there are a few libraries that will add it, and you can manually add shadow effects to buttons to give the "raised" effect, but it would be a lot of work to get the raising/lowering animation on button press. Ripple effect libraries: github.com/traex/RippleEffect github.com/siriscac/RippleView

[Gabriel]

Fantastic, and it supports back to API level 11.

[android developer]

Why did you make the styles.xml files to both point to the same style ("AppTheme.Base") ? I don't see the added functionality here...

[Steve M]

This code generates an exception and does not create a raised button.

[android developer]

Any way of making the raised-button style work on pre-lollipop? Even a fake style?

[kiruwka]

Man, this is awesome. How to include your aar lib via gradle ?

[kiruwka]

I wonder, how stable is it for using in real-life app ? did you have any crashes related to buttons : shadows/ripples? Thanks

[Zielony]

I'm testing it on real project and doing my best to make it work. The library is under heavy developement, I'm trying to fix all reported bugs in 24h. In most cases the library doesn't crash, but rather produce animation glitches or just lag. For now two biggest issues are 1. lack of rendering thread (introduced in Lollipop) and 2. compatibility with all GPUs and UIs (for example TouchWiz used in Galaxy series). If You have any other questions, You'd like to ask for a feature or report a bug, feel free to contact me. I've just updated the 'About' page on my blog to make it easier.

[Shine]

style="?android:attr/borderlessButtonStyle" is not an appCompat style. Your answer is valid only for API > 11

[ViliusK]

Disabled/Enabled states look the same. How to fix that?

[lostintranslation]

Why doesn't the flat (borderless) button pull the accent color style when using material design? Better to use buttonBarButtonStyle?

[Farbod Salamat-Zadeh]

@StephenKaiser How about the raised buttons?

[Michael Kazarian]

style="@style/Widget.AppCompat.Button.Borderless" when using the AppCompat library

[NightSkyDev]

This code is working great with appcompat-v7:23.4.0 library. Thanks for posting!

[pumpkinpie65]

@lostintranslation Because in the AppCompat Base Theme the 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.