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

Mixing ViewPager and Scrolling activity

I'm making application which mix ViewPager with Navigation bar and Scrolling activity. I won't provide you with code because, I use only merged Android Studio templates code for both.
This is how application looks like.
When it comes to scrolling, problem arise.
It doesn't reach the end of page, because title bar is visible.
And in order to scroll to bottom of page you need to move your finger to top of screen and scroll title in order to hide it.
I found out several tricky solution for this problem:
Make space at end of page.
Make title constant
But these solution doesn't appeal to me.
I need that scrolling works in following steps.
When you start scrolling, title is moving up and disappearing.
Then, fragment is scrolling until end of the page.
Thanks in advance.

Maybe you can use a CoordinatorLayout and put on the toolbar :
app:layout_scrollFlags="scroll|enterAlways"
And put behaviour in your view pager :
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
The complete xml is something like this :
in your activiy xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" tools:openDrawer="start">
<include layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start" android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/menu_main_drawer" />
</android.support.v4.widget.DrawerLayout>
in your included xml, for example content_main.xml :
<?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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior" />
</android.support.design.widget.CoordinatorLayout>

Issue to hide Toolbar when scrolling in android

I've an Activity with an NavigationDrawer and a Toolbar. I'm facing a problem when i want disappear a toobar when one of child fragment view is scrolled. Everything works fine except that there is some view coming up from the bottom which has the exact same size as the toolbar that is disappearing.
I made an GIF Animation that shows the problem. Due to my reputation i can not post the image directly but this gif and this gif shows the problem
I tried to figure out where this is coming from. It seems that its from my container FrameLayout where my fragment views are placed during runtime. I changed its background to green so i can identify it.
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkGreen"
tools:context="org.cddevlib.breathe.MainActivity" />
</LinearLayout>
<fragment
android:id="#+id/navigation_drawer"
android:name="org.cddevlib.breathe.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_navigation_drawer" /> </android.support.v4.widget.DrawerLayout>
This is the Toolbars Layout that is included
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
And finally a snippet from the fragments view that is loaded:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
layout="#layout/toolbar" />
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/white"
android:fillViewport="true" >
(...)
Note that i'm including the Toolbar again in that layout because i want different Toolbars for each fragment in my application by hiding / adding the toolbar.
toolbar = (Toolbar) ((View) vw).findViewById(R.id.toolbar);
if (toolbar != null) {
// // for crate home button
activity = (AppCompatActivity) getActivity();
activity.getSupportActionBar().hide();
toolbar.setBackgroundDrawable(new ColorDrawable((ColorUtils.getColorDark(DataModule.getInstance()
.getMainActivity()))));
activity.setSupportActionBar(toolbar);
activity.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
SOLUTION
So thanks to sanat shukla answer is firgured out that my problem was that i used an AppBarLayout too much in my fragments view. In my fragments view, AppBarLayout was the main layout for all of my components, but it should not! Its intended to hold the toolbar content! Thanks

It's not an issue. It is the cool animation and support provided by android. When you use co-ordinator layout with Toolbar then it shows cool animation when scrolling the list.
The Design library takes this to the next level: using an AppBarLayout
allows your Toolbar and other views (such as tabs provided by
TabLayout) to react to scroll events in a sibling view marked with a
ScrollingViewBehavior
Read from here :
http://android-developers.blogspot.in/2015/05/android-design-support-library.html
If you don't want to hide your toolbar then don't use co-ordinator layout and appbar with toolbar.
Try this for fragment :
<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">
<! -- Your Scrollable View -->
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/white"
android:fillViewport="true" >
<android.support.v4.widget.NestedScrollView/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout(AppbarLayout) does not draw toolbar properly

I am using the new design support library to achieve scroll to hide toolbar.
However, every thing works well if I don't load images by picasso. If I load images, sometimes when I scroll down to let toolbar show again, my toolbar become a blank white rectangle. Note that in this situation I still can press the navigation toggle to open the drawer, although it is not draw(show) on the screen:
https://www.dropbox.com/s/nte3pr091nt2wfx/device-2015-05-30-093222.png?dl=0
But sometimes it works well:
https://www.dropbox.com/s/i3u87df4x48fhj6/device-2015-05-30-094217.png?dl=0
I am so confusing about this, if I disable all loading image task, the toolbar can be shown properly.
Here is my layout:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I think when picasso load image into ImageView, it may requestFocus and requestLayout and the CoordinatorLayout can't redraw the toolbar properly in that situation but It is only my guess.
Any suggestion will help, many thanks!

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.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" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Try this. I solved same problem by this snippet. I appended dummy view which has height of 1dp after the Toolbar.

Android design library CoordinatorLayout, AppBarLayout and DrawerLayout

I'm using the Android design library on API 22. I would like to:
have a Toolbar and a DrawerLayout inside which there is a RecyclerView
have the DrawerLayout be below the Toolbar; for example, when the toolbar is visible, the drawer's main content should be below it, and the (left) drawer should also be below it so that when it is expanded, the toolbar is still visible
have Toolbar be scrolled off the screen when the recycler view is scrolled down
Is this even possible? I have problems to marry #2 and #3. The way it is now is that the toolbar is always above the drawer layout, covering the first entry in the recycler, and the top of the left drawer as well. Here is my layout file (incomplete, but showing my structure):
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
It looks like though the RecyclerView's app:layout_behavior="#string/appbar_scrolling_view_behavior" setting has no effect, because when deleted, the behavior is the same.
I tried adding a RelativeLayout as a child of the CoordinatorLayout to define that the drawer is below the toolbar etc. but nothing seems to work.
Is what I'm trying to achieve possible with the library?

Try the following if you want to see the animation of the hamburger icon and arrow. If you include the top margin (layout_marginTop) for NavigationView it will move it down.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navigation_drawer"
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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<!-- main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>

Yes! It is possible.
<android.support.v4.widget.DrawerLayout 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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".StartupActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/Theme.AppCompat.NoActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/scrollRecyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawer_recycler_view"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left|start"
android:background="#color/WhiteColor"
android:fitsSystemWindows="true"
android:scrollbars="vertical"/>
</android.support.v4.widget.DrawerLayout>
As you can see, what matters is basically that you set app:layout_scrollFlags="scroll|enterAlways" for your toolbar to hide when you scroll. The RecyclerView at the bottom of the code is the one inside the DrawerLayout, the one above is the one in your main activity layout.

From the developers' page:
DrawerLayout acts as a top-level container for window content that
allows for interactive "drawer" views to be pulled out from the edge
of the window.
At first try placing the DrawerLayout as a top-level container (i.e. parent layout). Then place the CoordinatorLayout below and see what happens.
Plus you haven't added the NavigationView. Please check the fundamental instructions here.

Try this it should work, worked for me.
<android.support.design.widget.CoordinatorLayout
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.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>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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/scrollingRecyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
/>
<!-- The navigation drawer -->
<FrameLayout
android:id="#+id/right_frame"
android:layout_height="match_parent"
android:layout_gravity="start"/> (whatever)
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
Scrolling behavior must be set to the direct child of CoordinatorLayout (to DrawerLayout). This should fix your #2, #3 problems. And in case your drawer content contains recyclerView Toolbar will be again scrolled off the screen.

Its been a long time now but I believe it still helps someone.
Drawer Layout must have one child layout. According to android docs it must be FrameLayout because the XML order implies z-ordering and the drawer must be on top of the content. Visit below link.
Creating a Navigation Drawer
Add your AppBarLayout, Toolbar, RecyclerView and all other views in FrameLayout and make it a child of Drawer Layout. Hopefully it will run.