I wrote an XML for AppBarLayout with collapsible ImageView. And, I want only the image view being collapsed Whereas, the toolbar should get pinned when I scroll up. I'm able to produce a similar thing, but once the ImageViewis collapsed, it doesn't show up again on scrolling down.
I suspect that the problem is with layout_scrollFlags but I tried every flag. On applying other flags, the toolbar doesn't get pinned. Can anyone point me where i have done the mistake?
here's my XML:
`
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:tabIndicatorColor="#color/colorPrimary"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE"
app:layout_collapseMode="pin"/>
</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.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/calendar_white"
app:borderWidth="0dp"
app:fabSize="normal" />
`
Thanks koraokyo,
Your suggestions did make the hings clear for me. However, the solution you provided were not solving the problem. Hence I played around and things seem to work as I wanted. I moved the TabLayout inside AppBarLayout under another CollapsingToobarLayout and everything is perfect now. here's my AppBarLayout now.
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<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="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The CollapsingToolbarLayout is designed to be the sole child of a AppBarLayout. Instead of having the TabLayout as a child of the AppBarLayout, move it outside (so it is a child of the CoordinatorLayout) and anchor it to the app bar.
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorAccent"
app:tabIndicatorColor="#color/colorPrimary"
app:tabMode="scrollable"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE"
app:layout_anchor="#+id/app_bar_layout"
app:layout_anchorGravity="bottom"/>
I think that's the problem ViewPager. Try use android.support.v7.widget.RecyclerView or NestedScrollView instead ViewPager.
You can see more this tut and this design.
Related
I want to show a tab layout with an image that should be scrollable but then the tablayout is scrolled above it should remain fixed. In my case it also moves up with the scrolling. This is my final version of layout. Have tried so many things
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#color/coupon_green"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="#+id/profileTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:elevation="2dp"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/skill_black"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/skill_black"
app:tabTextColor="#color/black" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.skillbox.ui.CustomViewPager
android:id="#+id/profilePager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:layout_anchor="#+id/appBar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
How can I add some paddings into collapsingToolbar title for RTL languages,It is good for LTR laguages but for RTL it is like bellow..
Thanks very much
this is my layout..As you can see on right side of above image there title and it does not have any paddings..One method could be adding more spaces before title but it is not a wise way.
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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_marginTop="?attr/actionBarSize" />
<android.support.design.widget.TabLayout
android:id="#+id/detail_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
android:layoutDirection="rtl"
app:tabMode="scrollable" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
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:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:transitionName="profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:contentDescription="" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|left"
android:src="#drawable/ic_arrow_back_black_24dp"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
There is definitely something wrong there on the SDK.
try using
android:titleMarginEnd="0dp"
or
app:titleMarginEnd="0dp"
on the Toolbar.
It will not be perfect but at least it will not go further right than the end of the screen. Every other value I tried does not seem to work
Here is my main layout
<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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="4dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextAppearance="#style/ToolbarTitle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/CustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
</FrameLayout>
<fr.castorflex.android.circularprogressbar.CircularProgressBar
android:id="#+id/base_progressSpinner"
android:layout_gravity="center"
android:layout_width="72dp"
android:layout_height="72dp"
android:indeterminate="true"
android:visibility="invisible"
app:cpb_color="#color/spinner"
app:cpb_rotation_speed="1.0"
app:cpb_sweep_speed="1.0"
app:cpb_stroke_width="4dp"
app:cpb_min_sweep_angle="10"
app:cpb_max_sweep_angle="300"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_request"
android:visibility="gone"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/request_fab_icon"
android:layout_margin="#dimen/big_padding"
android:clickable="true"
app:backgroundTint="#color/fab"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="source.bigdx.com.bigdxsource.util.ScrollAwareFABBehavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_contact"
android:visibility="gone"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="end|bottom"
app:borderWidth="0dp"
android:src="#drawable/contact_fab_icon"
android:layout_margin="#dimen/big_padding"
android:clickable="true"
app:backgroundTint="#color/fab"/>
</android.support.design.widget.CoordinatorLayout>
On API 16 and up there is no issue. When content is scrolled the toolbar shifts up until collapsed like it should.
However on API 14/15 when scrolled the content does not scroll, only the toolbar. when toolbar is collapsed the content then scrolls but will not overlap where the toolbar was.
I have tried changing many things like styles and values in layout above but can't make it work like it does on API 16+ devices.
Update
It seems wrapping it in a CollapsingToolbarLayout fixes it but shouldn't be needed.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:titleTextAppearance="#style/ToolbarTitle"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/CustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:layout_scrollFlags="enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
It is the problem with CoordinatorLayout in ICS. Try using different Layout and the toolbar will show up
I'm trying to make a layout with CollapsingToolbarLayout. But I do not get one thing. I want to remove the shadow between Toolbar and TabLayout. I've tried several ways and I have not managed to remove the shadow. Can anybody help me? Thank you
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/adview"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabTextColor="#color/tabs_text_selector" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/detalle_txt_expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/detalle_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img_thumb_m"
android:transitionName="#string/transition"
app:layout_collapseMode="parallax"
tools:targetApi="lollipop" />
<ImageView
android:id="#+id/detalle_img_tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/img_edificio"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"/>
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/detalle_info_fab_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="false"
android:src="#drawable/ic_check1"
app:fabSize="mini"
app:backgroundTint="#android:color/white"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<include
android:id="#+id/adview"
layout="#layout/adview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
Try setting app:elevation="0dp" (not android:elevation) for your AppBarLayout.
In case you don't have the app namespace in your xml, add xmlns:app="http://schemas.android.com/apk/res-auto".
The difference between these two properties can be found here.
After that, check that you're not adding some background/border with any of these properties:
<android.support.design.widget.TabLayout
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"/>
Or the theme you're using for the AppBarLayout.
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_tablayout" />
Use app:elevation="0dp" to remove the shadow. It has always worked for me. Hope it works for you.
And also by programatically,
appBar.setOutlineProvider(null);
You have to put the Toolbar and the TabLayout in the same AppBarLayout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/detalle_txt_expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/detalle_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img_thumb_m"
android:transitionName="#string/transition"
app:layout_collapseMode="parallax"
tools:targetApi="lollipop" />
<ImageView
android:id="#+id/detalle_img_tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/img_edificio"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"/>
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabTextColor="#color/tabs_text_selector" />
</android.support.design.widget.AppBarLayout>
Take a look at this issue
I know the question is already answered. But I want to share something that I learnt the hard way so that people who are facing the same problems can save time.
You need to wrap AppBarLayout inside CoordinatorLayout or else app:elevation will not work.
Working example:
<CoordinatorLayout>
<AppBarLayout>
<Toolbar>
How to hide toolbar after collapsing while recyclerView scrolling down, show toolbar when recyclerView scrolling up, and expand CollapsingToolbarLayout at the end of list? Now CollapsingToolbarLayout just collapse, and toolbar is showing all time when scrolling.
<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:id="#+id/coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".screens.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/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:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="#dimen/actionBarHeight"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/TransparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="180dp"
android:adjustViewBounds="true"
android:background="#229944"
android:contentDescription="#null"
android:scaleType="fitCenter"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/actionBarHeight"
android:minHeight="#dimen/actionBarHeight"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
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>
This should work perfectly. Tested and working in API 17
<android.support.design.widget.CoordinatorLayout
android:id="#+id/careers_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".activity.CareersActivity"
xmlns:tools="http://schemas.android.com/tools">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
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:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="256dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:src="#drawable/placeholder"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:titleTextColor="#color/main_color_white"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="#color/colorAccent"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextColor="#android:color/white"
app:tabIndicatorHeight="4dp"
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>
You may want to change the behaviour of the Toolbar. You can provide scroll behaviour by changing layout_scrollFlags.
app:layout_scrollFlags="scroll|enterAlways"
Remove pin and make this change in your Toolbar and it would work!
Add android:fitsSystemWindows="true" in CoordinatorLayout.
Remove app:layout_scrollFlags="scroll|enterAlwaysCollapsed" from Toolbar.
Move TabLayout inside CollapsingToolbarLayout.
<android.support.design.widget.AppBarLayout
android:id="#+id/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:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="#dimen/actionBarHeight"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#style/TransparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="180dp"
android:adjustViewBounds="true"
android:background="#229944"
android:contentDescription="#null"
android:scaleType="fitCenter"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/actionBarHeight"
android:minHeight="#dimen/actionBarHeight"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
For CollapsingToolbarLayout use scroll flags:
app:layout_scrollFlags="scroll|enterAllwaysCollapsed"
this flag combination will disappear toolbar while scrolling down. And CollapsingToolbarLayout will expand fully when you scroll to top of the list.
And no need to remove app:layout_collapseMode="pin" from Toolbar, because collapseMode flags are to define behavior and placement of views inside CollapsingToolbarLayout and will not effect actual collapsing and expansion of CollapsingToolbarLayout.