Multiple elements share a common background

Question

I'm making this app and I've got the status bar, action bar and page slider all right next to each other. I would like to put a common background on top of those, and fade it away when the user scrolls.

This is much like how the "Now for Reddit" app looks. Please guide me in how to do that. Thank you!

Current Code:

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

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:id="@+id/toolbar"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        >
    </android.support.v7.widget.Toolbar>

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:background="#3F51B5"
        android:textSize="14sp"
        android:fontFamily="sans-serif-light"
    />

    <android.support.v4.view.ViewPager 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" 
        android:id="@+id/pager"
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        tools:context="com.politicsappv2.MainActivity" />

    <FrameLayout 
        android:id="@+id/container" 
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

For the PagerSlidingTabStrip, I am using this git repo

This is what it looks like currently:

But this is the goal:

Answer 1

I think one way of doing something similiar is using CollapsingToolbarLayout along with AppBarLayout. Where you can define an ImageView to behave as your "background", and it'll disappear on scrolling.

An example taken from this git repo from TheLittleNaruto:

Here's an example XML Layout, taken from this repository:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    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"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

---

EDIT: You can put any View as a "header" on the CollapsingToolbarLayout, even complex ones inside layouts, not only an ImageView.

Example:

<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"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleMarginStart="48dp"
    app:expandedTitleMarginEnd="64dp">

    <include layout="@layout/custom_header" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:elevation="@dimen/mds_elevation_appbar"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:layout_collapseMode="pin" />

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

custom_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rl_mod_detail_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_collapseMode="parallax"
    android:background="@color/light_gray">

    <!-- Any other views in here, in any way you'd like to show them. -->

</RelativeLayout>