'Remove background outside of Cardview corners

I have successfully implemented persistent bottom sheet in my application. I am using cardview with rounded corners but I want to get rid of unwanted background outside of cardview corners.

enter image description here

In this activity i am using recyclerview and bottomsheet. All is working fine but i want to remove white background outside corner.

Remove red area

XML Code:

    <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    tools:context=".Properties.PropertiesActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="55dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/TopLayout"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_45sdp"
            android:background="@color/blue"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/iv_back"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_marginStart="16dp"
                android:src="@drawable/ic_arrow_back"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:tint="@color/white"
                tools:ignore="ContentDescription" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Properties"
                android:textAllCaps="true"
                android:textColor="@color/white"
                android:textSize="@dimen/_12ssp"
                android:textStyle="bold|italic"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_properties"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/TopLayout" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/mcv_lineChart"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_250sdp"
        android:visibility="visible"
        app:cardElevation="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Card.Media"
        app:strokeColor="@color/light_gray"
        app:strokeWidth="2dp"
        app:behavior_hideable="false"
        app:behavior_peekHeight="55dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <androidx.core.widget.NestedScrollView
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/iv_propertyGraph"
                    android:layout_width="@dimen/_30sdp"
                    android:layout_height="@dimen/_20sdp"
                    android:src="@drawable/ic_arrow_up"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:tint="@color/black" />

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Property Graph"
                    android:textColor="@color/gray"
                    android:textSize="@dimen/_10ssp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/iv_propertyGraph" />

                <com.github.mikephil.charting.charts.LineChart
                    android:id="@+id/lineChart"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/_200sdp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/textView5" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.core.widget.NestedScrollView>

    </com.google.android.material.card.MaterialCardView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.AAAProperty" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">@color/blue</item>
    <!-- Customize your theme here. -->

    <!-- Spinner Divider -->
    <item name="android:dropDownListViewStyle">@style/SpinnerStyle</item>
</style>

<!-- Spinner -->
<style name="SpinnerStyle" parent="Widget.AppCompat.ListView.DropDown">
    <item name="android:textSize">@dimen/_11ssp</item>
    <item name="android:dividerHeight">1dp</item>
    <item name="android:divider">@color/light_gray</item>
</style>

<style name="ShapeAppearanceOverlay.App.Card.Media" parent="">
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeTopLeft">36dp</item>
    <item name="cornerSizeTopRight">36dp</item>
</style>

I have searched a lot but could not find the solution. Kindly help me.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source