how to set left and right margin in ButtomSheetDialogFragment Android?

Question

I tried to set Margin in ButtonSheetDialogFragment layout but its not working. I have tried to set margin from layout and programmatically but its has same result

This is my XML file layout_bts_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:background="#00000000">
   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </LinearLayout>
</FrameLayout>

This is my java code

        public class ButtomSheetFragment extends BottomSheetDialogFragment {
    
        private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback() {
          @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState)      {
                if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                    dismiss();
                }
    
            }
    
            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            }
        };
    
        @Override
        public void setupDialog(Dialog dialog, int style) {
            super.setupDialog(dialog, style);
    
            View contentView = View.inflate(getContext(),         R.layout.layout_bts_item, null);
            dialog.setContentView(contentView);
            CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
            CoordinatorLayout.Behavior behavior = params.getBehavior();
            if (behavior != null && behavior instanceof BottomSheetBehavior) {
                ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
                int height = LayoutUtils.getScreenHeight(getActivity());
                double desiredHeight = (0.85 * height);
                ((BottomSheetBehavior) behavior).setPeekHeight((int) desiredHeight);
                contentView.getLayoutParams().height = (int) desiredHeight;
                ((FrameLayout.LayoutParams)   contentView.getLayoutParams()).leftMargin = 100;
            }
        }
     }

Answer 1

Using Theme:

<style name="BottomSheetWithMargin" parent="ThemeOverlay.Material3.BottomSheetDialog">
        <item name="marginLeftSystemWindowInsets">true</item>
        <item name="marginRightSystemWindowInsets">true</item>
</style>

Then add this style to your BottomSheetDialogFragment class. (Unfortunately there is no attributes for Bottom margin)

Answer 2

You can do this by setting layoutParams.xxMrgin of the root layout of the dialog; but his requires also to use a different theme:

Java:

@Override
public void onViewCreated(@NonNull @NotNull View view, @Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    
    FrameLayout.LayoutParams layoutParams =
            (FrameLayout.LayoutParams) view.getLayoutParams();
    int margin_10dp = dpToPx(10);
    layoutParams.rightMargin = dpToPx(margin_10dp );
    layoutParams.leftMargin = dpToPx(margin_10dp);

    view.setLayoutParams(layoutParams);
    view.requestLayout();       
    
}

private int dpToPx(int dp) {
    Resources r = getResources();
    int px = (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp,
            r.getDisplayMetrics()
    );
    return px;
}

Kotlin:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    
    val layoutParams: FrameLayout.LayoutParams =
        view.layoutParams as FrameLayout.LayoutParams
    layoutParams.bottomMargin = 32.toPx().toInt()
    layoutParams.rightMargin = 32.toPx().toInt()
    layoutParams.leftMargin = 32.toPx().toInt()
    view.layoutParams = layoutParams
    
}

fun Number.toPx() = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,
    this.toFloat(),
    Resources.getSystem().displayMetrics
)   

Changing the theme:

Option 1: Easy and neat

Create this style that removes the background color:

<style name="NoBackgroundDialogTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="android:windowBackground">@null</item>
</style>

Then apply it to the dialog by overriding getTheme():

// Kotlin
override fun getTheme(): Int {
    return R.style.NoBackgroundDialogTheme
}

// Java
@Override
public int getTheme() {
    return R.style.NoBackgroundDialogTheme;
}

Option 2:

Set android.R.style.Theme_Translucent theme to the dialog:

@Override
public int getTheme() {
    // Step 1
    return android.R.style.Theme_Translucent;
}

But this requires to retain the dimmed background again:

getDialog().getWindow().setBackgroundDrawableResource(R.color.color_trans);

The entire class:

Kotlin using option 1:

class MyDialogFragment() : BottomSheetDialogFragment() {

    override fun getTheme(): Int {
        return R.style.NoBackgroundDialogTheme
    }

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

        val view: View = View.inflate(context, R.layout.fragment_bottomsheet, null)
        return view
    }


    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        addMargin(view)
    }

    private fun addMargin(view: View) {
        val layoutParams: FrameLayout.LayoutParams =
            view.layoutParams as FrameLayout.LayoutParams
        layoutParams.bottomMargin = 32.toPx().toInt()
        layoutParams.rightMargin = 32.toPx().toInt()
        layoutParams.leftMargin = 32.toPx().toInt()
        view.layoutParams = layoutParams
    }


    fun Number.toPx() = TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        this.toFloat(),
        Resources.getSystem().displayMetrics
    )

}

Java using option 2:

public class ButtomSheetFragment extends BottomSheetDialogFragment {

    //...

    @Override
    public int getTheme() {
        // Step 1
        return android.R.style.Theme_Translucent;
    }


    @Override
    public void onViewCreated(@NonNull @NotNull View view, @Nullable @org.jetbrains.annotations.Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        
        // Step 2
getDialog().getWindow().setBackgroundDrawableResource(R.color.color_trans);
        
        // Step 3
        addMargin(view);
    }

    private void addMargin(View view) {
        FrameLayout.LayoutParams layoutParams =
                (FrameLayout.LayoutParams) view.getLayoutParams();
        int margin_10dp = dpToPx(10);
        layoutParams.rightMargin = dpToPx(margin_10dp );
        layoutParams.leftMargin = dpToPx(margin_10dp);

        view.setLayoutParams(layoutParams);
        view.requestLayout();
    }

    private int dpToPx(int dp) {
        Resources r = getResources();
        int px = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                dp,
                r.getDisplayMetrics()
        );
        return px;
    }

}

Answer 3

Use this code for BottomSheetDialog

<style name="BottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper</item>
</style>

<style name="bottomSheetStyleWrapper" parent="Widget.Design.BottomSheet.Modal">
    <item name="behavior_peekHeight">350dp</item>
    <item name="android:layout_margin">30dp</item>
</style>
BottomSheetDialog dialog = new BottomSheetDialog(this, R.style.BottomSheetDialog);
dialog.setContentView(R.layout.custom_dialog);
dialog.show();

Answer 4

Call requestLayout() once you are done setting the margin.

In your case, something like

contentView.requestLayout();

after adding left margin.