Android collapsing Action bar with swipeable tabs - android

I'm trying to achieve a page as shown in the link. Can anyone please help me how to get it.


https://github.com/kaedea/Andriod-Seamless-ViewPager-Header
I Referred This example its working fine for me.please try this one surely u ll got.


Try this library ,Seamless viewpager
https://github.com/kaedea/Andriod-Seamless-ViewPager-Header


For expanding and collapsing toolbars (doesn't matter if it has tabs or not):
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CoordinatorLayout>


Try this XML: and in view pager you can get swipes as per tab of tablayout selection.
<?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.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_addProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="#dimen/_5sdp"
app:backgroundTint="#color/colorPrimary"
app:elevation="#dimen/_2sdp"
app:fabSize="normal"
android:visibility="gone"
app:rippleColor="#color/textPrimary"
app:srcCompat="#drawable/ic_vector_plus_white"
app:useCompatPadding="true" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|snap"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/dv_coverImage"
android:layout_width="match_parent"
android:layout_height="#dimen/_100sdp"
android:scaleType="centerCrop"
android:alpha="0.85"
android:tint="#color/black_translucent"
android:src="#drawable/bg_profile" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_50sdp"
android:weightSum="1">
<ImageView
android:id="#+id/dv_profile_pic"
android:layout_width="#dimen/_80sdp"
android:layout_height="#dimen/_80sdp"
android:layout_margin="#dimen/_10sdp" />
</FrameLayout>
</FrameLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="parallax"
app:navigationIcon="#drawable/ic_menu_white"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="?attr/selectableItemBackground"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextAppearance="#style/AppTheme.ProfileTab"
app:tabTextColor="#color/darkGreen" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/view_progress_view" />
</FrameLayout>


Try this one
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<android.support.design.widget.AppBarLayout
android:id="#+id/tabanim_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<!-- View that will be hidden when video goes fullscreen -->
<RelativeLayout
android:id="#+id/nonVideoLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
// your view
</RelativeLayout>
</RelativeLayout>
/***
Here You can add custom layout
**/
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:tabIndicatorColor="#android:color/holo_blue_light"
app:tabSelectedTextColor="#color/black"
app:tabTextColor="#color/black" />
</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>
</android.support.v4.widget.SwipeRefreshLayout>

Related

how to implement play store Collapsing Toolbar Layout?

* It's not a duplicate of collapsing toolbar layout like google play store
I want to scroll collapsingToolbarLayout down when recyclerView scrolled down and vice versa like below .gif image.
Any help will be appreciated.
I used different layout_scroll flag but it does not work at all.
and there is xml layout :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/apk/res-auto"
android:id="#+id/profileCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorPrimaryDark" />
<android.support.v7.widget.RecyclerView
android:id="#+id/list1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout1"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/profileactivity_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#color/colorPrimaryDark"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
app:navigationIcon="#drawable/ic_menu_white"
app:title="#string/app_name"
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="56dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</ir.unary.zhin.CAppBar>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/colorPrimary" />
</android.support.design.widget.CoordinatorLayout>

SOLVED:
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="156dp"
android:minHeight="50dp"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed|snap"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:navigationIcon="#drawable/ic_menu_white"
app:title="#string/app_name" />
</LinearLayout>
<LinearLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
android:background="#fff"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tl1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorPrimary" />
<android.support.design.widget.TabLayout
android:id="#+id/tl2"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/subTitle" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/c1"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
and .gif image :
Please check and see if it works on all devices?

Change
app:layout_scrollFlags="scroll|enterAlways"
to
app:layout_scrollFlags="scroll|enterAlways|snap"

Use this
<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.design.widget.AppBarLayout
android:id="#+id/id_toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/id_toolbar_container">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.design.widget.CollapsingToolbarLayout
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"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<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" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Check this reference you will get idea how to achieve..
http://www.devexchanges.info/2016/06/material-design-tablayout-and-toolbar.html

Wrong behavior SwipeRefreshLayout with CollapsingToolbarLayout

In my application, I need an appbar: a simple toolbar (always), a layout or a widget (when scrolling it should collapse), tabLayout (always).
This problem occurs with a 50% chance of re-creating the view.
Without a swipeRefreshLayout, this problem is not present.
Please help to solve this problem. How best to achieve the desired result?
Good Behavior
Wrong behavior
parent_fragment.xml
<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="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/id_toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorAccent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textSize="24sp" />
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:tabSelectedTextColor="#ffffff"
app:tabTextColor="#afffffff" />
</android.support.design.widget.AppBarLayout>
<ru.kgdev.ecohelper.ui.widget.NoScrollViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?android:attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
child_fragment.xml
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe"
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_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.constraint.ConstraintLayout>

Trouble in parent_fragment.xml, in my opinion, right way: need wrap AppBarLayout with TabLayout and ViewPager in LinearLayout for avoid use layout_marginTop in the ViewPager. The result is the following parent_fragment.xml:
<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="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/id_toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorAccent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textSize="24sp" />
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="#ffffff"
app:tabTextColor="#afffffff" />
</android.support.design.widget.AppBarLayout>
<ru.kgdev.ecohelper.ui.widget.NoScrollViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
After this fix, my app work fine.
If anyone can explain the origin of this strange behavior in more detail, I will be grateful. Thank you.

CollapsingToolBarLayout with TabLayout and ViewPager

Am try to create a layout similar to the one in the image using a CordinatorLayout and CollapsingToolbarLayout, TabLayout and ViewPager.
My Layout doesn't render properly.
Here is my 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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/image"
android:src="#drawable/thumb_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<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_collapseMode="pin" />
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/movie_tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/textColorPrimary"
app:tabSelectedTextColor="#color/textColorPrimary"
app:tabIndicatorColor="#color/textColorPrimary"
app:tabIndicatorHeight="4dp"
app:paddingStart="20dp"
app:paddingEnd="20dp">
</android.support.design.widget.TabLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/movieviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Testing it on my device i get this
The ViewPager Fragment overlays the TabLayout if it has content and displays the TabLayout on top of the ImageView when there is no content.
What am i doing wrong, i am still somewhat of an Android noob.

CollapsingToolbarLayout needs a minHeight. This tells the parent AppBarLayout how much it can collapse. I assume you want the Toolbar and the TabLayout to stay at the top of the screen (because you are using the exitUntilCollapsed scroll flag). I would make both of those have android:layout_height="?attr/actionBarSize" and use double that value as the minHeight of the CollapsingToolbarLayout.
ViewPager needs app:layout_behavior="#string/appbar_scrolling_view_behavior".

Old answer but maybe someone found it useful
<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.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<VideoView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="200dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<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" />
</android.support.design.widget.CoordinatorLayout>

<?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/main_content"
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="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Your extra details excluding tablayout. if u want any..-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/home_dummy_4"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/black_shadow"
android:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_10"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginRight="#dimen/margin_10"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginRight="#dimen/margin_10"
android:layout_toLeftOf="#+id/txt_reviews"
android:text="Bhagat Mishthan Bhandar"
android:textColor="#color/orangeColor"
android:textSize="#dimen/font_slarge"
android:textStyle="bold" />
<TextView
android:id="#+id/txt_reviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="#dimen/margin_5"
android:text="580 reviews"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</RelativeLayout>
<View
android:layout_width="100dp"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_5"
android:layout_marginBottom="#dimen/margin_5"
android:background="#color/orangeColor" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/min_order"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
<TextView
android:id="#+id/txt_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_5"
android:text="1000"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_5"
android:orientation="horizontal">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="#dimen/margin_5"
android:background="#drawable/location_white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="#dimen/margin_5"
android:text="Bhati enclave, Main queens road, Opp Jharkhand mahadev mandir, Vaishali nagar, Jaipur - 302021"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorWhite"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/orangeColor"
app:tabTextAppearance="#style/MyCustomTabText"
app:tabTextColor="#color/colorText" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/transperentColor"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Best is to use
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.ehryourway.ehryourway.PatientChart"
tools:showIn="#layout/app_bar_patient_chart">
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabTextColor="#color/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#id/tablayout">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
</android.support.v4.view.ViewPager>
</RelativeLayout>

Android CollapsingToolbarLayout with Toolbar and TabLayout

I'm making an application which uses CollapsingToolbarLayout with Toolbar and TabLayout.
I want to place the TabLayout to below Toolbar when the header is collapsed.
However, When I try to scroll the view, TabLayout overlays the Toolbar like this linked picture:
I want to make it like this linked picture when I scroll:
My code for the layout is 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
android:layout_height="#dimen/mypage_header_height"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold"/>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
How can I solve this problem?

Try:
<?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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="#dimen/mypage_header_height" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

I solved this problem by using expedient. I made 2 toolbars including the original one. and I made one of those transparent. then, It looks working fine but I think it is not clear way.

CoordinatorLayout with ViewPager that contains WebView

I have the following XML:
<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:fitsSystemWindows="true"
tools:context="socialcenterapp.com.user.myapp.activities.MainActivity">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/appBarLayout">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:titleTextColor="#FFFFFF"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="#drawable/side_nav_bar" app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.design.widget.FloatingActionButton android:id="#+id/fab"
android:layout_width="24dp" android:layout_height="24dp"
android:scaleType="center"
android:layout_gravity="bottom|right" android:layout_margin="30dp"
android:src="#mipmap/icon_fab"
app:backgroundTint="#b3c8ff"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:background="#color/material_deep_teal_500"
android:fitsSystemWindows="true">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/side_nav_bar"
android:id="#+id/tabLayout"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/viewPager"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
inside the ViewPager I have Fragment that contains WebView.I want that when the user scrolling down in the WebView the TabLayout is disappear and back in scrolling up.How can I do it?
The Fragment XML:
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context="myapp.com.user.myapp.fragments.MyFragment">
<WebView>
<android:layout_width="match_parent">
<android:layout_height="match_parent">
<android:id="#+id/webView">
<android:layout_gravity="left|top" />
</FrameLayout>

<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

Categories

Resources