BottomSheetDialog with collapsable toolbar

Question

Hi I am trying to make a dialog which appears from the bottom of the screen in android. On searching I found out I can use BottomSheetDialog. Now I want a collapsable toolbar with an imageview in my BottomSheetDialog. I want to show DETAILS ( like name, information, mobile number etc. as simple textviews) when my image collapses on scrolling up.
My problem is :
1.When I add layout NestedScrollView to display DETAILS, the text overlaps the image initially, but when image is collapsed, the text no longer overlaps the image. The text position remains fixed,it doesn't move up as the image collapses when scrolling up, and the scrolling experience is very very very poor.
2. When I add linear layout to display DETAILS, the text comes on my image of collapsable toolbar.

Here is my layout file for dialog:

    <?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"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/profile_activity_collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/panel_profile_picture"
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <!--<android.support.v7.widget.Toolbar-->
                <!--android:id="@+id/toolbar"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="?attr/actionBarSize"-->
                <!--app:layout_collapseMode="parallax"-->
                <!--app:popupTheme="@style/AppTheme.PopupOverlay" />-->
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!--<ADD A LAYOUT HERE TO SHOW TEXTVIEW FOR DETAILS LIKE NAME,INFORMATION ETC>-->

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

The bottomSheetDialog appear when a card is touched in the activity.Here is my code which shows the bottomSheetDialog:

            convertView = mlayoutInflator.inflate(R.layout.panel_details_list_item, null);
            /* setting texts in convertView */
            convertView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.d("Card touched","Card touched at " + position);
                mBottomSheetDialog = new BottomSheetDialog(mContext);
                bottomSheetView = mlayoutInflator.inflate(R.layout.panel_more_detail_item,null);
                mBottomSheetDialog.setContentView(bottomSheetView);
                mbottomSheetBehavior = BottomSheetBehavior.from((View) bottomSheetView.getParent());
                bottomSheetInterviewerImage = bottomSheetView.findViewById(R.id.panel_profile_picture);
                bottomSheetInterviewerImage.setImageDrawable(drawableList.get(position));
                mBottomSheetDialog.show();
            }
        });

What should I use to show my DETAILS nicely without compromising with the collapsable toolbar? I want that as my image collapses and moves up, the texviews appear and also move up when scrolled up.

PS: Please comment if anything not clear or more related code needs to be posted. TIA

Answer 1

I found something which serves my purpose.I am using FrameLayout with app behavior as app:layout_behavior="@string/appbar_scrolling_view_behavior"
So when you touch your image and scroll up, the image collapses, and the details move up as well on scroll.However, the image can't be collapsed by touching the details layout and scrolling up. One has to touch the image and scroll up. Until a better solution is found, this serves my purpose.
So my layout file for bottom sheet dialog is like:

<?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"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/profile_activity_collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/panel_profile_picture"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <!--<android.support.v7.widget.Toolbar-->
                <!--android:id="@+id/toolbar"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="?attr/actionBarSize"-->
                <!--app:layout_collapseMode="parallax"-->
                <!--app:popupTheme="@style/AppTheme.PopupOverlay" />-->
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <FrameLayout
        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="300dp"
            android:orientation="vertical">
           <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="This is detial 1"
                android:padding="20dp"
                android:gravity="center"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="This is detial 2"
                android:padding="20dp"
                android:gravity="center"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="This is detial 3"
                android:padding="20dp"
                android:gravity="center"/>

        </LinearLayout>

    </FrameLayout>

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

`