How to add top handle to bottom sheet in android?

Viewed 803

bottom sheet with handle at top

I want to achieve this. Can anyone help me how to add this handle on top of bottom sheet?

1 Answers

Try this xml layout code for bottom bar:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_marginTop="10dp">
    <View
        android:layout_width="50dp"
        android:layout_height="3dp"
        android:background="@drawable/bg_bottom_sheet_view"
        android:alpha=".90"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        android:paddingBottom="30dp"
        android:gravity="center"
        android:background="@drawable/bg_bottom_sheet">
        <!--Your Bottom Sheet views-->
    </LinearLayout>
</LinearLayout>

Java Code for reference:

 public void showImagePickerBottomDialog(Context context){
        final BottomSheetDialog dialog = new BottomSheetDialog(context, R.style.BottomSheetMainStyle);
        dialog.setContentView(R.layout.dialog_bottom_sheet);
        dialog.show();
    }

bg_bottom_sheet_view.xml Drawable

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

bg_bottom_sheet.xml Drawable

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

Add BottomSheetMainStyle in theme.xml

<style name="BottomSheetMainStyle" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/Widget.Test.BottomSheet.Modal</item>
</style>

<style name="Widget.Test.BottomSheet.Modal" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@android:color/transparent</item>
</style>

Output for above code is:

enter image description here

Related