Android Tab, Shadow Button Example

This article will show you two examples. One is a Tab example which implemented by android selector and layer-list drawable object. The other is a shadow button implemented by layer-list.

1. Android Tab Example.

This example includes three radio button. Each radio button use a selector background. When you click a radio button, a blue color line will be shown in the button bottom.

android tab example

1.1 radio_button_tab_selector.xml

This is the selector xml file. It is saved in app / res / drawable folder. There are two items in it, one for radio button checked, the other for radio button unchecked.

In each item, there is a layer-list drawable object. The layer-list has two layer. Top layer will override bottom layer.

When 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 app / res / layout folder. There is a RadioGroup which contains three RadioButton.

Plesae Note Below RadioButton Properties.

  1. android:gravity=”center” : This make button text be shown at the center.
  2. android:button=”@null” : This make button circle disappear.
  3. 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

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.

android shadow button example

2.1 shadow_button_layer_list.xml

This file defined the layer-list used for above button. It is saved in 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.

<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"/>
(Visited 1,792 times, 9 visits today)
READ :   Android Shape, Selector Examples

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.