androidxmlandroid-imageviewshadowlayer-list

Drop shadow for custom imageView

I have created a simple play icon. I imported the SVG file into Android Studio and sourced it as an imageView. However, unfortunately I was unable to bring over the drop down shadow from my Adope XD document. In either case I have been trying to replicate the drop down shadow effect via code. However I have been unsuccessful.

The image on the left is what I have, the image on the right is what I need: enter image description here

I've been messing around with existing code with no success. Here is what I have so far:

imageView:

<ImageView
    android:id="@+id/thumbnail_next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:background="@drawable/background_drop_shadow"
    app:srcCompat="@drawable/ic_next_button_image_select" />

ic_next_button_image_select (imported SVG):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="38dp"
    android:viewportWidth="40"
    android:viewportHeight="38">
  <path
      android:pathData="M12,0L28,0A12,12 0,0 1,40 12L40,26A12,12 0,0 1,28 38L12,38A12,12 0,0 1,0 26L0,12A12,12 0,0 1,12 0z"
      android:fillColor="#1ed760"/>
  <path
      android:pathData="M27.6,17.28a2,2 0,0 1,-0 3.439l-10.083,5.987A2,2 0,0 1,14.5 24.987L14.5,13.013a2,2 0,0 1,3.021 -1.72Z"
      android:fillColor="#090909"/>
</vector>

background_drop_shadow (code I found and tried to work with):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#02000000" android:width="1dp"  />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#05000000" android:width="1dp" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#10000000" android:width="1dp" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#15000000" android:width="1dp" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#20000000" android:width="1dp" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#25000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#30000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@android:color/transparent" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

Solution

  • To achieve this you should use CardView. So it will be something like:

    <FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#687199"
    >

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardCornerRadius="40dp"
        app:cardElevation="16dp"
        >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/test"
            />
    </androidx.cardview.widget.CardView>

</FrameLayout>

    Example

    You just need to play around with app:cardElevation and app:cardCornerRadius to get the shadow you need.

    Also, keep in mind that the Android shadow system draws darker and longer shadows when objects are closer to the bottom of the screen.