Android: How to create exact material design shadow with XML drawable

Question

I would like to make an XMl drawable file that resembles as closely as possible to the material design elevation found on Lollipop and above. I currently have a shadow that does not even come close as I have no idea what gradient I'm suppose to use.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <gradient android:angle="90"
            android:endColor="@android:color/darker_gray" 
            android:startColor="#ccc" />
        <corners android:radius="0.1dp"
            android:bottomLeftRadius="3dp"
            android:bottomRightRadius="3dp"
            android:topLeftRadius="3dp"
            android:topRightRadius="3dp"/>
    </shape>
</item>
<item
    android:left="1.5dp"
    android:right="1.5dp"
    android:top="1.5dp"
    android:bottom="1.5dp">

    <shape android:shape="rectangle">

<solid android:color="@android:color/white" />

<corners
    android:radius="0.1dp"
    android:bottomLeftRadius="3dp"
    android:bottomRightRadius="3dp"
    android:topLeftRadius="3dp"
    android:topRightRadius="3dp" />
</shape>
</item>
</layer-list>

Can someone come up with a solution that is at least better than mine? Thank you.

In my case, I want the shadow of the search bar to look as closely to the first image as possible. — Lord Goderick, Jan 24 '17 at 04:58
read [this](https://material.io/guidelines/patterns/search.html#search-in-app-search) — Maveňツ, Jan 24 '17 at 05:09
@RoderickLord I think you are having problems with ripple and elevation effects,if that's true I think you cannot add them in drawable file. use xml where you have declared the searchview. and also use android.support.v7.widget.SearchView Also read the link maven mentioned in the comment above that will surely help you. — Umair, Jan 24 '17 at 05:12
Yes, I figured it out. I had an `AppBarLayout` which was interfering the whole time against the Toolbar layout so I just removed it completely and it's fine. — Lord Goderick, Jan 24 '17 at 06:28

score 0 · Answer 1 · answered Jan 24 '17 at 05:13

0

You need to define elevation in you layout resource file to drop shadow. in your layout.xml file it should look something like this

<TextView
    android:id="@+id/myview"
    android:elevation="2dp"
    android:background="@drawable/myrect" />

answered Jan 24 '17 at 05:13

nandish

41
4

1

OP is not asking for a `TextView` – Maveňツ Jan 24 '17 at 05:40

score 0 · Answer 2 · answered Aug 01 '19 at 16:22

For perfect shadow use CardView

Xamarin: MSDN Source

To add the Xamarin.Android.Support.v7.CardView package in Visual Studio

<android.support.v7.widget.CardView
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:local="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_margin="@dimen/shrine_grid_item_margin"
          android:orientation="vertical"
          local:cardElevation="@dimen/cardview_default_elevation">
<!-- Content Goes here-->
</android.support.v7.widget.CardView>

Or

Android: Android Devs Source

The CardView widget is part of the v7 Support Libraries. To use it in your project, add the following dependency to your app module's build.gradle file:

dependencies {
    implementation 'com.android.support:cardview-v7:28.0.0'
}

XXX

<androidx.cardview.widget.CardView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/ProductEntry"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="@dimen/shrine_grid_item_margin"
  android:orientation="vertical"
  app:cardElevation="@dimen/cardview_default_elevation">
<!-- Content Goes here-->
</androidx.cardview.widget.CardView>

Android: How to create exact material design shadow with XML drawable

2 Answers2