Full Screen Bottom Sheet with Close(X) button at the top

Question

I am trying to implement a bottom sheet from the google design lib. Clicking on a button should open up bottom sheet which covers the whole activity window. Like when we open an email in Inbox by Gmail. But, it should open up from bottom and slide down to dismiss.

Button click should open up bottom sheet and on slide down or top left Close (X) button should close the sheet.

I have set up something like this:

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello Bottom Sheet !!" />

    </android.support.v4.widget.NestedScrollView>

    <include layout="@layout/content_my_activity" />

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

And I am intializing it like this:

    mBottomSheet = (NestedScrollView) findViewById(R.id.bottom_sheet);
    mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
    mButton = (Button) findViewById(R.id.bottom_sheet_button);
    mButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }
    });

However, when I click on a button, the text just appears at the bottom. Overlapping the default existing content. And no black transparent tint behind the bottom sheet.

How can I make it full screen when clicking on button?

The reason I am not using a fragment here is, I have some(many) variables depending on the content of the bottom sheet. So, if I show a bottom sheet via fragment, I need to pass and receive all the data to and fro. To avoid this, I want it to be part of the activity.

Is there any way I can achieve this? Thanks for your help.

I know that ! :( There is so much data from which I prepare bottom sheet content. — kirtan403, Jul 20 '16 at 13:10
Also this: `android:layout_height="wrap_content"`. Your bottom sheet's height is set to `wrap_content` and not `match_parent`. — Xaver Kapeller, Jul 20 '16 at 13:14
I need to setup listeners which affect the data both way, changes the content of bottom sheet and on changing bottom sheet content, need to change some content of main activity content. — kirtan403, Jul 20 '16 at 13:16
match_parent causes the text to go behind the notification area.. — kirtan403, Jul 20 '16 at 13:17

score 0 · Answer 1 · answered Aug 08 '16 at 09:55

0

mButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        mBottomsheet.callOnClick();
    }
});

Try this code........

answered Aug 08 '16 at 09:55

Naruto-Uzumaki

21
1
9

score -2 · Answer 2 · answered Mar 03 '17 at 09:22

When you click at button you can consider this action like your NestedScrollView container just become visible so it will take place like you write at params

android:layout_width="match_parent"
android:layout_height="wrap_content"

If you want it to take full parent height just use

android:layout_height="match_parent"

If to speak about shadow background like at fragment you can trick that you can set background alpha color for NestedScrollView

android:background="#64000000"

But it is a hack, you can use fragment and just send all information to it from activity and vice versa

Full Screen Bottom Sheet with Close(X) button at the top

2 Answers2