Android: CollapsingToolbarLayout with ImageView toolbar background

Question

I would like to implement CollapsingToolbarLayout as follows:

The problem is that I need to have a custom Toolbar with gif as the background, and therefore I need an ImageView as the 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"/> 

In this implementation, the entire view scrolls, and neither the Toolbar nor the TabLayout attach to the top of the screen.

I have worked on many stackoverflow guides and answers, fe

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

All of them gave good explanations on how to work with CollapsingToolbarLayout . I think the problem with my implementation is the RelativeLayout containing the ImageView and Toolbar . When you remove RelativeLayout and ImageView and set the collapseMode Toolbar to pin, everything works as expected, and both the Toolbar and TabLayout will be TabLayout at the top of the screen if the user scrolls, But, unfortunately, I need to have an ImageView over the Toolbar to be able to upload GIFs as a Background Toolbar .

You may have a terrific idea on how to solve this problem. Or do you have another idea how I can achieve the desired behavior? Please let me know:)

Update: I created a sample project ( https://drive.google.com/open?id=0B1aHkcAaWIA-dHBTZnUyeUt3eTQ ) with which you can reproduce the wrong scroll behavior.

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 the CollapsingToolbar title .

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

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

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

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

Here is a 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 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, since you are using a custom Toolbar with a TextView , you need to hide the default value of the title ActionBar . To do this, use the following codes in Activity :

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

Hope this helps ~

Answer 2

I did the same, except that I do not have a TabLayout in my Activity . Below, as I did, I hope this 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> 

Answer 3

I changed activity_main.xml . Here is the code: -

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

 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" 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" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:id="@+id/image_layer" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_collapseMode="parallax" android:layout_marginTop="?attr/actionBarSize" android:layout_marginBottom="?attr/actionBarSize"> <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_alignParentTop="true"/> <LinearLayout android:id="@+id/image_indicators" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="8dp" android:gravity="center" android:layout_alignParentBottom="true"> <View android:layout_width="8dp" android:layout_height="8dp" android:layout_margin="4dp" android:background="@drawable/indicator"/> <View android:layout_width="8dp" android:layout_height="8dp" android:layout_margin="4dp" android:background="@drawable/indicator"/> <View android:layout_width="8dp" android:layout_height="8dp" android:layout_margin="4dp" android:background="@drawable/indicator"/> </LinearLayout> </RelativeLayout> <ImageView android:id="@+id/toolbar_background" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:scaleType="centerCrop" android:visibility="gone" android:layout_gravity="top"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:background="@drawable/banner_gif" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" > <de.scrollbehaviour.CustomTextView android:layout_width="match_parent" android:layout_height="wrap_content" 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="Titel"/> </android.support.v7.widget.Toolbar> <!-- 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"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:tabBackground="@color/colorWhite" app:tabTextColor="#000000" app:tabGravity="fill" android:layout_gravity="top" app:tabMode="fixed" app:tabMaxWidth="2000dp"/> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/viewpager" android:layout_marginTop="?attr/actionBarSize" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF"/> </FrameLayout>