Android View Shadow Effect

January 03, 2017 by Srinivas

Android UI elements can be configured to draw shadows using elevation property. Elevation of a view can be set in code by calling setElevation method and in xml using elevation attribute. Below picture shows text views with elevation and without elevation.

Elevation

 <TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/white"
    android:elevation="8dp"
    android:gravity="center"
    android:text="Show Elevation"></TextView>


<android.support.v4.widget.Space
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text=""></android.support.v4.widget.Space>

<TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/white"
    android:gravity="center"
    android:text="Without Elevation"></TextView>
 

Android View Elevation Shadow Shape

Outline object represents the shape of view shadows. Outline provider creates outline object that defines shadow shape. The default view outline provider treats background shape of a view as shadow shape. You can change this behavior by creating custom outline provider for views. Below picture shows change in shape of shadow with the change in background. When you set background of a view to round cornered image, elevation draws round cornered shadow.

custom_rect.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:radius="16dp" />
</shape>

Elevation shadow background shape

 <TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/custom_rect"
    android:elevation="2dp"
    android:gravity="center"
    android:text="Round Cornered Image Background"></TextView>


<android.support.v4.widget.Space
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text=""></android.support.v4.widget.Space>

<TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/white"
    android:elevation="2dp"
    android:gravity="center"
    android:text="Rectange Background"></TextView>
 

Android View Elevation Custom Shadow Shape

As learned above, default view outline provider draws shadows based on the background shape. If you want to draw shadows in a different way, you need to provide custom view outline provider. You can create custom view outline provider by extending ViewOutlineProvider class and overriding getOutline() method. Then set the custom outline provider to the view by using setOutlineProvider() method.

Custom ViewOutlineProvider Example

Below example shows how to create custom view outline provider. It provides round cornered rectangle outline for the view it is set to.

Activity

 package com.zoftino.materialdesign;


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.widget.TextView;

public class ShadowActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.shadow_activity);

        Toolbar myToolbar = (Toolbar) findViewById(R.id.z_toolbar);
        setSupportActionBar(myToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        TextView textView = (TextView) findViewById(R.id.shadow_txt);
        textView.setOutlineProvider(new ZoftinoCustomOutlineProvider(8));
        textView.setClipToOutline(true);
    }
}
 

Custom view outline provider

 package com.zoftino.materialdesign;


import android.graphics.Outline;
import android.view.View;
import android.view.ViewOutlineProvider;

public class ZoftinoCustomOutlineProvider extends ViewOutlineProvider {

    int roundCorner;

    public ZoftinoCustomOutlineProvider(int round) {
        roundCorner = round;
    }

    @Override
    public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), roundCorner);
    }
}
 

Layout

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/shadow_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.zoftino.materialdesign.ShadowActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/z_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"></android.support.v7.widget.Toolbar>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@android:color/white"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">


        <TextView android:id="@+id/shadow_txt"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:elevation="2dp"
            android:gravity="center"
            android:text="Round Cornered Shadow with Cutom Outline Provider"></TextView>

    </LinearLayout>
</LinearLayout>