android elevation hiding all view of the layout

Question

I have layout as shown in screenshot below.

Code I have is as below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    >

    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_smallxx"
        android:layout_marginTop="@dimen/margin_normalxx"
        android:layout_marginEnd="@dimen/margin_smallxx"
        android:orientation="vertical">

        .......

Now I want to add shadow for the box so I have as below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    >

    <TextView
        style="@style/shadowStyle"
        android:elevation="20dp"
        android:layout_alignTop="@id/ll_main"
        android:layout_alignBottom="@id/ll_main"
        android:layout_alignStart="@id/ll_main"
        android:layout_alignEnd="@id/ll_main"
        />

    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_smallxx"
        android:layout_marginTop="@dimen/margin_normalxx"
        android:layout_marginEnd="@dimen/margin_smallxx"
        android:orientation="vertical">

shadowStyle is as below.

<style name="shadowStyle" parent="@android:style/TextAppearance">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:text"></item>
    <item name="android:background">@drawable/myrect</item>
    <item name="android:outlineSpotShadowColor">@color/shadow_color</item>
</style>

And myrect.xml shape as below.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <corners android:radius="20dp" />
</shape>

When I add this all below view gets hidden which is weird.

App screenshots are as below.

I give shadow_color as #FF00FF for testing purpose only.

Any idea how to make it proper? Am I missing something...

Answer 1

Below is what I did as per mãĴď comments

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/white">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/margin_smallxx"
        android:layout_marginTop="@dimen/margin_normalxx"
        android:layout_marginEnd="@dimen/margin_smallxx"
        app:cardCornerRadius="10dp"
        app:cardElevation="20dp"
        android:outlineSpotShadowColor="@color/shadow_color"
        >

        <LinearLayout
            android:id="@+id/ll_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            ........
        </LinearLayout>
    </CardView>
</RelativeLayout>

This means we will have card view and put whole layout inside it...

Answer 2

1. add this style in your theme.xml

<style name="SpecificCornerRounded">
    <item name="cornerSizeTopRight">50dp</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopLeft">50dp</item>
    <item name="cornerFamilyTopLeft">rounded</item>
</style>

2. Also, add this xml file in your drawble rounded_rectangle_stroked.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent" />
    <stroke android:width="2dp" android:color="#1886f7"/>
    <corners android:radius="0dp" />
</shape>

Now, here is your final code:

<?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:background="#EDEDED"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginEnd="32dp"
        app:cardElevation="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.502"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/rounded_rectangle_stroked"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/imvCornerRadiusWithStroke"
                android:layout_width="0dp"
                android:layout_height="150dp"
                android:layout_marginStart="32dp"
                android:layout_marginTop="32dp"
                android:layout_marginEnd="32dp"
                android:scaleType="centerCrop"
                android:src="@drawable/addidas"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.496"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0"
                app:shapeAppearanceOverlay="@style/SpecificCornerRounded" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="32dp"
                android:text="Expiring: 01-12-24"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/imvCornerRadiusWithStroke"
                app:layout_constraintTop_toBottomOf="@+id/imvCornerRadiusWithStroke" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="More"
                android:textStyle="bold"
                android:textColor="#b8243d"
                app:layout_constraintEnd_toEndOf="@+id/imvCornerRadiusWithStroke"
                app:layout_constraintTop_toTopOf="@+id/textView2" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Here is a screenshot of the output:

• Using scrollview:

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
    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:background="#EDEDED"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="32dp"
            app:cardElevation="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/rounded_rectangle_stroked"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/imvCornerRadiusWithStroke"
                    android:layout_width="0dp"
                    android:layout_height="150dp"
                    android:layout_marginStart="32dp"
                    android:layout_marginTop="32dp"
                    android:layout_marginEnd="32dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/addidas"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.496"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0"
                    app:shapeAppearanceOverlay="@style/SpecificCornerRounded" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:layout_marginBottom="32dp"
                    android:text="Expiring: 01-12-24"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/imvCornerRadiusWithStroke"
                    app:layout_constraintTop_toBottomOf="@+id/imvCornerRadiusWithStroke" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="More"
                    android:textColor="#b8243d"
                    android:textStyle="bold"
                    app:layout_constraintEnd_toEndOf="@+id/imvCornerRadiusWithStroke"
                    app:layout_constraintTop_toTopOf="@+id/textView2" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="32dp"
            app:cardElevation="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/rounded_rectangle_stroked"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/imvCornerRadiusWithStroke1"
                    android:layout_width="0dp"
                    android:layout_height="150dp"
                    android:layout_marginStart="32dp"
                    android:layout_marginTop="32dp"
                    android:layout_marginEnd="32dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/addidas"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.496"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0"
                    app:shapeAppearanceOverlay="@style/SpecificCornerRounded" />

                <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:layout_marginBottom="32dp"
                    android:text="Expiring: 01-12-24"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/imvCornerRadiusWithStroke1"
                    app:layout_constraintTop_toBottomOf="@+id/imvCornerRadiusWithStroke1" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="More"
                    android:textColor="#b8243d"
                    android:textStyle="bold"
                    app:layout_constraintEnd_toEndOf="@+id/imvCornerRadiusWithStroke1"
                    app:layout_constraintTop_toTopOf="@+id/textView3" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="32dp"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="32dp"
            app:cardElevation="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/rounded_rectangle_stroked"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/imvCornerRadiusWithStroke4"
                    android:layout_width="0dp"
                    android:layout_height="150dp"
                    android:layout_marginStart="32dp"
                    android:layout_marginTop="32dp"
                    android:layout_marginEnd="32dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/addidas"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.496"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.0"
                    app:shapeAppearanceOverlay="@style/SpecificCornerRounded" />

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="16dp"
                    android:layout_marginBottom="32dp"
                    android:text="Expiring: 01-12-24"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="@+id/imvCornerRadiusWithStroke4"
                    app:layout_constraintTop_toBottomOf="@+id/imvCornerRadiusWithStroke4" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="More"
                    android:textColor="#b8243d"
                    android:textStyle="bold"
                    app:layout_constraintEnd_toEndOf="@+id/imvCornerRadiusWithStroke4"
                    app:layout_constraintTop_toTopOf="@+id/textView5" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

• Screenshot:

Hope it helps!