Android custom material design round button

This is a RelativeLayout wrapping a TextView in it. The RelativeLayout has a selector for stateListAnimator and a selector for the background. It will produce a material design effects, a round button similar to

<RelativeLayout
    android:id="@+id/ib_more_info"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_margin="10dp"
    android:clickable="true"
    android:stateListAnimator="@drawable/info_icon_state_selector"
    android:elevation="2dp"
    android:background="@drawable/info_icon_selector">
    <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="i"
        android:textStyle="bold"
        android:textSize="20sp"
        android:textColor="#fff"/>
</RelativeLayout>

The selector for the stateListAnimator, info_icon_state_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="2dp"
            android:valueTo="4dp"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="4dp"
            android:valueTo="2dp"
            android:valueType="floatType" />
    </item>
</selector>

The selector for the background, info_icon_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:state_pressed="true" android:drawable="@drawable/info_icon_pressed"/>
    <item android:state_activated="true" android:drawable="@drawable/info_icon_pressed"/>
    <item android:state_selected="true" android:drawable="@drawable/info_icon_pressed"/>
    <item android:state_focused="true" android:drawable="@drawable/info_icon_pressed"/>

    <!-- When not selected -->
    <item android:drawable="@drawable/info_icon"/>
</selector>

The normal background, info_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#a5e6d5"/>
    <corners android:radius="30dp"/>
</shape>

The background when pressed, info_icon_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#09f4b7"/>
    <corners android:radius="30dp"/>
</shape>

Search within Codexpedia

Custom Search

Search the entire web

Custom Search