I'm using Fragment and RecyclerView inside.
I would like to hide Fragment's toolBar while I'm scrolling RecyclerView. It's work by design, but Toolbar hiding not completely.
How to solve this problem?
Start scroll point:
Final scroll point:
Here is MainActivity.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.avalank.financy.Main2ActivityTest">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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.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/container"
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="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
You can use the CollapsingToolbar for achieveing such functionality. You can find a good tutorial here.
You are right, i've tried that and that worked without below code in the Styles.xml:
<item name="android:windowTranslucentStatus">true</item>
Finally, check this answer with two methods/tricks to do that: https://stackoverflow.com/a/35241363/4409113
Also, you can use CollapsingToolbarLayout with some flags like:
app:layout_scrollFlags="scroll|snap"
Also, let's mention that i've deleted this line:
android:paddingTop="#dimen/appbar_padding_top"
Related
I tried to find someone with the same question but didn't really know what to search for. If someone else finds a simliar question, just let me know!
I've implemented the toolbar from the design library as follows:
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/mainTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
and the toolbar layout:
<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/mainToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
The AppBarLayout is a direct child to the CoordinatorLayout. Below the AppBar I have a RecyclerView that correctly lets the AppBar collapse when scrolling up.
However I'm able to press directly on the AppBar and then move my finger up and that way the toolbar collapses even though my RecyclerView is completely empty. I can expand it again by scrolling down on the toolbar again. This behavior doesn't happen when scrolling where the RecyclerView is.
I hope my problem is understandable. I'm using version 25.1 of the support library.
Thanks!
Edit: I tried the solutions below. Didn't change anything. Down below I added a video to show what my issue is. So it's really about the situation when the screen is not full (so no elements from the RecyclerView goes off the screen): If that's the case I don't want the Toolbar to hide at all. In other words: Only hide the toolbar if any elements from RecyclerView go off the screen.
https://drive.google.com/file/d/0Bzrw-IuZ9USuMURVVkRfb3dkRTQ/view?usp=sharing
If any more code is needed from my side just let know.
Try this
The entire project is at this location:
https://github.com/slidenerd/Android-Design-Support-Library-Demo
The below code works for me(This Git project belongs to slidenered. Thanx to him):
<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"
tools:context="slidenerd.vivz.navigationviewdemo.FourthActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</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:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</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.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/ic_add_black"
app:borderWidth="0dp"
app:fabSize="mini" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer" />
if u want to fixed the toolbar when appbar is scrolled
try this:
<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="200dp"
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"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
put your toolbar under a CollapsingToolbarLayout and app:titleEnabled="false"
By setting it to false, you'll get the desired behaviour. The title stays fixed at the top of the screen.
you can do it programetically also:
CollapsingToolbarLayout.setTitleEnabled(false);
I'm working on creating a layout that works as follows:
Toolbar at the top
Toolbar below top toolbar
RecyclerView
And when I scroll, I want to hide the toolbar in between top toolbar and recyclerView. My Layout is as follows:
<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="SomeActivity">
<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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
android:minHeight="0dp"
android:id="#+id/info_bar"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
With these changes, both the toolbars become hidden when scrolling.
I just need to hide the second toolbar.
EDIT : If I can't get this to work, I'll be attaching a scroll listener to my recyclerView and resolving this that way. But I was wondering if there is a cleaner solution with scroll behaviors
Moved the top toolbar out of the coordinatorlayout and thus resolved this issue.
(Thanks to a colleague)
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.CoordinatorLayout
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.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</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>
If I understood properly, then you might want to collapse hole collapseableToolbar when it is scrolled up, instead it is showing some (20dp) space between ToolBar and listItem. for me it took half of the day, and problem is just a boolean value in coordinatorLayout. Just change "fitsSystemWindows" value from true to false.
with this you can hide image of the collapseToolBar upon 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context="com.thedeveloperworldisyours.imagecollapsingtoolbarlayout.ScrollingActivity">
I am new for CoordinatorLayout i want to use coordinatorLayout in my application but it cause some problem in display CollapsingToolbarLayout view.
i want to design view like whatsApp screen Tabs in Coordinatorlayout
My XML Code
<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.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="32dp"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<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.v7.widget.Toolbar>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
// child view
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>`
I Found Solution for Tabs in 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/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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">
<android.support.v7.widget.Toolbar
android:id="#+id/tabanim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
/***
Here You can add custom layout
**/
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout is delicate sometimes, I suggest you to follow the next example using it as a base and adding more complexity step by step if you need:
https://gist.github.com/RicardAparicio/f41523daaa0edbe0b4399549fff4da3f
Hope it helps.
"but it cause some problem in display" doesn't say what kind of problem You had, glad You found the solution though.
There is indeed problem in both 22.2.1 and 23.0.1 support libraries with TabLayout and ViewPager in CoordinatorLayout while using fitsSystemWindows="true". While using RecyclerView and scrolling it up TabLayout header goes into status bar while it's background color is not being pinned.
I might only imply that above was one of Your problems, if yes then removing fitsSystemWindows is not best solution as application will loose a lot of it's look in 5.0+ Android.
It is not good solution either but I managed to fix this issue by adding nested android.support.design.widget.CoordinatorLayout, but if You use DrawerLayout there, then nothing is needed as shown in this example: https://github.com/chrisbanes/cheesesquare
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.
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.