Develop Reference

Android making ViewPager scroll with parent activity layout

I have an android app in which I am trying to create the below layout -
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cl_root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<LinearLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:background="#color/tab_primary_background"
android:layout_height="wrap_content"
app:elevation="5dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
app:subtitleTextColor="#color/white"
app:title="#string/app_name"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:titleTextColor="#color/white" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_weight="1"
android:fillViewport="true"
android:layout_height="0dp">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:paddingStart="15dp"
android:paddingEnd="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_marginTop="15dp"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:src="#drawable/teacher_onboarding_step2"
android:layout_height="60dp"
android:layout_gravity="center"
android:textAlignment="center"
android:contentDescription="#string/take_test" />
<TextView
android:layout_width="match_parent"
android:id="#+id/tat_title_placeholder"
style="#style/TextAppearance.Text.Light"
android:textSize="14sp"
android:textAlignment="center"
android:padding="15dp"
android:text="#string/tat_title_placeholder"
android:layout_height="wrap_content" />
<com.mindorks.placeholderview.PlaceHolderView
android:layout_width="match_parent"
android:id="#+id/fixed_test_placeholder"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:id="#+id/tat_tab_layout"
app:tabIndicatorColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabBackground="#color/tab_primary_background"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/tat_viewpager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.Design.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/white"
app:headerLayout="#layout/drawer_header"
app:itemBackground="#color/white"
app:itemIconTint="#color/black_effective"
app:itemTextColor="#color/black_effective"
app:menu="#menu/drawer">
<TextView
android:id="#+id/tv_app_version"
style="#style/TextStyle.Title.Sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:padding="5dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
So, in this layout as you can see I want to add a TabLayout and a ViewPager below some views. Now the problem I am facing is my ViewPager is restricted to the available space at the bottom of the screen so, only the viewpager is scrollable and not the full activity layout. Which leaves very little space at the bottom to see the viewpager contents.
So, I want to make the whole layout below the appbar scrollable from the top so that the fragments inside viewpager are easily and conveniently visible.
------------Update---------
I tried using the Nested Scroll View, setFillViewPort, and the collapsing layout as suggested but still getting the same result.
Updated layout xml with Collapsing ToolbarLayout -
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cl_root_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.urtutors.students.mvp.utils.MyNestedScrollView
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<com.urtutors.students.mvp.utils.WrapContentHeightViewPager
android:id="#+id/tat_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</com.urtutors.students.mvp.utils.MyNestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:background="#color/tab_primary_background"
android:layout_height="wrap_content"
app:elevation="5dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:paddingStart="15dp"
app:layout_collapseMode="parallax"
android:paddingEnd="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_marginTop="15dp"
android:layout_height="wrap_content">
<ImageView
android:layout_width="60dp"
android:src="#drawable/teacher_onboarding_step2"
android:layout_height="60dp"
android:layout_gravity="center"
android:textAlignment="center"
android:contentDescription="#string/take_test" />
<TextView
android:layout_width="match_parent"
android:id="#+id/tat_title_placeholder"
style="#style/TextAppearance.Text.Light"
android:textSize="14sp"
android:textAlignment="center"
android:padding="15dp"
android:text="#string/tat_title_placeholder"
android:layout_height="wrap_content" />
<com.mindorks.placeholderview.PlaceHolderView
android:layout_width="match_parent"
android:id="#+id/fixed_test_placeholder"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/Toolbar"
app:layout_collapseMode="pin"
app:subtitleTextColor="#color/white"
app:title="#string/app_name"
app:titleTextAppearance="#style/Toolbar.TitleText"
app:titleTextColor="#color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:id="#+id/tat_tab_layout"
app:tabIndicatorColor="#color/white"
app:tabSelectedTextColor="#color/white"
app:tabBackground="#color/tab_primary_background"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.Design.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/white"
app:headerLayout="#layout/drawer_header"
app:itemBackground="#color/white"
app:itemIconTint="#color/black_effective"
app:itemTextColor="#color/black_effective"
app:menu="#menu/drawer">
<TextView
android:id="#+id/tv_app_version"
style="#style/TextStyle.Title.Sub"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:padding="5dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
The nested scroll views I copied from - https://github.com/TheLittleNaruto/SupportDesignExample/tree/master/app/src/main/java/com/thelittlenaruto/supportdesignexample/customview
Now, the viewpager is scrolling but my actionbar title is not visible anymore.
Can someone suggest any changes to this layout that could fix this issue ?

I have tried to refine your code and if I am not wrong you wanted it to be scrollable,you can try the following code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/cl_root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false">
<LinearLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:elevation="5dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:subtitleTextColor="#android:color/white"
app:title="#string/app_name"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="vertical"
android:paddingEnd="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingStart="15dp">
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:contentDescription="#string/take_test"
android:src="#mipmap/ic_launcher"
android:textAlignment="center" />
<TextView
android:id="#+id/tat_title_placeholder"
style="#android:style/TextAppearance.Medium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="#string/tat_title_placeholder"
android:textAlignment="center"
android:textSize="14sp" />
<View
android:id="#+id/fixed_test_placeholder"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:layout_height="400dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="500dp"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tat_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabPadding="#dimen/s_padding"
app:tabBackground="#color/colorPrimaryDark"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white" />
<android.support.v4.view.ViewPager
android:id="#+id/tat_viewpager"
android:layout_width="match_parent"
android:background="#color/colorPrimaryDark"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
style="#style/Widget.Design.NavigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header_nav"
app:itemBackground="#android:color/white"
app:itemIconTint="#android:color/black"
app:itemTextColor="#android:color/black"
app:menu="#menu/activity_nav_drawer">
<TextView
android:id="#+id/tv_app_version"
style="#style/TextAppearance.AppCompat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:padding="5dp" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I have made minor changes.
Try not to use weights when using scrollView.As they don't work so
well with each other.
I have wrapped Tab layouts in a Linear Layout
and gave it static height(can be replaced easily).
Hope it helps.

CoordinatorLayout Scrolling and Pinning

I have : There is 1. Toolbar, 2. ViewPager, 3. TabLayout, 4. small ViewPager, 5. ViewPager for Fragment which has RecyclerView :)
Desired: When RecyclerView inside 5. ViewPager at below is scrolled, 1.Toolbar, 3.TabLayout, 4.ViewPager must be pinned and ONLY 2.ViewPager should be scrolled and gone like below:
Problem: I can't only pin 2.ViewPager without pinning 1.Toolbar. So it is like, i pin both 1.Toolbar and 2.ViewPager or none of them.
Question: How to only hide 2.ViewPager when scrolling?
Code:
<?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:id="#+id/coordinatorLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_shadow"
android:gravity="center_horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarLogoFeedNew"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center"
android:gravity="center"
android:src="#drawable/fenerbahce_logo" />
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/mavi_bg_gradient"
app:layout_scrollFlags="scroll|enterAlways" />
<LinearLayout
android:id="#+id/layoutTabAndSkor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/haberler_bg"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/genel_haberler_bant"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/color_light_gray"
app:tabTextAppearance="#style/tabLayoutTextAppearance"
app:tabTextColor="#color/color_white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<com.pordiva.coreproject.component.NonSwipableViewPager
android:id="#+id/viewPagerPostsFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_shadow"
android:gravity="center_horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarLogoFeedNew"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center"
android:gravity="center"
android:src="#drawable/fenerbahce_logo" />
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/mavi_bg_gradient"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/layoutTabAndSkor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/haberler_bg"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/genel_haberler_bant"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/color_light_gray"
app:tabTextAppearance="#style/tabLayoutTextAppearance"
app:tabTextColor="#color/color_white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</LinearLayout>
<com.pordiva.coreproject.component.NonSwipableViewPager
android:id="#+id/viewPagerPostsFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white" />

If i underestood that correctly, you can use CollapsingToolbarLayout with this flag:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Which says:
Scroll the view and after it Collapsed, exit (or your purpose, hide it
after Collapsed).
Here is a good example of how that is working: https://github.com/TheLittleNaruto/SupportDesignExample
Just put your contents into it for after it collapsed, then it will hide or exit that view.i think this is what you were looking for.
EDIT: use it with your own implementation.
Or something like this actually:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp" />
<!--Perhaps a ViewPager-->
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
app:tabMode="scrollable" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
Hope that helps.

Viewpager overflows the screen inside coordinator layout

I'm trying to use the design support library to implement tabs. The issue is that the viewpager overlaps the toolbar and tablayout when i remove the attribute
app:layout_behavior="#string/appbar_scrolling_view_behavior"
of the viewpager.
viewpager overlaps the toolbar and tablayout
and when i add the attribute the viewpager overflows the screen.
viewpager overflows the screen
I just need the viewpager to occupy the space left after the tablayout and the toolbar and not overflow the screen...
Here is my activity_main.xml
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<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/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
</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>
and here is my fragment_1.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tV_item1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:gravity="center"
android:text="#string/tab1_q_persons"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0 people"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/iV_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iV_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="#+id/nextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="end"
android:background="#color/colorPrimary"
android:elevation="12dp"
android:text="#string/next" />
</RelativeLayout>
</LinearLayout>
Any help will be appreciated

I know it seems late. But I send my answer.
In activity_main.xml use RelativeLayout instead of CoordinatorLayout and you can remove AppBar. For defining Toolbar as AppBar you can use this code in MainActivity.java:
Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
In fragment_1.xml use another widget like CardView or ScrollView instead of LinearLayout or you may use LinearLayout inside of replaced widget.
activity_main.xml
<RelativeLayout
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.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/ThemeOverlay.AppCompat.Light"
android:layout_alignParentTop="true"/>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
android:layout_below="#id/toolbar"/>
<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:layout_below="#id/tablayout" />
</RelativeLayout>
fragment_1.xml
<android.support.v7.widget.CardView
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/tV_item1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:gravity="center"
android:text="#string/tab1_q_persons"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="0 people"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/iV_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/iV_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:id="#+id/nextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="end"
android:background="#color/colorPrimary"
android:elevation="12dp"
android:text="#string/next" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
This solution solved same problem for me.

If you don't really need the AppBar Layout, remove it.
<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.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/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
This code works fine for me.

Coordinator Layout reset position when scrolling up or down

I have a CoordinatorLayout with an AppBarLayout and a CollapsingToolbarLayout. In CollapsingToolbarLayout I'm using a LinearLayout showing user info as a layout_collapseMode=parallax element, below of it, a TabLayout.
The behaviour that I expect is a smooth hiding of the user info while the TabLayout is scrolling up or down.
The problem is that the items positions are reset when I scroll down a bit, hiding entirely the user info 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:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/home_green_gradient"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="2dp">
<!-- user info -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="244dp"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="horizontal"
app:layout_collapseMode="parallax">
<LinearLayout
android:id="#+id/profile_store_index_layout"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="40dp"
android:layout_marginTop="44dp"
android:layout_toLeftOf="#+id/profile_imageview"
android:background="#drawable/home_small_circle_background"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_store_white_18dp"
android:tint="#color/up_green"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:text="100%"
android:textColor="#color/white_color"
android:textStyle="bold"/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_imageview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="24dp"
android:src="#drawable/dummy_worker_office"
app:border_color="#color/dark_green"
app:border_width="6dp"/>
<TextView
android:id="#+id/profile_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_imageview"
android:gravity="center_horizontal"
android:text="Juan Rojas Torres"
android:textColor="#color/white_color"
android:textSize="18sp"/>
<TextView
android:id="#+id/profile_company_executions"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_name"
android:gravity="center_horizontal"
android:text="User name"
android:textColor="#color/dark_green_text"
android:textSize="12sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_company_executions"
android:src="#drawable/bottom_image"/>
</RelativeLayout>
<!-- Tabs at bottom -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/fragment_fragment_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/dark_green"
app:layout_collapseMode="pin"
app:tabGravity="fill"
app:tabIndicatorColor="#color/frogmi_indicator_color"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/frogmi_white_color"
app:tabTextColor="#color/frogmi_non_selected_green_text"/>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/fragment_fragment_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
```

AppBarLayout isn't working with Toolbar and Tabs

I am trying to use the AppBarLayout with Toolbar and Tabs so that Toolbar becomes hidden when user scrolls.
I tried to do it exactly the same way as Cheesesquare example but it still doesn't work.
Here is my XML code:
<RelativeLayout
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"
tools:context="com.izzivizzi.avant2go.activities.ACLoginActivity"
android:background="#color/activity_background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/green"
android:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_big"
android:layout_marginBottom="#dimen/margin_big"
android:orientation="vertical"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textSize="30sp"
android:text="#string/avantcar"/>
<View
android:layout_width="300dp"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="#color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="center"
android:textColor="#color/white"
android:textSize="18sp"
android:text="#string/main_slogan"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:layout_below="#id/toolbar"
app:tabIndicatorColor="#color/primary"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/primary"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</RelativeLayout>
I've also tried replacing RelativeLayout with CoordinatorLayout but it doesn't work.