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.

raised buttons

Use flat buttons for toolbars and dialogs to avoid excessive layering.

flat buttons

Source: http://www.google.com/design/spec/components/buttons.html

Best solution http://stackoverflow.com/questions/1521640/standard-android-button-with-a-different-color/27316880#27316880 — Zar E Ahmer, Dec 05 '14 at 13:23
Possible duplicate of http://stackoverflow.com/questions/26346727/android-material-design-button-styles — rds, May 05 '15 at 11:30
Perhaps this should be a duplicate (I'm not clear). But this close reason is just wrong. — Yishai, Aug 10 '16 at 17:29

score 121 · Accepted Answer · edited Feb 11 '16 at 11:40

121

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

edited Feb 11 '16 at 11:40

Andrey Makarov

1,026
1
10
12

answered Nov 07 '14 at 21:34

Gabriel

2,279
1
20
17

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 – rickyalbert Nov 10 '14 at 13:45
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: https://github.com/traex/RippleEffect https://github.com/siriscac/RippleView – Gabriel Nov 11 '14 at 22:59
3

Any way of making the raised-button style work on pre-lollipop? Even a fake style? – android developer Dec 27 '14 at 20:29
2

Disabled/Enabled states look the same. How to fix that? – ViliusK Mar 23 '15 at 07:34
2

Why doesn't the flat (borderless) button pull the accent color style when using material design? Better to use buttonBarButtonStyle? – lostintranslation May 20 '15 at 01:23
1

@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`. – pumpkinpie65 Jul 01 '16 at 01:12

score 83 · Answer 2 · answered Nov 12 '14 at 01:31

83

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.

answered Nov 12 '14 at 01:31

Stephen Kaiser

1,545
14
10

3

Fantastic, and it supports back to API level 11. – Gabriel Nov 12 '14 at 07:22
@StephenKaiser How about the raised buttons? – Farbod Salamat-Zadeh Jul 20 '15 at 09:02
4

`style="@style/Widget.AppCompat.Button.Borderless"` when using the AppCompat library – Michael Kazarian May 26 '16 at 08:26

score 4 · Answer 3 · answered Jan 23 '15 at 11:31

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.

score 2 · Answer 4 · edited Apr 15 '15 at 13:10

2

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"

edited Apr 15 '15 at 13:10

rekaszeru

19,130
7
59
73

answered Nov 09 '14 at 22:18

thanosChatz

135
2
11

Where do you use this xml? In drawable folder? – rickyalbert Nov 10 '14 at 13:43
Yep,name it for example myRaisedButton.xml and access it from your layout with android:background="@drawable/myRaisedButton" – thanosChatz Nov 10 '14 at 13:51
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 Nov 10 '14 at 13:57
Yes I did that, but I get this exception if I don't delete the last line: "Binary XML file line #10: tag requires a 'drawable' attribute or child tag defining a drawable" – rickyalbert Nov 10 '14 at 14:02
Hmm, please check my edited solution, and make sure that in your layout you have android:background=".." and not android:drawable=".." – thanosChatz Nov 10 '14 at 14:10
1

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... – android developer Nov 17 '14 at 23:28
3

This code generates an exception and does not create a raised button. – Steve M Dec 13 '14 at 19:48
This code is working great with `appcompat-v7:23.4.0` library. Thanks for posting! – RickBoyerDev May 29 '16 at 09:08

score 2 · Answer 5 · answered Jan 03 '15 at 18:59

2

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.

answered Jan 03 '15 at 18:59

Zielony

16,239
6
34
39

Man, this is awesome. How to include your aar lib via gradle ? – kiruwka Jan 20 '15 at 06:14
I wonder, how stable is it for using in real-life app ? did you have any crashes related to buttons : shadows/ripples? Thanks – kiruwka Jan 20 '15 at 06:43
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. – Zielony Jan 20 '15 at 10:43

score 1 · Answer 6 · edited May 23 '17 at 12:17

1

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

edited May 23 '17 at 12:17

Community

1
1

answered Dec 30 '14 at 17:54

Peter

10,910
3
35
68

style="?android:attr/borderlessButtonStyle" is not an appCompat style. Your answer is valid only for API > 11 – Shine Feb 18 '15 at 15:55

score 1 · Answer 7 · edited Jan 23 '15 at 11:43

1

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

edited Jan 23 '15 at 11:43

Unihedron

10,902
13
62
72

answered Jan 15 '15 at 10:43

Inoy

1,065
1
17
24

score 0 · Answer 8 · answered Nov 29 '14 at 19:56

0

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>

answered Nov 29 '14 at 19:56

Ari Lacenski

631
12
18

Android material design buttons - Pre lollipop

8 Answers8

Linked