Develop Reference

AppBarLayout preventing RecyclerView from scrolling in BottomSheet

I made a simple layout in which there is a AppBarLayout (that doesn't scroll), some content in the middle, and a BottomSheet. This BottomSheet is actually a LinearLayout with a BottomSheetBehavior and inside has a RecyclerView.
This BottomSheet when expanded places the RecyclerView on top of the AppBarLayout. The problem is that, when the user tries to scroll this RecyclerView, the AppBarLayout below steals the scroll.
I'm leaving the layout code, but I uploaded the whole example project to GitHub with a GIF to illustrate.
Layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:liftOnScroll="false">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?colorSurface"
android:gravity="center_vertical"
android:padding="16dp"
android:text="Subtitle"
android:textAppearance="?textAppearanceSubtitle1" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="?colorSurface"
android:gravity="center_vertical"
android:padding="16dp"
android:text="Subsubtitle"
android:textAppearance="?textAppearanceBody2" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="56dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="#string/lorem_ipsum"
android:textAppearance="?textAppearanceBody1" />
</androidx.core.widget.NestedScrollView>
<LinearLayout
android:id="#+id/bottom_sheet_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:background="#FFF"
android:elevation="5dp"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="64dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/bottom_sheet_header"
android:layout_width="match_parent"
android:layout_height="64dp"
android:gravity="center_vertical"
android:padding="16dp"
android:text="Fruits"
android:textAppearance="?textAppearanceHeadline6" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I've tried:
Placing the nestedScrollingEnabled attribute in various places, but didn't work and this behavior occurs in old APIs (like JellyBean);
In the original project where I saw this I wrote a custom AppBarLayout behavior to ignore if the target View is the RecyclerView of the BottomSheet, but also didn't work;
Set the whole AppBarLayout GONE when the BottomSheet is expanded and funny enough the AppBarLayout behaves like I set to INVISIBLE (if programmatically set to GONE, it behaves like invisible, if set before inflating, it behaves as expected).
I'm avoiding use a Fragment to create this BottomSheet due to project specifications.

The workaround I did was split the CoordinatorLayout in 2, where one contains the AppBarLayout and the NestedScrollView, and the other one contains the BottomSheet (LinearLayout).
The hierarchy, using the layout of the question as example, end up like this:
<FrameLayout>
<CoordinatorLayout>
<AppBarLayout>
<MaterialToolbar/>
<AppCompatTextView/>
<AppCompatTextView/>
</AppBarLayout>
<NestedScrollView>
<AppCompatTextView/>
</NestedScrollView>
</CoordinatorLayout>
<CoordinatorLayout>
<LinearLayout>
<AppCompatTextView/>
<RecyclerView/>
</LinearLayout>
</CoordinatorLayout>
</FrameLayout>
In my case this works because my BottomSheet doesn't need to coordinate any behavior with the other views.

BottomNavigationView overlaying content when using Toolbar with scrolling view behavior

I'm having difficulties getting AppBarLayout, NestedScrollView and BottomNavigationView working together properly. My problem is that when I set app:layout_behavior="#string/appbar_scrolling_view_behavior" on the NestedScrollView, it extends behind the BottomNavigationView as illustrated here.
So the issue is that the BottomNavBar overlays the content, instead of the content stopping at the top of the Nav.
I've tried many solutions, including wrapping the layout in a RelativeLayout and putting the BottomNavView in that instead of the CoordinatorLayout.
Here's the basic layout from the sample project I've attached.
<androidx.coordinatorlayout.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.navigationadvancedsample.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Here's a small sample project that reproduces the issue (based on the Navigation components sample from Google). Can someone please tell me what I'm doing wrong?

You just have to take BottomNavigationView out of the CoordinatorLayout and put both inside a RelativeLayout.
I was facing same problem and found the solution here. Hope it helps.

In your code, your NestedScrollView was taking up the whole screen. Using a vertical LinearLayout with weights you can make it to where the NestedScrollView stops at the top of the NavBar like you want.
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="0dp" *** changed from match_parent to 0dp
android:layout_weight="1" *** added weight to fill remaining screen
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/> *** changed from 0dp to match_parent
</androidx.core.widget.NestedScrollView>
The way it now is set up takes into account the NavBar and expands the layout of the NestedScrollView to fill the remaining empty space on the screen. Now the NestedScrollView will not expand beyond the NavBar.

Not sure . But seem like working in preview . Putting nestedScrollView and BottomNavigation view inside a relative layout .
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/app_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_nav"
android:fillViewport="true" android:layout_marginBottom="-2dp">
<FrameLayout
android:id="#+id/nav_host_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav_menu"/>
</RelativeLayout>

Achieving proper scrolling with RecyclerView, android jetpack navigation and a collapsing Toolbar

I try to implement proper scroll behaviour with the following setup in my android application.
For navigation I use the jetpack navigation in combination with a Toolbar layout and a bottom navigation. I also use the principle of 'one activity, many fragments'. Each item of the bottom navigation launches a corresponding Fragment based on my navigation graph. This requires me to use a NavHostFragment in my layout.
My Toolbar layout is part of the activity layout and gets populated based on the current fragment. Some fragments require a collapsing Toolbar, which also gets added when needed. But when having a collapsing toolbar I face the following problem:
In the particular case I have a collapsing Toolbar, the NavHostFragment is populated with a RecyclerView. In other cases it appears I can add app:layout_behavior="#string/appbar_scrolling_view_behavior" to the RecyclerView and get the expected result, because the RecyclerView is a direct child of the CoordinatorLayout. In my case the RecyclerView is a child of a Fragment, which is basically a FrameLayout (according to the Layout Inspector). This leads to the problem, that the layout_behaviour on the RecyclerView has no effect as the RecyclerView is not a direct child of the CoordinatorLayout.
I couldn't come up with a working solution for this problem. Does anybody have an idea?
layout/activity_overview.xml
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".OverviewActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/toolbarCoordiantor"
android:layout_marginTop="?attr/actionBarSize"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/overview_bottom_navigation"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<fragment android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/overview_fragmentholder"
android:name="androidx.navigation.fragment.NavHostFragment"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintBottom_toBottomOf="parent"
app:defaultNavHost="true"
android:layout_marginBottom="?attr/actionBarSize"
android:layout_marginTop="?attr/actionBarSize"
app:navGraph="#navigation/nav_graph"
app:layout_constraintVertical_bias="1.0"/>
<include layout="#layout/toolbar"
android:id="#+id/toolbar"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/overview_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foregroundGravity="bottom"
app:menu="#menu/navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:itemBackground="#color/white"
app:itemIconTint="#color/bottom_navigation_color_states"
app:itemTextColor="#color/bottom_navigation_color_states"/>
layout/toolbar.xml
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap|snapMargins"
android:minHeight="?attr/actionBarSize">
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/expandedToolbarContentContainer"
android:layout_marginTop="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
<androidx.appcompat.widget.Toolbar android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
style="#style/AppTheme.DarkToolbar"
android:id="#+id/toolbarView">
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/round_outline"
style="#style/AppTheme.DarkToolbar.Container"
android:id="#+id/toolbarContentContainer"/>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
layout/list.xml
<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/dish_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layoutAnimation="#anim/layout_animation_fall_down"
/>

Try to wrap up host_fragment with NestedScrollView with needed behaviour, like this:
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:transitionGroup="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/my_nav_host" />
</androidx.core.widget.NestedScrollView>

Jurij Pituljas approach will prevent scrollToPosition method of RecyclerView to work. Addidionally navigating back to fragments with RecyclerView will reset its scroll position to the top.
A better approach is described here. Even there is no need for the surrounding FrameLayouts in the referenced article. Instead of wrapping the fragment within a NestedScrollView, just wrap any non scrolling fragment layout views into a NestedScrollView.
Activity layout with NavHostFragment: No need to wrap the fragment into a scrolling view. Just set the layout_behavior.
...
<fragment
android:id="#+id/navigation_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:navGraph="#navigation/navigation_graph" />
...
Fragment layout with root RecyclerView: Nothing special to do at all as RecyclerView has scrolling capabilities.
<androidx.recyclerview.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
Fragment layout with e.g. TextView: Wrap within root NestedScrollView to add scrolling capabilities.
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="non scrolling content wrapped" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>

Implementing app:hideOnScroll for BottomAppBar in Android

I have an app with the one Activity, many Fragments model, where several Fragments have a RecyclerView to show cards with content. I also have implemented the BottomAppBar from Material Design 2.0, and everything is fine except when the AppBar blocks the last CardView in the RecyclerView.
In terms of layout, I have a RecyclerView inside ConstraintLayout inside a Fragment, which sits in a FrameLayout in the main activity.
The documentation shows that for the BottomAppBar to be hidden on Scroll, we need to implement RecyclerView inside a NestedScrollView. There is one question here on SO where the answer has stated the same as well, but there seems to be no actual documentation or examples to demonstrate how this is to be done, except for this article on Medium, which uses the NestedScrollView in an Activity directly, holding a CoordinatorLayout which holds a ConstraintLayout.
Note: I think it also works on magic, because duplicating the layout in my fragment doesn't have any effect at all in my app.
How do I use NestedScrollView here?
PS : I need to have the TextView, as I set the RecyclerView to VISIBILITY.GONE and set the TextView to VISIBLE when I have no data to display.
Fragment Layout
<android.support.constraint.ConstraintLayout 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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="in.domain.APPNAME.Fragments.FragmentList">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewIncident"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="30dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/emptyView"
android:layout_width="wrap_content"
android:layout_height="17dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="No Incidents to display"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Activity Layout
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/uberLayout"
tools:context=".APPNAME">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/containerFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="#drawable/baseline_menu_white_24dp"
app:hideOnScroll="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.bottomappbar.BottomAppBar>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:clickable="true"
android:src="#drawable/baseline_add_white_24dp"
app:backgroundTint="#color/brightred"
app:fabSize="normal"
app:layout_anchor="#+id/bottom_app_bar"
tools:layout_editor_absoluteX="160dp"
tools:layout_editor_absoluteY="465dp" />
</android.support.design.widget.CoordinatorLayout>
</android.support.design.widget.CoordinatorLayout>

you shouldn't put the BottomAppBar and the FloatingActionButton in a separate CoordinatorLayout. Ditch the CoordinatorLayout they're in, the ConstraintLayout around your FrameLayout and that may already solve the problem.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/uberLayout"
tools:context=".APPNAME">
<FrameLayout
android:id="#+id/containerFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<android.support.design.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorPrimary"
app:fabAlignmentMode="center"
app:navigationIcon="#drawable/baseline_menu_white_24dp"
app:hideOnScroll="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:src="#drawable/baseline_add_white_24dp"
app:backgroundTint="#color/brightred"
app:fabSize="normal"
app:layout_anchor="#+id/bottom_app_bar" />
</android.support.design.widget.CoordinatorLayout>
I'm using a similar layout, the only difference being a <fragment> instead of a <FrameLayout>, and the BottomAppBar hides on scroll just fine. We don't need to use a NestedScrollView, if our scrolling content is a RecyclerView anyway, because RecyclerView implements NestedScrollingChild.
This interface should be implemented by View subclasses that wish to support dispatching nested scrolling operations to a cooperating parent ViewGroup.

Add items before recyclerview

I have an activity with a recycler view. But I need to add an image before recycler view (like instagram stories before feed). How do I implement it?
my xml file
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:title="Locations"
app:titleTextColor="#color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/cropmap"
tools:listitem="#layout/item_marker" />
<ImageView
android:id="#+id/cropmap"
android:layout_width="match_parent"
android:layout_height="168dp"
android:background="#drawable/cropmap" />
<ProgressBar
android:id="#+id/main_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.design.widget.CoordinatorLayout>
Thanks!

The perfect way of doing this is to take advantage of "Item View type" in recyclerview. Basically what you should be doing is populating the image on top inside the recyclerview itself. The image will appear as the first item in recyclerview and other items will come subsequently. This can be implemented by using ItemViewType in recyclerview.
Some useful resources can be found here and here

<LinearLayout
android:layout_width="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
android:weightSum="10">
<ImageView
android:id="#+id/cropmap"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/cropmap"
android:layout_weight="3" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:scrollbars="vertical"
tools:listitem="#layout/item_marker"
android:layout_weight="7" />
</Linearayout>
<ProgressBar
android:id="#+id/main_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.design.widget.CoordinatorLayout>

Take advantage of the full potential of fragments. You can set a FrameLayout between your top bar and recyclerView, and then add a fragment there, or just simply use the <fragment> tag on your xml. For more info about flexible UI, please take a look in the Android documentation here.
Think of this fragment as your other section, like the Instagram example you just gave. There you can add what you want (ViewPager, HorizontalScrollView, etc), and be reflected when you inject the fragment in your layout.