Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set max width for BottomSheetDialogFragment

Question

I'm using the BottomSheetDialogFragment for my modal bottom sheet and would like to set a maximum width so that on tablets/large screens the BottomSheet doesn't occupy the entire width of the screen. How do I approach solving this? Thanks!

Relevant code & resources

fragment_bottomsheet.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/BottomSheetStyle">

    <GridLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:alignmentMode="alignBounds"
        android:columnOrderPreserved="false"
        android:columnCount="3"
        android:paddingTop="16dp"
        android:paddingBottom="8dp"
        android:paddingRight="8dp"
        android:paddingLeft="8dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/image1"
            android:text="Open"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/image2"
            android:text="Save"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/image3"
            android:text="Send"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/image4"
            android:text="Upload"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/image5"
            android:text="Share"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/iamge6"
            android:text="More"/>

    </GridLayout>

</android.support.design.widget.CoordinatorLayout>

res/values/styles.xml:

<style name="BottomSheetStyle">
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_gravity">center_horizontal</item>
</style>

res/values-w600dp/styles.xml:

<style name="BottomSheetStyle">
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_width">640dp</item>
    <item name="android:layout_gravity">center_horizontal</item>
</style>
like image 704
ade.akinyede Avatar asked Jul 18 '16 11:07

ade.akinyede


People also ask

How do I make BottomSheetDialogFragment full screen?

I used such way: add a view with "android:layout_height="match_parent" into root layout. when dialog is shown (or before this) update of BottomSheetBehavior with "isFitToContents = false" and "state = BottomSheetBehavior. STATE_EXPANDED".

What is BottomSheetDialogFragment?

↳ com.google.android.material.bottomsheet.BottomSheetDialogFragment. Modal bottom sheet. This is a version of DialogFragment that shows a bottom sheet using BottomSheetDialog instead of a floating dialog.

When to use bottom sheet?

Android BottomSheet is a kind of view that is used as supplementary surfaces in mobile apps. This component is a part of the android design support library and is used to expose more data or information, menus, deep linked content, and in place of dialogs.


1 Answers

A variation of the OP's answer that takes into consideration device's pixel density and orientation:

public final class MyBottomSheetDialogFragment extends BottomSheetDialogFragment {
    ...

    private static int dpToPx(int dp) {
        // https://developer.android.com/guide/practices/screens_support.html#dips-pels
        float density = Resources.getSystem().getDisplayMetrics().density;
        return (int) ((dp * density) + 0.5f);
    }

    @Override
    public void onResume() {
        super.onResume();

        Configuration configuration = getActivity().getResources().getConfiguration();
        if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE &&
                configuration.screenWidthDp > 450) {
            // you can go more fancy and vary the bottom sheet width depending on the screen width
            // see recommendations on https://material.io/components/sheets-bottom#specs
            getDialog().getWindow().setLayout(ViewUtils.dpToPx(450), -1);
        }
    }
}
like image 167
jakub.g Avatar answered Sep 19 '22 11:09

jakub.g