Трапециевидная тень в XML для Android

Question

Я хочу создать ящик тени для <RelativeLayout> для Android, как вы можете видеть на изображении ниже:

Тень-Рисуемое поле будет создано с <gradient> внутри, как показано ниже:

Я борюсь, потому что я пытаюсь сделать это страпециевидную форму для <RelativeLayout>, которая будет видна, когда она стоит на экране.

---

Вот мой код:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="#fff"
   tools:context=".LoginActivity">

   <RelativeLayout
       android:id="@+id/myRectangleView"
       android:layout_width="354dp"
       android:layout_height="239dp"
       android:layout_marginStart="30.5dp"
       android:layout_marginLeft="30.5dp"
       android:layout_marginTop="84dp"       
       android:background="@drawable/my_drawable"    
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">

       <ImageView
           android:layout_width="48dp"
           android:layout_height="48dp"
           android:layout_alignParentStart="true"
           android:layout_alignParentLeft="true"
           android:layout_alignParentTop="true"
           android:layout_marginStart="15dp"
           android:layout_marginLeft="15dp"
           android:layout_marginTop="15dp"           
           android:contentDescription="avatar"
           app:srcCompat="@mipmap/ic_launcher_round" />

   </RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

my_drawable.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list
   xmlns:android="http://schemas.android.com/apk/res/android">

   <!-- image shadow below can be use just fine-->
   <item
       android:drawable="@drawable/image_shadow">
   </item>

   <!-- drawn shadow below is what I want it to be trapezoidal shape -->
   <!-- right now it's a triangle, and I unsuccessfully tried to overlap it so it'd become trapezoid -->
   <item
       android:drawable="@drawable/drawn_shadow">
   </item>

   <item
       android:top="0dp"
       android:bottom="0dp">
       <shape
           android:shape="rectangle">
           <solid
               android:color="#d1d1d1"/>
           <stroke
               android:width="0.01dp"
               android:color="#9c9c9c"/>
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
   <item
       android:top="0dp"
       android:bottom="2dp">
       <shape
           android:shape="rectangle">
           <solid
               android:color="#d1d1d1"/>
           <stroke
               android:width="0.01dp"
               android:color="#9c9c9c"/>
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
   <item
       android:top="0dp"
       android:bottom="4dp">
       <shape
           android:shape="rectangle">
           <gradient
               android:angle="90"
               android:endColor="#564DA1"
               android:centerColor="#463894"
               android:startColor="#2D216F"
               android:centerY="0.75"
               android:type="linear" />
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
   <item
       android:top="0dp"
       android:bottom="157.5dp">
       <shape>
           <gradient
               android:startColor="#564DA1"
               android:centerColor="#e8e8e8"
               android:endColor="#564DA1"
               android:type="linear"
               android:centerY="0.75"
               android:angle="90"/>
       </shape>
   </item>
   <item
       android:top="125dp"
       android:bottom="4dp">
       <shape>
           <gradient
               android:startColor="#574EA4"
               android:centerColor="#574EA4"
               android:endColor="#574EA4"
               android:type="linear"
               android:centerY="0.75"
               android:angle="90"/>
           <corners android:bottomRightRadius="10dp"
               android:bottomLeftRadius="10dp"
               android:topLeftRadius="0dp"
               android:topRightRadius="0dp"/>
       </shape>
   </item>
</layer-list>

image_shadow.9.png

drawn_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item >
       <rotate
           android:fromDegrees="45"
           android:toDegrees="-45"
           android:pivotX="15%"
           android:pivotY="-36%" >
           <shape
               android:shape="rectangle"  >
                   <padding
                       android:bottom="50dp"
                       android:left="0dp"
                       android:right="0dp"
                       android:top="0dp" />
               <gradient
                   android:angle="225"
                   android:endColor="@android:color/transparent"
                   android:centerColor="@android:color/transparent"
                   android:startColor="#999999"
                   android:centerY="0.1"
                   android:type="linear" />
           </shape>
       </rotate>
   </item>
</layer-list>

Answer 1

Поместите ваш макет в представление карты

Если вы хотите больше тени, увеличьте значение 'card_view: cardElevation = "30dp"'

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:layout_gravity="center"
    card_view:cardElevation="30dp"
    card_view:cardBackgroundColor="#000"><!--
card elevation value 30dp and black background
-->

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="AbhiAndroid"
        android:textColor="#fff"
        android:textSize="20sp" />

</android.support.v7.widget.CardView>