Develop Reference

I have a Collapsing toolbar and nested scroll view, I cant make it work

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.RestaurantMenuActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:elevation="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolMenuBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark" />
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="50dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
>
<ImageView
android:id="#+id/rest_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/restaurant_image"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="250dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="450dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewRestaurantMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
/>
<RelativeLayout
android:id="#+id/relativeLayoutProceedToCart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:visibility="invisible">
<Button
android:id="#+id/btnProceedToCart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red"
android:text="Proceed to Cart"
android:textColor="#color/white" />
</RelativeLayout>
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<RelativeLayout
android:id="#+id/progressMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<ProgressBar
android:theme="#style/CircularProgress"
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
This is the Xml file, and I have a collapsing toolbar and a nested scroll view, but it isn't working, when I scroll the page the collapsing toolbar isn't working.
I have an image in the collapsing toolbar and a recycler view in the nested scroll view, when I scroll the recycle view the image view should collapse. But that isn't happening and is acting like a normal thing.

Having a recycler view as only child of nested scroll view is a bad practice since you are essentially taking away the one powerful aspect of recyclerview this way. Instead make the rest of the layout a part of nested layout as well and make recycler view android:nestedScrollingEnabled=false
After that add app:layout_behavior="#string/appbar_scrolling_view_behavior" to nested scroll view.
Edit:-
Try adding toolbar inside collapsingToolbar with
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
Since collapsing toolbar is a frame layout you may have to adjust some margins to make it look like what you have right now

Prevent AppBarLayout.ScrollingViewBehavior from adding top margin to the view?

I'm trying to achieve a layout where my view will extend all the way across the screen, under the ActionBar, and the ActionBar will be transparent. I also need the ActionBar and BottomNavigationView to hide on scroll, so I'm using CoordinatorLayout.
I'm using the AppCompat theme with the attribute <item name="windowActionBarOverlay">true</item> in order to have my views extend under the ActionBar. However, after adding app:layout_behavior="#string/appbar_scrolling_view_behavior" to my container Fragment, the view gets placed below the ActionBar.
Is there a way to prevent this part of the appbar_scrolling_behaviour? I've tried without the behaviour, but the scrolling of the AppBar is not synced witht he RecyclerView scrolling underneath it. Thank you!
Here's a gif of the problem
P.S.: I'm trying to use the Android Navigation Component, so I'm following a single activity, multi fragment architecture, if that matters.

Try this code and make some changes because i used androidx..
make main layout like this way..
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#color/white">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
android:theme="#style/MyToolbar"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:titleTextAppearance="#style/MyToolbar">
<ImageView
android:id="#+id/headerIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_6sdp"
android:src="#drawable/ic_edit_location_black"
android:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_6sdp">
<TextView
android:id="#+id/header"
style="#style/MyToolbar"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize"
android:gravity="center_vertical"
android:textColor="#color/primary"
app:layout_constraintStart_toStartOf="parent" />
<ImageView
android:id="#+id/ivSearch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_10sdp"
android:src="#drawable/search_icon"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/activity_main_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomContainer"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
<RelativeLayout
android:id="#+id/bottomContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bvTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Widget.BottomNavigationView"
app:itemIconTint="#drawable/navigation_drawable_tint"
app:itemTextColor="#drawable/navigation_drawable_tint"
app:menu="#menu/bottom_menu_item" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

BottomNavigationView does not hide on scroll - NestedScrollView in viewpager

I have bottom navigation bar and viewpager inside coordinator layout, every fragment inside viewpager has own collapsing toolbars,
but app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior" doesn't work for me.
Also I don't want to do bottomNav.setVisibility(View.GONE); by listening the my nested scrollviews (inside fragments), because it hasn't animation. this is my last option.
My Activity
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".market.MarketActivity">
<com.example.x.custom.NonSwipeableViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:labelVisibilityMode="labeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:layout_insetEdge="bottom"
app:itemIconTint="#drawable/bottom_navigation_selector"
app:itemTextColor="#drawable/bottom_navigation_selector"
app:menu="#menu/bottom_navigation_menu"
android:theme="#style/Widget.BottomNavigationView"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
One of the fragments (In the content view there is an nested scrollview. I set its layout behavior)
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".testproject.ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_height="140dp"
android:minHeight="56dp"
app:elevation="0dp"
android:layout_width="match_parent">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:expandedTitleGravity="bottom|left"
app:expandedTitleMarginStart="14dp"
app:expandedTitleMarginBottom="60dp"
app:collapsedTitleTextAppearance="#style/CollapsingToolbarTextStyleBlack"
app:expandedTitleTextAppearance="#style/CollapsingToolbarTextStyleBlack"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="#color/white">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:titleMarginStart="0dp"
android:gravity="top"
android:layout_marginBottom="48dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorFullWidth="false"
app:tabTextColor="#color/warm_grey"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/lipstick"
android:layout_gravity="bottom"
app:tabTextAppearance="#style/TabLayoutTextStyle"
android:paddingRight="6dp"
android:paddingLeft="6dp"
>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/main_market">
</com.google.android.material.tabs.TabItem>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/high_yield"/>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/perpetuals"/>
<com.google.android.material.tabs.TabItem
android:id="#+id/tabItem4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/special_situations"/>
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_market"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Those links didn't work
Hide/Show bottomNavigationView on Scroll
Show/hide BottomNavigationView on scroll in CoordinatorLayout with AppBarLayout
When scroll bottom navigation bar does not hide - BottomNavigationBehavior
BottomNavigationView does not hide on scrolling inside fragment, if fragment contains AppBarLayout

it's too altho the
BottomNavigationView
is in the Activity so it's will work only if you are scrolling in the Activity.
you can do something like this https://stackoverflow.com/a/44778453/7373745

How to put RecyclerView below Toolbar and above TabLayout and ViewPager also handling responses to scrolls in a custom manner?

I want to create a layout like the below image:
A CoordinatorLayout which contain :
CollapsingToolbarLayout( contain ImageView & Toolbar)
RecyclerView
TabLayout
ViewPager( that each fragment of it contain a RecyclerView)
I wanna responding to scroll events in this way:
CollapsingToolbarLayout expand and collapse by scrolling
Toolbar sticks to the top until TabLayout reach to the top
After that toolbar scroll up and TabLayout stick to the top
I'm having trouble with the RecyclerView between CollapsingToolbarLayout and TabLayout. I can implement this layout without that RecyclerView( I put CollapsingToolbarLayout and TabLayout inside the AppBarLayout and the ViewPager outside it, inside the CoordinatorLayout).
My Question:
Where should I put that RecyclerView?
Which & where layout_scrollFlags and layout_behavior should I set for each layouts?
It seems that AppBarLayout have a limited height. When I put the RecyclerView inside AppBarLayout, only a portion part of the RecyclerView is visible and also TabLayout disappear.
I read lots of tutorials like this one and lots of questions like this one and this one, but non of them help me.

use this as a main layout
activity_main
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout 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/swipe_refresh_layout_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="RtlHardcoded">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/co_profile_activity_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:visibility="visible">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_img_placeholder_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/rel_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop">
<ImageView
android:id="#+id/img_bg_placeholder_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:tint="#11000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9" />
<LinearLayout
android:id="#+id/lin_top_inner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BF473e6b"
android:orientation="vertical"
android:scaleType="centerCrop">
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:id="#+id/frame_detail_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3">
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_toolbar_height"
android:gravity="top|center"
app:layout_anchor="#id/frame_detail_profile"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/profile_toolbar_title_left_margin"
android:gravity="center_vertical|center"
android:ellipsize="end"
android:singleLine="true"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_profile"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginTop="#dimen/profile_tab_layout_top_margin"
android:background="#color/white"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/charcoal_grey" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
and for grid layout of tabs use adapter classes.

Start with AppBarLayout under which you add CollapsingToolbarLayout with scrollFlags="scroll|exitUntilCollapsed",
add LinearLayout with vertical orientation to CollapsingToolbarLayout and add the
FrameLayout with ImageView + Toolbar
RecyclerView
TabLayout

Two things to be done:-
When the search button is clicked, set the visibility of recycler view to VISIBLE
When the back button is pressed, set the visibility of recycler view to GONE
Following are the implementations:
1. Setting the visibility of recycler view to VISIBLE:
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.searchView) {
rView.setVisibility(VISIBLE);
}
return true;
}
2. Setting the visibility of recycle adapter to GONE
MenuItem searchMenuItem = menu.findItem(R.id.searchView);
MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
recyclerView.setVisibility(GONE);
return true;
}
});
NOTE: Do not forget to keep the visibilty as GONE initially when the activity is started

I know I might be late to this answer but I have also been trying to implement this for a while. The solution I have feels a bit hacky but it is an option for trying to get the tabs to stick. In a simpler solution lets say we wanted the following:
A Collapsing toolbar layout
Which links to a scroll view.
In that scroll view we want the following:
A recyclerview that say scrolls horizontally
Below the recycler view a tab layout
Below the tab layout we want a view pager that will load dynamic fragments within a fixed space.
activity_scrolling.xml the outer parent xml file may look something like this
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".temp.ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="5dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Then the inner content_scrolling.xml may look something like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".temp.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:gravity="center"
android:text="A Heading"
android:textSize="#dimen/text_xl"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/recycler_view"
android:layout_gravity="center"
android:minHeight="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimaryDark" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="680dp"
android:layout_below="#+id/tabs" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
This will allow you to forcefully place the tab layout in a location of your choosing (even if its after a recyler view).
The hacky part which i dont like is this specific line android:layout_height="680dp" which forces the viewpager height to be something specific. I am not sure why wrap_content or match_parent do not work. But this is the best thing to a solution I can provide for the issue of placing TabLayout and ViewPager in specific places.

How to fix the position of a view inside a ViewPager and CoordinatorLayout

I have an activity with the layout of:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="56dp"
android:layout_width="match_parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
app:tabIndicatorColor="#color/indicator"
app:tabMode="scrollable"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
The fragment loaded in ViewPager has a layout of:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="10dp"
android:scrollbars="vertical" />
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/download_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:src="#drawable/ic_btn_download" />
</RelativeLayout>
How can I fix the position (prevent scrolling) of the FloatingActionButton inside the fragment (it scrolls with its parent)?
Note that I couldn't move FloatingActionButton to the activity layout.

You should move your floating action button from your view pager to coordinator layout. From there you can set your floating action button position with
android:layout_gravity="end|bottom"
or
app:layout_anchor="#id/yourViewToAnchor"
app:layout_anchorGravity="bottom|right|end"
And don't forget to put your floating action button on the lowermost of your coordinator layout XML to ensure that your floating action button at the top of your layout.

You should use a FAB in activity layout. .If you need different colors or actions
you can define FAB in your fragment and set the color or the action for each fragment.