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
Related Posts