Search code examples
androidandroid-layoutandroid-bottomsheetdialog

Customization Bottom Sheet Dialog's View


I just want to get the BottomSheetDialog like below: margin from the system window. How can I get like this?

enter image description here


Solution

  • You can create Bottom Sheet Dialog Fragment in following way:

    First create the xml file as below named as

    fragment_bottomsheet

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/transparent"
        android:orientation="vertical">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_margin="20dp"
            android:background="@drawable/round_corner_white3"
            android:orientation="vertical">
    
            <TextView
                android:id="@+id/tv_select_address"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="@color/white"
                android:background="@drawable/round_corner_gray"
                android:layout_margin="10dp"
                android:layout_alignParentBottom="true"
                android:paddingBottom="10dp"
                android:paddingTop="10dp"
                android:text="Select Address" />
    
        </RelativeLayout>
    
    </RelativeLayout>
    

    Now create a Bottom Sheet Fragment named as

    BottomSheetFragment

    import android.app.Dialog;
    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.support.design.widget.BottomSheetDialogFragment;
    import android.view.View;
    
    public class BottomSheetFragment extends BottomSheetDialogFragment {
    
        public static BottomSheetFragment newInstance() {
            BottomSheetFragment fragment = new BottomSheetFragment();
            return fragment;
        }
    
        @Override
        public void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }
    
        @Override
        public void setupDialog(Dialog dialog, int style) {
            View contentView = View.inflate(getContext(), R.layout.fragment_bottomsheet, null);
            dialog.setContentView(contentView);
            ((View) contentView.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
        }
    
    }
    

    To call that bottom sheet fragment you can write as below:

    BottomSheetFragment bottomSheetDialog = BottomSheetFragment.newInstance();
    bottomSheetDialog.show(getSupportFragmentManager(), "Bottom Sheet Dialog Fragment");
    

    I have only took a single textview for now and attaching the screenshot because your main concern is to get margin in bottomsheet. Also in this way you can customize bottom sheet as you want. Thanks! enter image description here