I have multiple relative layouts with a Constraint layout as root. I have set an image as background of all the Relative Layouts, and set the elevations. But the elevations aren't producing any shadow. How do I fix this? Below is my XML:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/dark_blue"
android:layout_gravity="center"
android:clipChildren="false"
android:clipToPadding="false"
>
.
.
.
<!--Custom Toolbar XML code-->
.
.
.
<TextView
android:id="@+id/tvTitleFAQ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Frequently Asked Questions"
android:textColor="@color/bright_green"
android:textSize="@dimen/_13ssp"
app:fontFamily="@font/poppins_medium"
app:layout_constraintVertical_bias="0.125"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.18"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.965"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.05"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.95"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glTop2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.285"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glTop3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.385"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glTop4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.485"/>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/glTop5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.585"/>
<RelativeLayout
android:id="@+id/rlPrivacy"
android:layout_width="0dp"
android:layout_height="0dp"
android:clipToPadding="false"
android:elevation="@dimen/_100sdp"
android:outlineProvider="paddedBounds"
android:background="@drawable/faq_card"
app:layout_constraintLeft_toRightOf="@id/glLeft"
app:layout_constraintRight_toLeftOf="@id/glRight"
app:layout_constraintTop_toBottomOf="@id/glTop2"
app:layout_constraintBottom_toBottomOf="@id/glBottom">
<TextView
android:id="@+id/tvTitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PRIVACY, SAFETY AND SECURITY"
android:layout_marginLeft="@dimen/_15sdp"
android:layout_marginTop="@dimen/_20sdp"
android:textColor="@color/bright_green"
android:textSize="@dimen/_13sdp"
android:fontFamily="@font/poppins_semi_bold"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_faq_cross"
android:layout_alignTop="@id/tvTitle2"
android:layout_alignParentEnd="true"
android:layout_marginTop="@dimen/_3sdp"
android:layout_marginRight="@dimen/_15sdp"
/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rlMyMoney"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/faq_card"
android:elevation="@dimen/_200sdp"
android:outlineProvider="paddedBounds"
android:clipToPadding="false"
app:layout_constraintLeft_toRightOf="@id/glLeft"
app:layout_constraintRight_toLeftOf="@id/glRight"
app:layout_constraintTop_toBottomOf="@id/glTop3"
app:layout_constraintBottom_toBottomOf="@id/glBottom">
<TextView
android:id="@+id/tvTitle3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MY MONEY"
android:layout_marginLeft="@dimen/_15sdp"
android:layout_marginTop="@dimen/_20sdp"
android:textColor="@color/bright_green"
android:textSize="@dimen/_13sdp"
android:fontFamily="@font/poppins_semi_bold"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_faq_cross"
android:layout_alignTop="@id/tvTitle3"
android:layout_alignParentEnd="true"
android:layout_marginTop="@dimen/_3sdp"
android:layout_marginRight="@dimen/_15sdp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rlWithdrawal"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/faq_card"
android:elevation="@dimen/_300sdp"
android:outlineProvider="paddedBounds"
android:clipToPadding="false"
app:layout_constraintLeft_toRightOf="@id/glLeft"
app:layout_constraintRight_toLeftOf="@id/glRight"
app:layout_constraintTop_toBottomOf="@id/glTop4"
app:layout_constraintBottom_toBottomOf="@id/glBottom">
<TextView
android:id="@+id/tvTitle4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WITHDRAWAL"
android:layout_marginLeft="@dimen/_15sdp"
android:layout_marginTop="@dimen/_20sdp"
android:textColor="@color/bright_green"
android:textSize="@dimen/_13sdp"
android:fontFamily="@font/poppins_semi_bold"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_faq_cross"
android:layout_alignTop="@id/tvTitle4"
android:layout_alignParentEnd="true"
android:layout_marginTop="@dimen/_3sdp"
android:layout_marginRight="@dimen/_15sdp"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/rlVoodleeAccountSettings"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/faq_card"
android:elevation="@dimen/_400sdp"
android:outlineProvider="paddedBounds"
android:clipToPadding="false"
app:layout_constraintLeft_toRightOf="@id/glLeft"
app:layout_constraintRight_toLeftOf="@id/glRight"
app:layout_constraintTop_toBottomOf="@id/glTop5"
app:layout_constraintBottom_toBottomOf="@id/glBottom">
<TextView
android:id="@+id/tvTitle5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="VOODLEE ACCOUNT & SETTINGS"
android:layout_marginTop="@dimen/_20sdp"
android:layout_marginLeft="@dimen/_15sdp"
android:gravity="center"
android:textColor="@color/bright_green"
android:textSize="@dimen/_13sdp"
android:fontFamily="@font/poppins_semi_bold"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_faq_cross"
android:layout_alignTop="@id/tvTitle5"
android:layout_alignParentEnd="true"
android:layout_marginTop="@dimen/_3sdp"
android:layout_marginRight="@dimen/_15sdp"/>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I have been stuck on this since 2 days now. I have tried using solutions provided by similar questions on Stack overflow and elsewhere, but none of them worked. Please help!
Solved my problem using custom shadows with 9 patch drawable, and using this 9 patch drawable as the background of my Relative Layouts.
This site helped me draw custom shadows with 9 patch drawable: