RecyclerView with background image at top

Question

What I'm trying to achieve is this:

As you can see, there is a background image that appears slightly behind the first card in the RecyclerView.

When the user scrolls, the background image, as well as the "Discover" text and icon, should also scroll off the screen.

I've looked into putting the RecyclerView into a NestedScrollView, but from what I've read, this breaks the RecyclerView and doesn't allow it to recycle views (I could be wrong).

How would I achieve something like this? Right now, my layout is very bare bones:

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

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

Thanks.

Cyclohexane

Answer 1

Background image that appears slightly behind the first card in the RecyclerView.

You can do that using CollapsingToolbarLayout, it will hide parallax the background behind. Note: using app:behavior_overlapTop to make RecyclerView loverlap the the background.

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

    <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:layout_width="match_parent"
            android:layout_height="300dp"
            app:titleEnabled="false"
            app:expandedTitleMarginBottom="94dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?colorPrimary"
            >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:src="@drawable/london_flat"
                android:tint="#BB3E50B4"
                android:scaleType="centerCrop"
                />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@null"
                app:layout_collapseMode="pin"
                style="@style/ToolBarWithNavigationBack"
                />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:behavior_overlapTop="78dp"
        android:layout_margin="8dp"
        android:background="@color/cardview_light_background"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

    </android.support.v7.widget.RecyclerView>

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

And the result:

Akeyla