RecyclerView with background image at the top

Question

I am trying to achieve this:

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

When the user scrolls, the background image as well as the text “Search” and the icon should also scroll from the screen.

I considered the question of how to return a RecyclerView to a NestedScrollView , but from what I read , this breaks the RecyclerView and does not allow it (I could be wrong).

How could 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.

Answer 1

A background image that is slightly behind the first map in RecyclerView.

You can do this with CollapsingToolbarLayout , this will hide the background parallax behind. Note: using app:behavior_overlapTop to make the RecyclerView loverlap 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: