Android: CollapsingToolbarLayout with ImageView Toolbar background

Question

I would like to implement a CollapsingToolbarLayout like this:

The challenge here is that I need to have a custom Toolbar with a gif as background and therefore I need an ImageView as background for the Toolbar. You can see my implementation in the following xml:

<?xml version="1.0" encoding="utf-8"?>

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/htab_collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorAccent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <!-- Container which should be scrolled parallax and contains the image gallery -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax">

            <RelativeLayout
                android:id="@+id/image_layer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <android.support.v4.view.ViewPager
                    android:id="@+id/image_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorAccent"
                    android:layout_marginTop="?attr/actionBarSize"/>

                <LinearLayout
                    android:id="@+id/image_indicators"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="@dimen/defaultPadding"
                    android:gravity="center"
                    android:layout_alignParentBottom="true"/>
            </RelativeLayout>
        </LinearLayout>

        <!-- Container which contains the background for the toolbar and the toolbar itself  -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/toolbar_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="centerCrop"
                android:layout_gravity="top"
                android:background="@color/colorPrimaryLight"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize">

                <de.views.CustomTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"
                    android:textColor="#FF0000"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:layout_gravity="center"
                    android:id="@+id/toolbar_title"
                    tools:text="Restauranttitel"/>
            </android.support.v7.widget.Toolbar>
        </RelativeLayout>

        <!-- Tablayout -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabBackground="@drawable/selected_tab_background"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabMaxWidth="2000dp"/> <!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->

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

<FrameLayout
    android:id="@+id/activity_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

With this implementation the whole view is scrolling and neither the Toolbar nor the TabLayout gets pinned to the top of the screen.

I've worked through lots of tutorials and stackoverflow answers, f.e.

• https://antonioleiva.com/collapsing-toolbar-layout/
• http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/

They all gave nice explanations on how to work with CollapsingToolbarLayout. I think the problem of my implementation is the RelativeLayout containing the ImageView and the Toolbar. When removing the RelativeLayout and the ImageView and set the collapseMode of Toolbar to 'pin' everything worked as expected and both the Toolbar and Tablayout gets pinned at the top of the screen if the user is scrolling. But unfortunately I need to have the ImageView above the toolbar to be able to load a GIF as Toolbar background.

Maybe one of you got an awesome idea on how to solve this issue. Or you've another idea how I can achieve the desired behaviour? Please let me know :)

Update: I've created an example project (https://drive.google.com/open?id=0B1aHkcAaWIA-dHBTZnUyeUt3eTQ) with which you can reproduce the wrong scroll behaviour.

Answer 1

#. Here I used CollapsingToolbarLayout height as 300dp which is the sum of Toolbar, ImageSlider and TabLayout height. Used app:titleEnabled="false" to hide CollapsingToolbar title.

#. Inside CollapsingToolbarLayout, added RelativeLayout as a container of ViewPager(images) and LinearLayout(indicator). Added attribute android:layout_marginTop="?attr/actionBarSize" to place it below ToolBar and added app:layout_collapseMode="parallax" to show parallax effect during scroll.

#. Below RelativeLayout, added an ImageView to show GIF image on it. Added attribute android:layout_height="?attr/actionBarSize" to make its height as Toolbar height. Added attribute app:layout_collapseMode="pin" to keep the ImageView fixed at top and visible before or after scroll.

#. Added Toolbar below ImageView to show Toolbar over ImageView. As I did not set any background color to Toolbar, it will work as transparent. Like ImageView, added app:layout_collapseMode="pin" to Toolbar to pin it always at top. Added attribute android:layout_height="104dp", to show Tablayout below Toolbar during collapsed state. Here 104dp is Toolbar height(56dp ) + Tablayout height(48dp).

#. Finally added TabLayout below Toolbar and added attribute android:layout_gravity="bottom" to show it at the bottom of CollapsingToolbarLayout.

Here is the simplified working XML:

<?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:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/htab_collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <!-- Image slider container -->
            <RelativeLayout
                android:id="@+id/image_layer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_collapseMode="parallax">

                <!-- ViewPager -->
                <android.support.v4.view.ViewPager
                    android:id="@+id/image_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <!-- Pager Indicator Container -->
                <LinearLayout
                    android:id="@+id/image_indicators"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="56dp"
                    android:orientation="horizontal"
                    android:padding="8dp"
                    android:gravity="center"
                    android:background="@color/black"/>
            </RelativeLayout>

            <!-- Toolbar background  :: GIF -->
            <ImageView
                android:id="@+id/toolbar_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="centerCrop"
                app:layout_collapseMode="pin"
                android:src="@drawable/dummy"/>

            <!-- Toolbar -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="104dp"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"
                    android:textColor="#000"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:layout_gravity="top"
                    android:id="@+id/toolbar_title"
                    android:text="Restaurant Title"/>
            </android.support.v7.widget.Toolbar>

            <!-- TabLayout -->
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabBackground="@android:color/holo_red_dark"
                app:tabIndicatorColor="@android:color/transparent"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabMaxWidth="2000dp"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!-- Container for TAB'S Fragments -->
    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

OUTPUT:

FYI, as you are using custom Toolbar with TextView, you have to hide default title of ActionBar. To do this use below codes in your Activity:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("");

Hope this will help~

Answer 2

I've done the same except that I don't have TabLayout in my Activity. Below is how I did it, hope it helps you.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootLayout"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ActivityMemoryDetail">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        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:minHeight="?attr/actionBarSize"
            app:expandedTitleMarginStart="10dp"
            app:expandedTitleMarginBottom="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />
            <LinearLayout
                android:id="@+id/imageIndicatorLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:layout_marginTop="4dp"
                android:orientation="horizontal">
            </LinearLayout>

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

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


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

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


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="10dp">
                    <TextView
                        android:id="@+id/txtTagsH"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Tags"/>
                    <View
                        android:id="@+id/tempView1"
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="#6d6d6d"
                        android:layout_marginTop="5dp"
                        android:layout_marginBottom="5dp"
                        android:layout_below="@+id/txtTagsH"/>
                    <TextView
                        android:id="@+id/txtTags"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tempView1"
                        android:text="lorem, ispum, dolor, sit"/>
                </RelativeLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/txtDateH"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="18sp"
                        android:text="Date"/>
                    <View
                        android:id="@+id/tempView2"
                        android:layout_width="match_parent"
                        android:layout_height="1dp"
                        android:background="#6d6d6d"
                        android:layout_marginTop="5dp"
                        android:layout_marginBottom="5dp"
                        android:layout_below="@+id/txtDateH"/>
                    <TextView
                        android:id="@+id/txtDate"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tempView2"
                        android:text="Saturday April 30, 2016 at 8:30 PM"/>
                </RelativeLayout>

            </android.support.v7.widget.CardView>
        </LinearLayout>

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right|end"
        android:layout_margin="16dp"
        android:src="@drawable/ic_mode_edit_white_24dp"
        android:onClick="editMemory"/>

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