How to add bottom shadow to tab layout or Toolbar in android
This is a Great option to add shadow below Toolbar
Add a view
below the tablayout
of your desired layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="@color/splashGreenTop"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="@+id/tab_layout"
android:background="@drawable/toolbar_dropshadow" />
<FrameLayout
android:layout_width="match_parent"
android:layout_below="@+id/tab_layout"
android:id="@+id/tabContainer"
android:layout_height="match_parent" />
</RelativeLayout>
then create a xml
in drawable like this
@drawable/toolbar_dropshadow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="@android:color/transparent"
android:endColor="#88333333"
android:angle="90"/>
</shape>
Change the startcolor
and endcolor
as u want to apply
Just add elevation to your Tablayout
(0dp - 25dp). Read the material design guidelines for more information about elevation.
android:elevation="10dp"
EDIT:
add it to both your tablayout and toolbar
<android.support.v7.widget.Toolbar xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="@color/splashGreenTop"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:elevation="10dp" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_below="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="10dp"/>
You can add TabLayout as a child in AppBarLayout which has a shadow by default or you can specify the shadow depth by app:elevation="xdp"
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="xdp">
<android.support.v7.widget.Toolbar
...
/>
<android.support.design.widget.TabLayout
...
/>
</android.support.design.widget.AppBarLayout>