Develop Reference

Pin tablayout in Scrollview with appbarlayout

My android app want to have a page like Facebook page which pin the tablayout on top of the screen when scroll below the tablayout.
I have found a few answers on this topic.
pin TabLayout to top and below the toolbar Scrollview
How to make tablayout fixed below action bar?
However, they don't want my app situation because I want to keep my cardview and tablayout in the scrollview. My xml template is as below. Any insight or solution can share?
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap">
//toolbar content
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:id="#+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card1"
android:textAppearance="#style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card2"
android:textAppearance="#style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I believe you are using unnecessary layouts, try following code for guidance -
MainLayout File
<?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">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- you can put any content you want to hide after scroll in header-->
<!-- as example in putting this image view-->
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:padding="20dp"
android:scaleType="fitCenter"
android:src="#drawable/default_img"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.25" />
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:layout_gravity="bottom" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- put content of scroll view here -->
<include layout="scroll_content_layout" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Above layout file will result in following result-
File scroll_content_layout.xml will have content you want as part of your scroll view.
ScrollContentFile
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- some other layout as part of scroll view -->
</LinearLayout>
Edit
Content inside CollapsingToolbarLayout will collaps on scroll. Any View you want to KEEP on TOP on a scroll or any other customization you need to use layout_collapseMode flag.
CollapseMode Parallax: The content will scroll but a bit
slower than nested scroll view. You can control scroll speed with
layout_collapseParallaxMultiplier flag.
CollapseMode Pin: The content will stay in the same place while this place is still inside the collapsing toolbar.
Please check Collapse modes of CollapsingToolbarLayout
Happy coding -

View pager height and recycler view hieght not working inside scroll view

There is a recycler view element in the view pager that contains the random number of lists. The view pager works only if the hard coded height is specified and also the recycler view scroll acts as separate scroll along with the parent.
How can I make the recycler view scroll make a part of main activity scroll to make it a smooth scrolling experience and view pager should automatically take height as per the number of elements in the recycler view dynamically.
Please also suggest some good practice to follow which I may be doing wrong to enhance performance.
Main Layout
dashboard_activity.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.activities.settings.MyActivity">
<!-- This is for the empty condition -->
<include
layout="#layout/first_time_empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<!-- This layout is for the data -->
<include
layout="#layout/layout_data"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
layout_data.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:fadingEdge="none"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout5"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- cards and other chart details -->
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- cards and other chart details -->
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_names_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:elevation="2dp"
app:tabGravity="fill"
app:tabIndicatorGravity="bottom"
app:tabIndicatorHeight="2dp"
app:tabMode="scrollable"
/>
<!--Height of view pager is currently fixed .Have to search for solution with scrollview+viewpager-->
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager_category"
android:layout_width="match_parent"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="500dp" /> <!-- This is the one issue -->
</LinearLayout>
</ScrollView>
Recyclerview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/each_unit_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recycler view data"
/>
</LinearLayout>

Bottom Sheet Above Bottom Navigation

My goal is to place a "bottom sheet" on top of a BottomNavigationView like this:
But it stays the following way. Both views collapse:
This is the xml of my main activity:
<?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:background="#drawable/tierrota"
tools:context="com.example.juanjose.myapplication.ViajesActivity">
<!-- include main content -->
<include layout="#layout/bottomsheet" />
<!-- include bottom sheet -->
<include layout="#layout/bottom_navigation" />
</android.support.design.widget.CoordinatorLayout>
Code of bottom_navigation:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorClarito"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
And code of bottom sheet
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/colorBackgroundSemi"
android:gravity="center"
android:text="Bandeja de entrada"
android:fontFamily="#font/eraslght"
android:textColor="#color/colorLetra"
app:layout_anchor="#+id/bottom_navigation"
app:layout_anchorGravity="top"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="coisa2"
android:textColor="#android:color/white" />
</LinearLayout>
I am new with these two elements. Is there someone who knows any way to achieve what I'm looking for?
I want my "bottom sheet" to act as such and can expand. My ultimate goal is to add a RecyclerView inside the BottomSheet.

To use the BottomSheet, it should be a child of the CoordinatorLayout. Here I have used relative layout as a parent layout for bottom navigation to stay at the bottom and then CoordinatorLayout above bottom navigation.
Here's a article that will help you.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_above="#id/bottom_navigation_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bottom_sheet_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<LinearLayout
android:id="#+id/bottom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="20dp"
android:layout_height="4dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#drawable/view_bottom_sheet_top" />
<TextView
android:id="#+id/near_by"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/normal"
android:gravity="center"
android:includeFontPadding="false"
android:padding="10dp"
android:text="Book Now"
android:textAllCaps="true"
android:textColor="?attr/colorPrimaryText"
android:textSize="12sp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_maps"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bottom_view"
android:layoutAnimation="#anim/layout_animation">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/bottom_navigation_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:fitsSystemWindows="true"
app:elevation="1dp">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorContainerBackground"
/>
<!-- Start BottomNavigationView -->
<!-- End BottomNavigationView -->
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
Don't forget to add this in your Activity/Fragment
private RelativeLayout bottomSheetParentLayout;
private BottomSheetBehavior mBottomSheetBehaviour;
mBottomSheetBehaviour = BottomSheetBehavior.from(bottomSheetParentLayout);
if (bottomNavigation != null) {
mBottomSheetBehaviour.setPeekHeight(bottomNavigation.getHeight() + 90);
}

Wrap the two elements inside a linear layout. Not sure how coordinator layout behaves but I think it will not allow you to "order" elements (similar to frame layout).

As far as I have understood your question, you want the RecyclerView to be shown in your bottom sheet. That is what makes the problem a lot easier. Let me tell you how.
You need to have a fixed height for your bottom navigation like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorClarito"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
Now in your bottom sheet, configure the RecyclerView with a clipToPadding attribute in it. Which will have some padding at the bottom of your RecyclerView. The idea is to have nothing in the covered area of the RecyclerView which is coming out with the bottom sheet.
Here's how you should declare your RecyclerView in your bottom sheet.
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="80dp" />
Note that, I set the paddingBottom exactly to 80dp which is the height of the navigation view.
I hope this might help.

If you also have a CollapsingToolBar/Toolbar arrangement, this is the best solution for you:
<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:clickable="true">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/cord_main_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toTopOf="#id/home_bottom_navigation_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/home_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/home_frag_toolbar"
style="#style/Widget.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:logo="#drawable/ic_infinet_logo_white"
app:navigationIcon="#drawable/ic_back_arrow" />
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/home_frag_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:id="#+id/bottom_sheet_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:clickable="true"
app:behavior_hideable="true"
app:behavior_peekHeight="#dimen/mini_player_height"
app:behavior_skipCollapsed="false"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<FrameLayout
android:id="#+id/player_frag_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
android:id="#+id/player_mini_frag_container"
android:name="com.kokonetworks.kokonet.player.PlayMusicMiniFragment"
android:layout_width="match_parent"
android:layout_height="#dimen/mini_player_height" />
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/home_bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary"
app:itemBackground="#color/colorPrimary"
app:itemHorizontalTranslationEnabled="false"
app:itemIconTint="#drawable/nav_item_background"
app:itemTextColor="#drawable/nav_item_background"
app:labelVisibilityMode="auto"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/home_bottom_navigation_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
It ensures that:
BottomSheet is a child of the CoordinatorLayout
BottomNavigation is still rested at the bottom
CollapsingToolbar/AppBarLayout arrangement is still in place as expected

To use the BottomSheet, it should be a child of the CoordinatorLayout, as iamnaran said.
So simply:
Put everything in RelativeLayout
Put BottomSheet in CoordinatorLayout
Set the BottomNavigation property "alignParentBottom" to true
Make new xml file in /res/value and put
<resources>
<dimen name="bottomNavigationHeight">50dp</dimen>
</resources>
Set the MarginBottom of the CoordinatorLayout (parent of BottomSheet) to
android:layout_marginBottom="#dimen/bottomNavigationHeight"
You can skip steps 4 and 5 by setting the MarginBottom of the CoordinatorLayout to:
android:layout_marginBottom="50dp"
But this may lead to confusion in near future
The whole code should look something like this:
<RelativeLayout
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"
>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/clBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/bottomNavigationHeight">
<FrameLayout
android:id="#+id/standardBottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:elevation="9dp"
style="?attr/bottomSheetStyle"
app:layout_behavior = "com.google.android.material.bottomsheet.BottomSheetBehavior"
app:behavior_peekHeight="80dp">
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bttm_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_menu_nav"
>
</com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>

Place view below AppBarLayout without appbar_scrolling_view_behavior

I am using a CoordinatorLayout that contains an AppBarLayout and a FrameLayout that will hold different fragments at runtime. I need the FrameLayout to always be below the AppBarLayout without using the appbar_scrolling_view_behavior attribute. For reasons (namely trying to get a RecyclerView and a floating footer button to work on the Fragments) I am applying this attribute on the RecylerView in the Fragment. Scrolling works fine except the FrameLayout thinks it should have the full height of the screen. This is usually fixed by the appbar_scrolling_view_behavior, but I cannot use that here. I tried layout_anchor and layout_anchorGravity to literally no effect.
Any ideas?
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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/AppTheme.Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/NavigationTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<!-- Fragments go here; they will set appbar_scrolling_view_behavior themselves -->
<!-- layout_anchor and layout_anchorGravity don't work -->
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|left|right"/>
</android.support.design.widget.CoordinatorLayout>
Layout of one of the fragments:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="vertical"
android:paddingEnd="15dp"
android:paddingStart="15dp">
<!-- Bottom padding is so the last row isn't fully covered by the button -->
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="55dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<Button
android:id="#+id/add_photo_button"
style="#style/ProductActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="15dp"
android:drawableStart="#drawable/white_camera"
android:text="#string/product_photo_add"/>
</FrameLayout>

Fragment from View Pager hiding behind Tab Bar

I am having an issue with a Tab bar and ViewPager in my android project. What the app does it has an activity which hosts a tab layout and then has 2 fragment which represents each of the tabs.
When the activity is opened it posts to an API to get some data and puts the data into a data adapter for a Recycler View and Card layout in each of the fragments.
The recycler view will contain 3 items but only 2 are being shown as the first is being hidden under the toolbar and/or the tab bar as shown in the screenshot below.
Below is the layout file of my activity
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill" />
</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_behaviour="#string/appbar_scrolling_view_behaviour" />-->
</android.support.design.widget.CoordinatorLayout>
Below is the layout of the fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
android:id="#+id/recycler_view"
class="android.support.v7.widget.RecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
</LinearLayout>
Below is the layout for card layout
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:elevation="5dp">
<TextView
android:id="#+id/txtApplicationName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxLines="3"
android:padding="8dp"
android:textColor="#222"
android:textSize="15dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Below is the screenshot as mentioned above which shows the problem. I've pixelated some of the text but it should you what I mean, there should be 3 items but the first item is hiding underneath the tab bar.

Edit: As suggested below by #smeet and #hardik, adding the scroll behavior app:layout_behavior="#string/appbar_scrolling_view_behavior" should fix the problem while preserving the scroll behavior. Scroll behaviors only work if the view is a direct child of the coordinator layout.
Old Answer
Just Wrap your appbar layout and viewpager in a vertical LinearLayout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
//appbar layout
//viewpager
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
From the docs, CoordinatorLayout is a super-powered FrameLayout. So you can expect the typical "lay views on top of other views" FrameLayout behavior.

Adding :
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in ViewPager resolved issue in my case.

if we will wrap app bar layout with linear layout than toolbar will not hide when you scroll so accepted answer might not help you if you want to hide toolbar when you scroll.
Smeet did it right way but not explained! here is full example with explanation.
add app namspace to CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
......
>
and just add below line in your ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
complete xml will be as below
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>