How to give margin on left and right to Bottom Sheet build using BottomSheetDialogFragment?

Question

I want to give margins to the bottom sheet dialog on left and right. I tried a few methods but unfortunately not working.

I have a bottom sheet which opens up when I move to one of the fragment using Bottom Navigation.

Bottom Navigation :

This is the Bottom Sheet implemented using BottomSheetDialogFragment which comes up when I click on one of the navigation menu.

Here is the code for that :

class ProfileFragment : BottomSheetDialogFragment() {

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {

    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_profile_bottom_sheet, container, false)
}

}

And here's how my layout file looks Like :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@color/transparent"
tools:context=".fragments.ProfileFragment"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:orientation="vertical"
>

<LinearLayout
  android:id="@+id/bottomSheet"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:background="@color/purple_200"
  >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_margin="8dp"
    >

  <de.hdodenhof.circleimageview.CircleImageView
      android:id="@+id/profile_image"
      android:layout_width="96dp"
      android:layout_height="96dp"
      android:src="@drawable/img_profile"
      />

  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_vertical"
      android:orientation="vertical"
      >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Akash Sharma"
        android:textColor="@color/black"
        android:textStyle="bold"
        android:textSize="24sp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View Profile"
        android:fontFamily="sans-serif"
        android:layout_marginTop="4dp"
        />
  </LinearLayout>

</LinearLayout>

<View
    android:layout_width="wrap_content"
    android:layout_height="2dp"
    android:background="#43736C6C"
    android:layout_marginTop="8dp"
    android:layout_marginLeft="12dp"
    android:layout_marginRight="12dp"
    />


<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_pen"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="My Posts"
      android:layout_marginLeft="10dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_groups"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="My Posts"
      android:layout_marginLeft="10dp"

      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_location"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="My Location"
      android:textSize="20sp"
      android:layout_marginLeft="10dp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_share"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Share App"
      android:layout_marginLeft="10dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_settings"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Settings &amp; Privacy "
      android:layout_marginLeft="12dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_feedback"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Give Feedback"
      android:layout_marginLeft="12dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginLeft="12dp"
    android:layout_marginTop="24dp"
    >


  <ImageView
      android:layout_width="30dp"
      android:layout_height="30dp"
      android:src="@drawable/ic_signout"
      />


  <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Sign Out"
      android:layout_marginLeft="12dp"
      android:textSize="20sp"
      android:textColor="@color/black"
      android:layout_marginBottom="16dp"
      />
    </LinearLayout>

  </LinearLayout>

</RelativeLayout>

    

Answer 1

Define the bottomSheetDialogTheme attribute in styles.xml in your app theme:

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <!-- Customize your theme here. -->
    
    <item name="bottomSheetDialogTheme">@style/CustomBottomSheetDialog</item>
  </style>

Then just define your favorite shape with shapeAppearanceOverlay

 <style name="CustomBottomSheetDialog" parent="@style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/CustomBottomSheet</item>
  </style>

  <style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
    <item name="shapeAppearanceOverlay">@style/CustomShapeAppearanceBottomSheetDialog</item>
  </style>

  <style name="CustomShapeAppearanceBottomSheetDialog" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

then override this method in the custom fragment.

 @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //bottom sheet round corners can be obtained but the while background appears to remove that we need to add this.
        setStyle(DialogFragment.STYLE_NO_FRAME,R.style.CustomBottomSheetDialog);
    }