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 location Android

I have an android interface use coordinatorLayout,AppBarLayout and NestedScrollView to manage the scroll action.
Before scroll Snapshot
After scroll Snapshot
How do I show the AppbarLayout to the top of the screen when I clicked the comment button after scroll?Just like before scroll.
Here is my layout:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#ececec">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f7f7f7"
android:fitsSystemWindows="true"
android:minHeight="1dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/color_3"
android:layout_margin="10dp"/>
<!--<include layout="#layout/wentixiangqing_dingbu_wentidaan"/>-->
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FFF">
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="star:123"
android:textColor="#797979"/>
<View
android:layout_width="30dp"
android:layout_height="3dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#F00"/>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="30dp"
android:layout_marginRight="20dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="comment:90"
android:textColor="#797979"/>
<View
android:layout_width="30dp"
android:layout_height="3dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#F00"/>
</FrameLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="40dp"
android:layout_marginTop="1dp"
android:overScrollMode="always" />
</android.support.v4.widget.NestedScrollView>
<Button
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="bottom|end"
android:text="Comment" /></android.support.design.widget.CoordinatorLayout>
Any suggestion would be appreciated.

have you tried this code on clicking the button ?
AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.appbar);
appBarLayout.setExpanded(true, true);
Also see this : Hide/Show Toolbar programmatically on CoordinatorLayout

Relative layout is overlapping toolbar in CoordinatorLayout

I have got the following layout 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"
xmlns:fab="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:singleLine="true"
android:text="This will run the marquee animation forever"
android:textColor="#color/white"
android:textSize="#dimen/abc_text_size_title_material_toolbar"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.FloatingActionButton
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/ic_menu_share"
app:layout_anchor="#+id/toolbar"
app:layout_anchorGravity="bottom|right|end"
/>
<RelativeLayout
android:layout_width="match_parent"
android:paddingTop="?attr/actionBarSize"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_anchor="#+id/share"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:orientation="vertical">
<RadioGroup
android:id="#+id/segment_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:layout_marginTop="?attr/actionBarSize"
android:background="#android:color/white"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:checkedButton="#+id/button_one"
android:orientation="horizontal"
android:topRightRadius="0dp">
<RadioButton
android:id="#+id/button_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/rbtn_selector"
android:button="#null"
android:checked="true"
android:gravity="center"
android:padding="5dp"
android:text=" A "
android:textColor="#drawable/rbtn_text_selector"
/>
<RadioButton
android:id="#+id/button_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/rbtn_selector_right"
android:button="#null"
android:gravity="center"
android:padding="5dp"
android:text=" B "
android:textColor="#drawable/rbtn_text_selector"/>
</RadioGroup>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/play_song_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:visibility="gone"
fab:fab_colorNormal="#color/dark_navy_blue"
fab:fab_colorPressed="#color/light_navy_blue"
fab:fab_icon="#drawable/ic_play_arrow_white"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Im trying to put up the relative layout below the toolbar. I tried adding app:layout_behavior="#string/appbar_scrolling_view_behavior" but still it does not works. I tried adding android:paddingTop and android:marginTop attributes. Adding these attributes works fine in interface but when it comes to real device, the relative layout is still overlapping the toolbar. why so?

You can put your Toolbar layout inside AppBarLayout. Like this
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
// Your Toolar herer
<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.AppBarLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Android CollapsingToolbarLayout Not scrollable

i use CoordinatorLayout , AppBarLayout , CollapsingToolbarLayout, ViewPager all inside RelativeLayout parent.
Before I scroll the list ViewPager (include recyclerview inside fragment), scroll on CollapsingToolbarLayout good working. But when I first scroll on the ViewPager, and again scroll on CollapsingToolbarLayout not working.!! why?
I want scroll on viewpager and scroll on CollapsingToolbarLayout. CollapsingToolbarLayout not scrollable :|
My XML layout:
<?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"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true">
<ImageView
android:id="#+id/BgPhoto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:scaleType="centerCrop" />
<android.support.design.widget.CoordinatorLayout
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:background="#android:color/transparent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="60dp"
android:background="#color/trans10"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#android:color/transparent"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical"
app:layout_collapseMode="none">
<!-- date and rate -->
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="5dp"
android:paddingBottom="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:weightSum="3">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="12sp"
android:gravity="left"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="12sp"
android:gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="12sp"
android:gravity="right"/>
</LinearLayout>
<com.facebook.drawee.view.SimpleDraweeView
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:id="#+id/circlePhoto"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center"
fresco:fadeDuration="200"
fresco:actualImageScaleType="centerCrop"
fresco:roundingBorderWidth="1dp"
fresco:roundAsCircle="true"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabTextAppearance="?android:attr/textAppearanceSmall"
app:tabTextColor="#color/trans11"
app:tabSelectedTextColor="#color/white"
app:tabMode="fixed"
app:tabIndicatorHeight="2dp"
app:tabIndicatorColor="#color/white" />
</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> </RelativeLayout>

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>
```