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.
<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>
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.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<corners android:radius="16dp" />
</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>
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.
Below example shows how to create custom view outline provider. It provides round cornered rectangle outline for the view it is set to.
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);
}
}
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);
}
}
<?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>