Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Material Flat Button Style
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:color="@color/flat_disabled_text"/>
<item android:color="@color/flat_normal_text"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="@dimen/btn_flat_corner_radius" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/flat_pressed">
<item
android:id="@android:id/mask"
android:drawable="@drawable/btn_flat_normal"/>
</ripple>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/flat_pressed" />
<corners android:radius="@dimen/btn_flat_corner_radius" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="@android:integer/config_mediumAnimTime"
android:enterFadeDuration="@android:integer/config_mediumAnimTime">
<item android:drawable="@drawable/btn_flat_pressed" android:state_pressed="true" />
<item android:drawable="@android:color/transparent" />
</selector>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/AppCompat.Button.Flat"
android:text="Button"/>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="flat_pressed">#66999999</color>
<color name="flat_disabled_text">#40000000</color>
<color name="flat_normal_text">#000000</color>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="btn_flat_corner_radius">1dp</dimen>
<dimen name="btn_flat_min_width">88dp</dimen>
<dimen name="btn_flat_min_height">36dp</dimen>
<dimen name="btn_flat_padding">8dp</dimen>
<dimen name="btn_flat_margin">4dp</dimen>
</resources>
<resources>
<style name="AppCompat.Button.Flat.Common" parent="Base.TextAppearance.AppCompat.Button">
<item name="android:background">@drawable/btn_flat_selector</item>
<item name="android:minWidth">@dimen/btn_flat_min_width</item>
<item name="android:minHeight">@dimen/btn_flat_min_height</item>
<item name="android:textColor">@color/btn_flat_selector</item>
<item name="android:textAllCaps">true</item>
<item name="android:textStyle">bold</item>
<item name="android:paddingLeft">@dimen/btn_flat_padding</item>
<item name="android:paddingRight">@dimen/btn_flat_padding</item>
<item name="android:layout_marginLeft">@dimen/btn_flat_margin</item>
<item name="android:layout_marginRight">@dimen/btn_flat_margin</item>
</style>
</resources>
@EugeneHoran

This comment has been minimized.

Copy link

commented Jan 6, 2016

Great example. I have been trying to make a flat solid color button rather than the transparent on versions >= 21 and and cant seem to find the solution. Would you know how to make a flat solid color button with the ripple on press? Thanks

@AndreiD

This comment has been minimized.

Copy link

commented Feb 4, 2016

there's a simpler way... but with less control over specifics:

    <item name="android:buttonStyle">@style/ButtonAppTheme</item>

  <style name="ButtonAppTheme" parent="@style/Widget.AppCompat.Button.Borderless">
    <item name="android:textColor">@color/your_color</item>
  </style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.