How to set Android Buttom sheet height match_parent?

1.4k Views Asked by At

I want the height of the bottom dialog to expend to match_parent (as empty activity)
Here is my code.

MainActivity

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;

import com.google.android.material.bottomsheet.BottomSheetBehavior;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button OpenBottomSheet = findViewById(R.id.open_bottom_sheet);

        OpenBottomSheet.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v)
                    {
                        BottomSheetDialog bottomSheet = new BottomSheetDialog();
                        bottomSheet.show(getSupportFragmentManager(),
                                "ModalBottomSheet");
                    }
        });
     }
}

BottomSheetDialog

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

import androidx.annotation.Nullable;

import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.bottomsheet.BottomSheetDialogFragment;

public class BottomSheetDialog extends BottomSheetDialogFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable
    ViewGroup container, @Nullable Bundle savedInstanceState)
    {
        View v = inflater.inflate(R.layout.buttom_sheet_layout,
                container, false);

        return v;
    }

}

Here is full code.

3

There are 3 best solutions below

3
On BEST ANSWER

To have full screen BottomSheetDialogFragment, you'd:

  • Use a full screen window using android:windowFullscreen applied in a custom style by overriding getTheme()
  • Use STATE_EXPANDED state of the bottom sheet to expand to the entire dialog window
  • Set the bottomSheet layout to MATCH_PARENT
  • Optionally disable the bottom sheet STATE_HALF_EXPANDED using behavior.setSkipCollapsed()

Applying that to your class:

public class BottomSheetDialog extends BottomSheetDialogFragment {

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable
    ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.bottom_sheet_layout,
                container, false);

        Button algo_button = v.findViewById(R.id.algo_button);
        Button course_button = v.findViewById(R.id.course_button);

        algo_button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(),
                                "Algorithm Shared", Toast.LENGTH_SHORT)
                        .show();
                dismiss();
            }
        });

        course_button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(),
                                "Course Shared", Toast.LENGTH_SHORT)
                        .show();
                dismiss();
            }
        });
        
        return v;
    }


    @Override
    public int getTheme() {
        return R.style.dialog_style;
    }

    @Override
    public void onStart() {
        super.onStart();
        
        View bottomSheet =
                ((com.google.android.material.bottomsheet.BottomSheetDialog) 
                getDialog()).findViewById(com.google.android.material.R.id.design_bottom_sheet);

        if (bottomSheet != null) {
            // set the bottom sheet state to Expanded to expand to the entire window
            BottomSheetBehavior.from(bottomSheet).setState(BottomSheetBehavior.STATE_EXPANDED);
            // disable the STATE_HALF_EXPANDED state
            BottomSheetBehavior.from(bottomSheet).setSkipCollapsed(true);
            // set the bottom sheet height to match_parent
            ViewGroup.LayoutParams layoutParams = bottomSheet.getLayoutParams();
            layoutParams.height = WindowManager.LayoutParams.MATCH_PARENT;
            bottomSheet.setLayoutParams(layoutParams);
        }

        // Make the dialog cover the status bar
        getDialog().getWindow().setFlags(
             WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, 
             WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);


    }

}

And this is the custom style for full screen:

<resources>

    <style name="dialog_style" parent="Theme.MaterialComponents.BottomSheetDialog">
        <item name="android:windowFullscreen">true</item>
    </style>

</resources>

If you're using Material3, then extend the style from Theme.Material3.DayNight.BottomSheetDialog instead.

Edit:

Great ! but the top bar does not hide

You can make the bottom sheet hide the status bar by setting the below window flag; the above class is updated with that:

// Make the dialog cover the status bar
getDialog().getWindow().setFlags(
     WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, 
     WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

Also for devices with notch you need to set android:windowLayoutInDisplayCutoutMode to the style:

<resources>

    <style name="dialog_style" parent="Theme.MaterialComponents.BottomSheetDialog">
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>

</resources>
0
On

You can set the height of the BottomSheetDialog to match_parent by adding the following line of code to your BottomSheetDialog class:

@Override
public void onStart() {
    super.onStart();
    View view = getView();
    if (view != null) {
        ViewGroup.LayoutParams params = view.getLayoutParams();
        params.height = ViewGroup.LayoutParams.MATCH_PARENT;
        view.setLayoutParams(params);
    }
}

This code overrides the onStart() method, which is called when the BottomSheetDialog is shown. It gets the view of the BottomSheetDialog, sets the height of the view to

Alternatively, you can use this line in your onCreateView method:

getDialog().getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

This line sets the width and height of the bottom sheet dialog to match_parent, making it take up the full screen.

0
On

There is a tricky way, useful for me, to modify behavior and set window height to achieve the full-screen effect.

class BottomSheetDialog : BottomSheetDialogFragment() {
    
    private var mBehavior: BottomSheetBehavior<View>? = null


    override fun onStart() {
        super.onStart()
        mBehavior?.state = BottomSheetBehavior.STATE_EXPANDED
        mBehavior?.peekHeight = 0
    }
    
    fun onCreateView(
        inflater: LayoutInflater,
        @Nullable container: ViewGroup?,
        @Nullable savedInstanceState: Bundle?
    ): View {
        //content in buttom_sheet_layout should be match_parent
        return inflater.inflate(
            R.layout.buttom_sheet_layout,
            container, false
        )
    }

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

    private fun setupBottomSheetFullScreen(view: View) {
        view.updateLayoutParams {
            height = getWindowHeight()
        }
        mBehavior = BottomSheetBehavior.from(view.parent as View)
    }

    private fun getWindowHeight(): Int {
        return Resources.getSystem().displayMetrics.heightPixels
    }
}