Android Tab, Shadow Button Example

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

1. This example includes three radio buttons.
2. Each radio button uses a selector background.
3. When you click a radio button, a blue color line will be shown at the button bottom.

1.1 radio_button_tab_selector.xml

1. This is the selector XML file. It is saved in the app/res/drawable folder.
2. There are two items in the selector XML file, one for the radio button checked, the other for the radio button unchecked.
3. In each item, there is a layer-list drawable object.
4. The layer list has two layers. The top layer will override the bottom layer.
5. 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

1. This is the layout XML file. It is saved in the app/res/layout folder. There is a RadioGroup which contains three RadioButton.
2. Plesae note the below RadioButton properties.
3. android:gravity=”center” : This make button text be shown at the center.
4. android:button=”@null” : This make button circle disappear.
5. 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

1. 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

1. 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.

1. 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"/>