CollapsingToolbarLayout that contains only custom views (layouts)

Question

I have a fragment where I want to use CollapsingToolbarLayout

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@android:color/transparent"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:contentDescription="@string/app_name"
                android:src="@drawable/festival"
                app:layout_collapseMode="parallax"/>

             <include layout="@+id/custom_layout"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize" />

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

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

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

When collapsing_toolbar is expanded I want to have the image displayed and when collapsed I want to have only the @+id/custom_layout. The custom_layout is a relative layout with a textview and an imageview.

I want to have exactly the same behavior as if I had the following:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_collapseMode="pin" />

instead of the custom layout.

Why this is not working? Even though the CollapsingToobarLayout is expanded i see both the ImageView and the custom layout.

!!Note I do have an activity with a toolbar defined. I don't want to touch that part of the code. When I m scrolling up the fragment, I want the @+id/custom_layout to be aligned below the existing toolbar defined in the activity.

I add the following in onViewCreated() method inside the fragment:

RelativeLayout headerLayout = view.findViewById(R.id.custom_layout);
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout);

 mAppBarLayout.addOnOffsetChangedListener(new 
 AppBarLayout.OnOffsetChangedListener() {

                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                    if (verticalOffset == 0) {
                     //fully expanded
                     headerLayout.setVisibility(View.GONE)
                    } else  {
                        //fully collapsed
                       headerLayout.setVisibility(View.Visible);

                     //ISSUE HERE!!!: Only when ImageView has height = 0, the headerLayout pops up. 
                    //!!The transition is not smoothly. 
                    // I would like the headerLayout to be visible when the ImageView height reaches the headerLayout height.
                    }
                }
            });

Answer 1

You can do it programatically.In your activity add this listener in OnCreate() method

ImageView headerImage = view.findViewById(R.id.header_image);
AppBarLayout mAppBarLayout = view.findViewById(R.id.app_bar_layout);
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            boolean isShow = false;
            int scrollRange = -1;

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (scrollRange == -1) {
                    scrollRange = appBarLayout.getTotalScrollRange();
                }
                if (scrollRange + verticalOffset == 0) {
                    isShow = true;
                    headerImage.setVisibility(View.VISIBLE);
                } else if (isShow) {
                    isShow = false;
                    headerImage.setVisibility(View.GONE);
                }
            }
        });

EDIT to why you can't get the same effect as having the actual Toolbar

The docs state CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. So it was designed to be used with Toolbar by Google. You can simple create some sort of a workaround to use your custom layout

Answer 2

You can hide the imageView when the collapsingToolbar is collapsed and show again when it is expanded. In your activity class, use onOffsetChangedListener :

AppBarLayout appBarLayout = (AppBarLayout) view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                // If collapsed, then do this
                imageViewHeaderImage.setVisibility(View.GONE);
            } else if (verticalOffset == 0) {
                // If expanded, then do this
                imageViewHeaderImage.setVisibility(View.VISIBLE);
            } 

        }
    }););