Set initial height of parallax image in CollapsingToolbarLayout

Question

I have an Android activity which uses a CollapsingToolbarLayout inside a CoordinatorLayout to achieve a scrolling / collapsing toolbar with an image as the backdrop / banner.

The image is loaded from the internet and I don't know its size beforehand.

I would like the toolbar to be a certain height (160dp) initially, but if the image is larger than this I would then like to allow the user to scroll down even further to reveal the rest of the image. However, this should never happen automatically. Initial state is 160dp height, but user should be able to scroll it down to increase the height of the image further.

I can't seem to find the correct combination of height / minheight to achieve this. Is this even possible at all?

Here is my layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@color/toolbar_text">

    <android.support.design.widget.CoordinatorLayout
            android:id="@+id/coordinatorLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
                android:id="@+id/appBarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

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

                <!-- The background banner -->
                <ImageView
                        android:id="@+id/imgBanner"
                        android:layout_width="match_parent"
                        android:layout_height="160dp"
                        android:scaleType="centerCrop"
                        android:fitsSystemWindows="true"
                        app:layout_collapseMode="parallax"/>

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

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

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

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

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

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

</LinearLayout>

The height of the banner image is set to 160dp which controls how large the toolbar is initially, but obviously this way I cannot extend it beyond the 160dp because that is the height of the view.

I tried setting 160dp height to the CollapsingToolbarLayout or the AppBarLayout but nothing helps, it is always maximum 160dp in height and I can only scroll it up (smaller image) and not down, even if the image is much larger and the ImageView is set to scale as wrap_content.

Here's a drawing of what I want to achieve in case it isn't clear:

Encephalography

I'm trying to have the exact same thing. Have you managed to make this working? – Thermoluminescence

Answer 1

Here is one hacky way to accomplish this, I am not sure of a better way but would love to hear it. Check out ControllableAppBarLayout

Place that code in your project and replace:

    android.support.design.widget.AppBarLayout

With:

   ControllableAppBarLayout

Set the android:layout_height of ControllableAppBarLayout to be the maximum size of your toolbar, i.e. the size you want in your "scrolling further down" picture.

Then, in your code in the onCreate() method, you can get access to the ControllableAppBarLayout:

appBarLayout = (ControllableAppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.collapseToolbar();

appBarLayout.collapseToolbar() will completely close the toolbar. However, you can modify this method in ControllableAppBarLayout:

private void performCollapsingWithoutAnimation() {
    if (mParent.get() != null) {
        mBehavior.onNestedPreScroll(mParent.get(), this, null, 0, getHeight(), new int[]{0, 0});
    }
}

specifically, change getHeight() to the number in dp representing the difference between the max height of the toolbar image and the height you want to initially show. That is, the difference between "initial state" and "scrolling further down" as you showed above.

This hack should accomplish what you want.

Tamatamable

Nice, works fine and did not find any side effects yet. Thanks! – Encephalography

I'm glad to hear it worked, that's great. You're welcome. – Tamatamable

Perhaps one issue though: is there a way to make sure the 'fully expanded' height never exceeds the available screen space on the device? For example if I set the height to 420dp, on my device I still have some space left at the bottom. But if someone has a much shorter device, they are able to scroll the content all the way off screen (image takes up whole screen) and then they cannot scroll back up anymore. Same thing when you turn the device to landscape mode. I tried applying a bottom margin to the ControllableAppBarLayout but that doesn't seem to do anything. – Encephalography

the above code not working. still parallax image not effected when scrolling further down – Snowblind