androidandroid-relativelayoutshadowandroid-elevation

Relative Layout elevation not showing shadow


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 &amp; 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!


Solution

  • 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:

    https://inloop.github.io/shadow4android/