androidkotlinshapesdrawableshadow

I am having a hard time adding shadows in Android (in general)


In this example, I have a bottomSheet with a fragmentContainer inside it. And my bottomSheet has a radius on the bottom corners. My solution was to add a gradient view to simulate the shadow, but it turns out that I can see a color difference on the sides (like in the image), in this case a darker color, is happening because of the gradient. What was my best solution in this case?

enter image description here

This is the code that supports my bottomSheet:

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottom_sheet_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:behavior_hideable="false"
            app:behavior_peekHeight="30dp"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

            <View
                android:id="@+id/view_shadow"
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:background="@drawable/shape_bottomsheet_shadow"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraint_stroke"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginTop="4dp"
                android:background="@drawable/shape_home_bottomsheet_stroke"
                android:paddingTop="1dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_goneMarginTop="10dp">

                <androidx.fragment.app.FragmentContainerView
                    android:id="@+id/bottom_sheet_fragment_container"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:background="@drawable/shape_home_bottomsheet_background"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:layout="@layout/fragment_blank" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

This is my shape_bottomsheet_shadow:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:topRightRadius="16dp"
        android:topLeftRadius="16dp"/>
    <gradient
        android:angle="90"
        android:endColor="@android:color/transparent"
        android:startColor="@color/homepage_bottomsheet_shadow_start" />
</shape>

I already tried to use public libraries to add my shadows but no one worked as I expect to be


Solution

  • These are the 9-patch files I used to implement this. These should be applied as the background of the entire BottomSheet.

    I've put them in a zip file because it's the only way to maintain the filename (important for the files to be interpreted as 9-patch):

    https://www.mediafire.com/file/4l4wr0wkn24u3cx/9-patch+files.zip/file