Material design buttons appear smoother and with more shadow

Question

I'm trying to recreate the buttons from the material design guidelines. I'm closing in on the look but i cant seem to get them completely right. I have attached a picture to better explain the difference. The bottom pair is from the material design guidelines. There seem to be more shadow all across, and they appear smoother with rounded corners. Can anyone help? Thanks in advance.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/buttonTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        style="@style/buttonTest1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/buttonTest"
        android:layout_toEndOf="@id/buttonTest"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:textColor="@color/colorWhite"
        style="@style/buttonTest2" />

</RelativeLayout>

styles.xml

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryColorDark</item>
        <item name="colorAccent">@color/accentColor</item>
    </style>

    <style name="buttonTest1" parent="android:style/Widget.Material.Button">
        <item name="android:background">@drawable/button1_background</item>
    </style>

    <style name="buttonTest2" parent="android:style/Widget.Material.Button">
        <item name="android:background">@drawable/button2_background</item>
    </style>

</resources>

button2_background.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@color/colorRedTest"/>
</ripple>

Answer 1

Eventually solved my problem using a state list animator. For the rounded corners i used Rishad Appat's solution. I provided some xml-codes below. Just apply the style buttonTest1 to your button, and it should work.

styles.xml

<style name="buttonTest1" parent="android:style/Widget.Material.Button">
    <item name="android:background">@drawable/button1_background</item>
    <item name="android:stateListAnimator">@anim/buttons_state_list_animator</item>
</style>

buttons_state_list_animator.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <set>
            <objectAnimator
                android:propertyName="translationZ"
                android:duration="@integer/button_duration"
                android:valueTo="@dimen/button_rise"
                android:valueType="floatType" />
            <objectAnimator
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="@dimen/button_elevation"
                android:valueType="floatType" />
        </set>
    </item>

    <item
        android:state_enabled="true">
        <set>
            <objectAnimator
                android:propertyName="translationZ"
                android:duration="@integer/button_duration"
                android:valueTo="0"
                android:startDelay="@integer/button_duration"
                android:valueType="floatType" />
            <objectAnimator
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="@dimen/button_elevation"
                android:valueType="floatType" />
        </set>
    </item>

    <item>
        <set>
            <objectAnimator
                android:propertyName="translationZ"
                android:duration="0"
                android:valueTo="0"
                android:valueType="floatType" />
            <objectAnimator
                android:propertyName="elevation"
                android:duration="0"
                android:valueTo="0"
                android:valueType="floatType" />
        </set>
    </item>

</selector>

button1_background.xml

<ripple android:color="?attr/colorControlHighlight" xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_background"></item>
</ripple>

button_background.xml, as provided by Rishad Appat

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorBackgroundTest" />
<corners android:radius="2dp" />
</shape>

Answer 2

create a drawable like this and put this as button background...

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/BACKGROUND_COLOR" />
<corners android:radius="6dp" />
</shape>

and add

 android:elevation="30dp"

to your button