How to sync scroll of two CoordinatorLayout + AppBarLayout
<p>I have an activity with XML.</p>

<p><strong>Something like:</strong></p>

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"&gt;

    &lt;android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent"&gt;

        &lt;android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"&gt;

            &lt;android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/primary"
                android:theme="@style/ToolbarStyle"
                android:gravity="center_vertical"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                style="@style/bold" /&gt;

            &lt;android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/TabLayoutStyle"
                android:animateLayoutChanges="true"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabTextAppearance="@style/TabStyle"/&gt;

        &lt;/android.support.design.widget.AppBarLayout&gt;

        &lt;com.wedmegood.planner.view.XViewPager
            android:id="@+id/main_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="fill_vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" /&gt;

        ...

&lt;/android.support.v4.widget.DrawerLayout&gt;
</code></pre>

<p>A <code>Fragment</code> of the <code>ViewPager</code> has a <code>CoordinatorLayout</code> and <code>AppBarLayout</code> + <code>CollapsingToolbarLayout</code>. </p>

<p><strong><code>Fragment</code>'s XML:</strong> </p>

<pre><code>&lt;android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/primaryDark"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"&gt;

    &lt;android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"&gt;

        &lt;android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/my_wedding_banner_height"
            android:minHeight="48dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"&gt;

            &lt;RelativeLayout
                android:id="@+id/banner"
                android:layout_width="match_parent"
                android:layout_marginTop="0dp"
                android:layout_height="match_parent"
                app:layout_collapseMode="none"&gt;


            &lt;/RelativeLayout&gt;

            &lt;android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                android:animateLayoutChanges="true"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextColor="@color/primary"
                app:tabSelectedTextColor="@color/primary"
                app:tabIndicatorColor="@color/accent"
                app:tabIndicatorHeight="4dp"
                app:tabTextAppearance="@style/TabStyle"/&gt;

        &lt;/android.support.design.widget.CollapsingToolbarLayout&gt;

    &lt;/android.support.design.widget.AppBarLayout&gt;

        &lt;com.wedmegood.planner.view.XViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" /&gt;

&lt;/android.support.design.widget.CoordinatorLayout&gt;
</code></pre>

<p>The fragment has a banner, the RelativeLayout. I want to sync scroll of these two <code>AppBarLayouts</code> so that the outer AppBar collapses either before/after (doesn't matter if it happens before or after) the inside AppBar collapses? I tried setting and unsetting scroll flags of 2 AppBars depending on their Offset change listener, it kinda works but doesn't give a smooth scroll effect. I can change the fragment's XML completely as long as the banner works fine.</p>

<p>Also, is there a way to change style / call TabLayout's setTabTextColors when CollapsingToolbarLayout collapses/expands?</p>