How to make an android raised button?

Question

Ii have been searching in web for a week or so to get an example or tutorial on how to make a coloured raised button but no luck.

I want the following to be implemented in my app for better User interface experience.

And i did come across with the card view but when you write a big program with lots of buttons in it, the xml code will get bigger just because of this card view.

So if there is any quick and simple solution to the following please let me know.

Thank you

updated

            Normal button 

and with color 

Solution 1

I think you actually want elevation in button. Don't use card as it require more resources. for lollipop devices use

<Button
    ...
    android:stateListAnimator="@anim/my_animator" />

and in anim folder in resources create my_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<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_pressed_animation_duration"
                            android:valueTo="@dimen/button_pressed_z_material"
                            android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="@dimen/button_elevation_material"
                            android:valueType="floatType"/>
        </set>
    </item>
    <!-- base state -->
    <item android:state_enabled="true">
        <set>
            <objectAnimator android:propertyName="translationZ"
                            android:duration="@integer/button_pressed_animation_duration"
                            android:valueTo="0"
                            android:startDelay="@integer/button_pressed_animation_delay"
                            android:valueType="floatType"/>
            <objectAnimator android:propertyName="elevation"
                            android:duration="0"
                            android:valueTo="@dimen/button_elevation_material"
                            android:valueType="floatType" />
        </set>
    </item>
    ...
</selector>

Solution 2

You can try this alternative: Create a xml in your drawable folder: cardlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="90"
                android:endColor="@color/background_gray" android:startColor="#ccc" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="1.5dp"
        android:top="0dp"
        android:bottom="1.5dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

Now any view (Button, ListRow or imageView) you want to elevate. Just set the background of that view using this cardlayout.

android:background="@drawable/cardlayout"

NB change the cardlayouts background color according to your need.

Solution 3

Check this out:-

<Button
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="60dp"
    android:text="Raised Color Button"
    android:textSize="15sp"
    android:backgroundTint="#1E9D96"
    android:textColor="@android:color/background_light" />