Develop Reference

CollapsingToolbarLayout inside Viewpager: toolbar acting strange

I have a viewpager with fragments, each fragment should include a Collapsing toolbar + image header.
The layout is fine but i have this strange behaviour of the toolbar, which sometimes ignores the top margin and ends under the system bar. This happens:
on the first Tab
after scrolling to tab 3 or more, to any "first
previus tab"
it only happens on 1 tab at a time (as far i can see)
Also on the first tab the menu is not inflated, despite OnCreateOptionsMenu being run and not throwing any error.
I reviewed the code several times and made lots of adjustments but, for the sake of me, i cannot find what i am doing wrong!
Adding screenshots and some code. Here is a Github repository if you want to run it and see this in action. Thanks for any help!
and this happens when scrolling left:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
fragment_main.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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"
tools:context="com.manzo.tabbednavigation.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:title="Title"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_scroll_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:src="#drawable/bg"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorAccentWarning"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/section_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

I didn't found a solution so i ended up using a workaround.
I removed fitsSystemWindows="true" from the toolbar and added a marginTop of 24dp, which is System bar height as per material guidelines, I also included an height of 25dp for previous sdks.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="#dimen/status_bar_height"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
I am open to any suggestion for a "real" solution

Android: Hide/Show Toolbar while scrolling doesn't work

I have this very simple layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ActionBarThemeOverlay">
<!--<include layout="#layout/include_toolbar_actionbar" />-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I add a Fragment with a standard RecyclerView into fragment_container. Unfortunately, the Toolbar is always hide, I can't understand why?
Thank you very much for your help guys!

You could try this: solution from similar question.
Basically, you have to use android.support.v4.widget.NestedScrollView instead of ScrollView (in your fragment) and implement app:layout_behavior="#string/appbar_scrolling_view_behavior" inside your NestedScrollView xml.

CollapsingToolBarLayout has dual toolbar

I am having issues with implementing CollapsingToolbarLayout. I have this problem:
Yes, I've got to place the view in the layout, but it collapses below the original toolbar (or ActionBar for that matter) as shown in the image below. I have no idea how to fix this.
Thanks for any help. I am using Android Studio 2.1.1.
Here is my layout file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ArticleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/app_bar_layout"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/collapsing_toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="#+id/featuredImage"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:contentDescription="#string/article_image"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
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>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/article_container" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#mipmap/ic_share_variant" />
</android.support.design.widget.CoordinatorLayout>

I found out where I went wrong. I had left out the theme statement in the manifest. All I had to do was add the line android:theme="AppTheme.NoActionBar" to my activity in the manifest.
However, this brought up two new issues:
The new ToolBar scrolls out of view (does not stick to the top.)
The back button that should lead me to my previous activity is gone. However, I'll ask this as a separate question if I do not get the solutions from researching.

How to make AppBarLayout to completely disappear with windowTranslucentStatus set to true

I'm developing an Android app using the new design library. I would like to create a similar scrolling effect that is used in the new Google Photos app. I would like the AppBarLayout to scroll off of screen completely so that the recycler view would scroll behind the status bar.
I've set windowTranslucentStatus to true in the app's theme. Here's the xml of the main activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Here's what this looks like when scrolled down:
The Toolbar doesn't completely disappear.
Thanks for help!

Here's what i used in my application
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

This was about as close as I could get with the CoordinatorLayout (just playing with the margins on the toolbar)... not close enough imo:
<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:fitsSystemWindows="true"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:paddingTop="25dp"
android:layout_width="match_parent"
android:layout_height="81dp"
android:layout_marginTop="-28dp"
android:background="#00ffffff"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:background="#ffffff"
android:fitsSystemWindows="true"
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="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/ic_headphones_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I think it will be easier to do it manually...
Do you have any ideas or progress?

In my case I added fitSystemWindows="false" to CoordinatorLayout and fitSystemWindows="true" to its child - in your case to the RecyclerView. On NavigationView, DrawerLayout, AppBarLayout and Toolbar its "true". I've tried diferent values and then something breaks in my case. Android 5.1.1 and the latest support libraries (23.0.1). Hope it helps.

Use common pattern of AppBarLayout that comes from the app template when you create an Android project in Android Studio. Just few changes in XML layout and Java code:
XML Layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
>
<FrameLayout
android:id="#+id/toolbar_container"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</FrameLayout>
</android.support.design.widget.AppBarLayout>
Java Code:
ViewCompat.setOnApplyWindowInsetsListener(toolbar, new OnApplyWindowInsetsListener() {
#Override
public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
toolbarContainerLayout.setPadding(0, insets.getSystemWindowInsetTop(), 0, 0);
return insets;
}
});

Add fitsSystemWindows="true" for your AppBarLayout and CoordinatorLayout.

CoordinatorLayout using the ViewPager's RecyclerView

I am using the view CoordinatorLayout from android.support.design. I want to attach the app:layout_behavior to the fragment's RecyclerView?
In the example given by Google, they only attach it in the RecyclerView of the same XML file where the CoordinatorLayout was attached.
Is there a way to attach CoordinatorLayout to the fragment's RecyclerView within the ViewPager?
The sample is in this blog post at Android Developers blog.

Chris Banes has posted a sample on Github which shows exactly what you want to do.
Here is the xml file that defines how one can indirectly attach a coordinator layout to the viewpager's fragments.
<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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
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="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
The idea is to let the viewpager have the layout_behavior attribute.

This might be dumb, but it didn't worked due to the fact that the build tool was not updated in the build.gradle of the application version to 22, I was using 21 that is why it is not working as expected to be.
Edit:
Also what SanderTuit said: adding com.android.support:recyclerview-v7:22.2.0 will also solve the problem

Use a FrameLayout and inject your fragment into that FrameLayout. Then set
app:layout_behavior to it. The only thing you need to do is set layout_behavior
to a sibling of AppBayLayout and that sibling will below the toolbar.
<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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

I recently had the same problem mentioned in the post, and the above solutions did not work for me. Luckily I managed to solve it. So just to share I am posting here
The problem was that in my code I had set
recyclerView.setNestedScrollingEnabled(false);
due to which the appbar was not responding to recyclerView's scrolls despite setting the layout_behaviour attribute to the viewPager. Changing the above-mentioned attribute to
recyclerView.setNestedScrollingEnabled(true);
solved the problem and the appbar started responding to the recylerView's scroll.

After a few tests, I found that put the TabLayout outside AppBarLayout, will works, whatever the viewpager's Fragment contains. This is my main xml.
<com.tqmall.legend.konwledge.view.VerticalSwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/swipe_refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFE6ECF0">
<android.support.design.widget.AppBarLayout
android:id="#+id/kn_main_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"
app:contentScrim="#android:color/black"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
layout="#layout/banner_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#33000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</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.TabLayout
android:id="#+id/main_fragment_issue_list_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:tabGravity="center"
app:tabIndicatorColor="#FF2CA2D5"
app:tabPaddingEnd="30sp"
app:tabPaddingStart="30sp"
app:tabSelectedTextColor="#FF2CA2D5"
app:tabTextColor="#FF4F5354" />
<android.support.v4.view.ViewPager
android:id="#+id/main_fragment_issue_list_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

I'm having the same problem, i solved the scrolling but putting toolbar and the tabs inside the app bar and wrap it and the viewpager with a coordinatorlayout.
Also in the layout of my recycle view(to be inflated) i add the layout_behavior. It works but the problem is everything is over each other.
This is my main page
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/music_foot"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/view_pager"
/>
<view
android:layout_width="match_parent"
android:layout_height="wrap_content"
class="android.support.design.widget.AppBarLayout"
android:id="#+id/appBar"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#1e88e5"
android:id="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"
></android.support.v7.widget.Toolbar>
<view
android:layout_width="match_parent"
android:layout_height="56dp"
class="com.astuetz.PagerSlidingTabStrip"
android:id="#+id/pager_tabs"
android:layout_below="#+id/appBar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</view>
and this is my layout for the adapter
<android.support.v7.widget.RecyclerView
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/recycleView" />
If I get it to work better ill tell you.