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?
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
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