How to use collapsing toolbar and bottom sheet view in the same Activity?

Question

In my activity i am using a collapsing toolbar which is working fine. There is an icon in menu which when clicked will trigger the bottom sheet view and the bottom sheet will appear. And when clicked again the bottom sheet will collapse again.

here is the xml for it.

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.aadesh.khabriuncle.ArticleScreenActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="#7fff"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:title="">

        <FrameLayout
            android:id="@+id/tags_article"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:background="#7000"
            android:visibility="visible">

            <ImageView
                android:id="@+id/toolbarImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <LinearLayout
                android:id="@+id/tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@drawable/shape_chips"
                android:orientation="horizontal"
                android:visibility="gone" />


        </FrameLayout>


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbarArticleScreen"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:navigationIcon="@drawable/ic_chevron_left_black_24dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </android.support.v7.widget.Toolbar>


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

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

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

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

        <TextView
            android:id="@+id/titletext"
            style="@style/Article.title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/author"
                style="@style/Article.date"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true" />

            <TextView
                android:id="@+id/datetext"
                style="@style/Article.date"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true" />

        </RelativeLayout>

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />


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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/comments_bottomSheet"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:background="@color/colorAccent"
    android:clipToPadding="true"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

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

        <TextView
            android:id="@+id/titlebottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:textAllCaps="true"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/textbottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:textAllCaps="true"
            android:textSize="12sp" />

    </LinearLayout>


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

This is how i set it up in java

public boolean onOptionsItemSelected(MenuItem item) {

    if (item.getItemId() == R.id.comments) {
        Log.i(TAG, "selected item is " + item);
        if (bottomSheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
            Log.i(TAG, "the state is " + bottomSheetBehavior.getState());
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        } else {
            Log.i(TAG, "the state is " + bottomSheetBehavior.getState());
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        }
    }
    return super.onOptionsItemSelected(item);

}

The problem is that the bottom sheet view appears whenever the activity starts. And when i click on the menu icon nothing happens. Even though the logs that i printed are displaying.

What could be the reason?

Answer 1

well a few things are needed to be done I will give an example here to guide you in the right direction.

Step 1: Edit your manifest file by adding

android:windowSoftInputMode="stateHidden|stateAlwaysHidden" 

Step 2: Place your bottom sheet layout in your xml file for the activity.

  <RelativeLayout
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:behavior_hideable="true"
            app:behavior_peekHeight="0dp"
          app:layout_behavior="com.package.ui.utils.BottomSheetBehaviorStiff">

Step 3: Add BottomSheetBehaviorStiff to utils:

public class BottomSheetBehaviorStiff<V extends View> extends BottomSheetBehavior<V> {
    private boolean mAllowUserDragging = true;

    /**
     * Default constructor for instantiating BottomSheetBehaviors.
     */
    public BottomSheetBehaviorStiff() {
        super();
    }


    public BottomSheetBehaviorStiff(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setAllowUserDragging(boolean allowUserDragging) {
        mAllowUserDragging = allowUserDragging;
    }

    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, V child, MotionEvent event) {
        if (!mAllowUserDragging) {
            return false;
        }
        return super.onInterceptTouchEvent(parent, child, event);
    }
}

Step 4: Now initialize it in your activity:

      RelativeLayout bottomSheetLayout = (RelativeLayout) 
         findViewById(R.id.bottom_sheet);
                bottomSheetBehaviorStiff = (BottomSheetBehaviorStiff)

     BottomSheetBehaviorStiff.from(bottomSheetLayout);
            bottomSheetBehaviorStiff.setAllowUserDragging(false);
            bottomSheetBehaviorStiff.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
                @Override
                public void onStateChanged(@NonNull View bottomSheet, int newState) {
                    if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                        hideKeyBoard();
                    }
                }

                @Override
                public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                }
            });