2

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?

Prosenjith Roy
  • 179
  • 1
  • 1
  • 9
  • This is just a View . Just add a View with a rounded background. Though BottomSheet touch will work on whole layout if you want it only to accept touch on handle you need to do it yourself . – ADM Aug 16 '21 at 05:31
  • @ADM how to add the handle to the rounded background view drawable? – Prosenjith Roy Aug 16 '21 at 06:54

1 Answers1

1

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

Android Geek
  • 8,956
  • 2
  • 21
  • 35
  • Thanks a lot brother. This is the kotlin code : `override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setStyle(STYLE_NORMAL,R.style.BottomSheetWithTopHandleStyle)` – Prosenjith Roy Aug 17 '21 at 05:59