This article will show you two examples. One is a Tab example which is implemented by an android selector and layer-list drawable object. The other is a shadow button implemented by layer-list.
1. Android Tab Example.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/og8YSDH00bQ
- This example includes three radio buttons.
- Each radio button uses a selector background.
- When you click a radio button, a blue color line will be shown at the button bottom.
1.1 radio_button_tab_selector.xml
- This is the selector XML file. It is saved in the app/res/drawable folder.
- There are two items in the selector XML file, one for the radio button checked, the other for the radio button unchecked.
- In each item, there is a layer-list drawable object.
- The layer list has two layers. The top layer will override the bottom layer.
- When the radio button is checked, the top layer bottom shift 5 dp, so the 5dp height blue line appear.
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--If radio button is checked. --> <item android:state_checked="true"> <layer-list> <!-- Bottom blue color layer. --> <item> <color android:color="@color/colorBlue" /> </item> <!-- Top orange color layer. --> <item android:bottom="5dp" android:drawable="@color/colorOrange" /> </layer-list> </item> <!--If radio button is unchecked. --> <item android:state_checked="false"> <layer-list> <!-- Bottom blue color layer. --> <item> <color android:color="@color/colorBlue" /> </item> <!-- Top orange color layer. --> <item android:bottom="0dp" android:drawable="@color/colorOrange"/> </layer-list> </item> </selector>
1.2 activity_layer_list_tab_shadow_button.xml
- This is the layout XML file. It is saved in the app/res/layout folder. There is a RadioGroup which contains three RadioButton.
- Plesae note the below RadioButton properties.
- android:gravity=”center” : This make button text be shown at the center.
- android:button=”@null” : This make button circle disappear.
- android:background=”@drawable/radio_button_tab_selector” : This make the button background use the selector defined above.
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" tools:layout_editor_absoluteY="8dp" tools:layout_editor_absoluteX="8dp"> <RadioGroup android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:minHeight="50dp" android:layout_marginTop="10dp"> <RadioButton android:id="@+id/radioButtonTab1" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" android:text="Java" android:gravity="center" android:textSize="20dp" android:button="@null" android:background="@drawable/radio_button_tab_selector"/> <RadioButton android:id="@+id/radioButtonTab2" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" android:text="Android" android:gravity="center" android:textSize="20dp" android:button="@null" android:background="@drawable/radio_button_tab_selector"/> <RadioButton android:id="@+id/radioButtonTab3" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" android:text="JavaEE" android:gravity="center" android:textSize="20dp" android:button="@null" android:background="@drawable/radio_button_tab_selector"/> </RadioGroup> </LinearLayout>
1.3 LayerListTabShadowButtonActivity.java
- LayerListTabShadowButtonActivity.java
package com.dev2qa.example; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class LayerListTabShadowButtonActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_layer_list_tab_shadow_button); setTitle("dev2qa.com - Layer List Tab, Shadow Button Example."); } }
2. Android Shadow Button Example.
2.1 shadow_button_layer_list.xml
- This file defined the layer-list used for the above button. It is saved in the app/res/drawable folder.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Gray shadow. --> <item android:left="3dp" android:top="5dp"> <shape> <solid android:color="@android:color/darker_gray" /> <corners android:radius="15dp" /> </shape> </item> <!-- White foreground. --> <item android:bottom="5dp" android:right="3dp"> <shape> <solid android:color="@android:color/white" /> <corners android:radius="15dp" /> </shape> </item> </layer-list>
2.2 Layout XML File.
- Below is the example layout XML file content for this button.
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:width="200dp" android:layout_gravity="center" android:text="Shadow Button" android:background="@drawable/shadow_button_layer_list"/>