After 2 whole days of trying to find a pure Android solution here is my solution.
Target: Tabs under the Toolbar with image background behind both views
(TL;DR: See XML attached)
The behavior I want to achieve is to have the CollapsingToolbarLayout and the TabLayout on top of an image and when the "header" is scrolled up (out of the screen) then to show the ActionBar (toolbar) with the TabLayout under it.
The Problem:
Since the CollapsingToolbarLayout will hide all children views when collapsed except the Toolbar view then the TabLayout has to be placed outside the CollapsingToolbarLayout but inside the AppBarLayout so that it is "docked" at the top of the screen and under the Toolbar. The issue now is that the ImageView placed inside the CollapsingToolbarLayout will not be under the TabLayout but above it vertically.
The Solution:
To solve this issue we need to make the ImageView taller so that if we were to place the TabLayout inside the CollapsingToolbarLayout it will cover it. But because we placed the TabLayout outside the CollapsingToolbarLayout we need to make sure that the ImageView is drawn even if its parent view (CollapsingToolbarLayout) is shorter. clipChildren="false" TO THE RESCUE! clipChildren tells a ViewGroup to DO NOT clip its children view if they are bigger than it's size, so essentially now we can make the ImageView taller and it will still be drawn under the TabLayout. This way we can have both the CollapsingToolbarLayout and the TabLayout above a nice image!
My Layout xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false" /////IMPORTANT!!!!!!
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipChildren="false" /////IMPORTANT!!!!!!
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/poster"
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:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…