Updated Answer:
It is recommended that you rely on Google's appcompat library to backport material design styles to your app. It seems to no longer backport the raised button (instead using flat buttons), but still adequately backports a button that matches the material design style. It is my recommendation that you go with this approach.
If you still wish to backport the raised button effect, you will need to rely on a 3rd party material design library, or you can look at my old solution below using the CardView
and implement your own.
To setup the appcompat library with Google's official Material Design backport:
compile "com.android.support:appcompat-v7:+"
Then you need to set your application theme in your styles.xml
file.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
And in your AndroidManifest.xml
ensure the theme above is set properly:
<application
android:allowBackup="false"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="false"
android:theme="@style/AppTheme">
After the above setup, ensure all your Activity
's extend from AppCompatActivity
, and from there all your Button
s will be inflated with a Material Design style.
If you are using a custom Button
implementation in your project, ensure that instead of extending Button
, extend AppCompatButton
. That goes for most of your custom View
s: AppCompatTextView
, AppCompatEditText
, etc...
How does it work?
All of your Android xml layouts are inflated using something called a LayoutInflater
. The LayoutInflater
is provided by the Activity
, and has the option of having a LayoutInflaterFactory
provided to it so that you can override default implementations of standard Android widgets, like Button
and TextView
. When you use an AppCompatActivity
, it's providing you with a non-standard LayoutInflater
, which is inflating special instances of the widgets that support Material Design!
-------------------------------------------------
Old Answer:
-------------------------------------------------
So Android has given us the CardView to replicate such behavior. It provides a View with a rounded corners, that applies a drop shadow. You will probably also want to look at the #setCardElevation() method.
You can add the CardView Library to your Gradle Project:
compile 'com.android.support:cardview-v7:+'
The CardView will use the Lollipop implementation to do this if it's available (as Lollipops shadows are better), otherwise it will replicate it as best as it can.
Here is a sample:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#ffd9d9d9"
card_view:cardCornerRadius="2dp"
android:layout_margin="6dp"
card_view:cardElevation="6dp">
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="8.5dp"
android:paddingBottom="8.5dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textColor="#de000000"
android:fontFamily="sans-serif-medium"
android:text="NORMAL" />
</android.support.v7.widget.CardView>
The above code running on 5.0:
The above code running on 4.4.4:
It looks like there is a discrepancy in the fonts, as in the sans-serif-medium has a different font weight or isn't supported on 4.4.4, but that can be easily fixed by including the latest version of Roboto and overriding the fonts on the TextViews.
The material documentation you post point to an an "Elevated Button". CardView's are how we make "Elevated" anything.