abat abat - 3 months ago 69
Android Question

Modal Bottom Sheet: how to set 8dp from action bar?

I want to use the modal bottomsheet. Material design guideline says the fully expanded bottom sheet should be 8dp below the actionbar. How can I achieve this? I want to keep an

X
mark in the action bar to close the bottomsheet when fully expanded.

When I tried with a linearLayout bottomsheet, it takes the whole screen when the state is expanded.

My bottomsheet layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="@dimen/design_bottom_sheet_modal_elevation"
android:orientation="vertical">


<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>


<Button
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:text="ADD"/>

</LinearLayout>

Answer

I didn't find an easy way, but here is what I did. I measured the height of status bar and actionbar and subtracted that from the screenheight. Works well for me. Not sure if this is the best way. `

private int getBottomSheetMaximumHeight() {
        // get toolbar height
        Toolbar toolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);
        int toolbarHeight = toolbar.getHeight();

        //get status bar height
        Rect rectangle = new Rect();
        Window window = getActivity().getWindow();
        window.getDecorView().getWindowVisibleDisplayFrame(rectangle);
        int windowHeight = rectangle.bottom;

        // material design recommended bottomsheet padding from actionbar
        final int padding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,8, getContext().getResources().getDisplayMetrics());

        // maximum height of the bottomsheet
        return windowHeight - toolbarHeight - rectangle.top - padding;

    }`