Develop Reference

Hide android toolbar on scroll of CoordinatorLayout but keep TabLayout fixed

I have the following layout file
activity_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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbar_icon_image_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:paddingBottom="7dp"
android:paddingLeft="5dp"
android:paddingTop="7dp"
android:scaleType="centerInside"
android:src="#drawable/toolbar_icon"/>
</android.support.v7.widget.Toolbar>
</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.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/main_grid_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/content_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/sliding_tabs"/>
<com.ili.view.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="275dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:choiceMode="singleChoice"
android:descendantFocusability="beforeDescendants"/>
</android.support.v4.widget.DrawerLayout
</android.support.design.widget.CoordinatorLayout>
Expected behavior:
I would like the latter to show when I open the app, and the toolbar to hide upon scrolling.
But with my activity_main.xml I am getting the following behavior:
And after scrolling down, the toolbar hides(as expected) and the SlidingTabLayout shows.
But I would like my tab layout to remain fixed below the view pager.
Now I know that this may be because I'm setting the behavior of the whole drawer layout to app:layout_behavior="#string/appbar_scrolling_view_behavior", so I tried to separate the SlidingTabLayout and put it outside the drawer layout and it worked as expected, except that the SlidingTabLayout stayed over the last row of the list in my ViewPager, since in CoordinatorLayout I cannot tell DrawerLayout to remain on top of my SlidingTabLayout.
So anyone knows how I can make the toolbar hide upon scrolling but with my SlidingTabLayout to remain fixed and not hide the last row of the list?

ViewPager extends over the bottom of the screen

I'm new to Android development and I'm facing the following issue.
This is the layout of my 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.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_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
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="match_parent"
app:tabIndicatorColor="#color/white"
app:tabTextColor="#color/selected_text"
app:tabSelectedTextColor="#color/white"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
For each tab in the ViewPager I have a fragment, and this is the layout of one of them
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:id="#+id/linear_layout"
tools:context=".fragments.Reviews">
<RatingBar
android:id="#+id/review_totalRating"
style="?android:attr/ratingBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize=".5"
android:isIndicator="true"
android:progressTint="#color/golden"
android:layout_gravity="center"
android:paddingTop="10dp"
android:paddingBottom="5dp" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:id="#+id/listView_reviews" />
</LinearLayout>
Then I populate my ListView with items whose layout is defined in another xml file. My problem is with the ViewPager layout_height: it is now set to match_parent, but the element extends over the bottom of the screen, with the result that the last element of the ListView is covered by the navigation buttons.
This is what I see in the design editor
ViewPager overflow
How can I make the element stop before the navigation buttons?

I faced this issue too. It's because of AppBarLayout behavior in CoordinatorLayout. By default when you create a project from a template it will set up layout with hiding Toolbar. You can run your example and check it - just swipe toolbar up and it will hide and ViewPager will move up and then correctly sticks to the bottom of the screen.
It's not a solution for some cases so you can disable this behavior by removing app:layout_scrollFlags attribute from your Toolbar. After this, the toolbar will become unhideable and the ViewPager will calculate own height correctly.

I solved using a LinearLayout as the only child of the CoordinatorLayout, so everything else becomes a children of the LinearLayout. It seems to me to be just a simple workaround, not a final solution, but now it works. This is now the layout of my 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">
<LinearLayout
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.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabIndicatorColor="#color/orange_050"
app:tabSelectedTextColor="#color/orange_050"
app:tabTextColor="#color/orange_050"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>

Fragment's layout being covered up by activity's toolbar/tablayout

I have a single activity app with a nav drawer to navigate between a few fragments. The activity also has a toolbar and a tab layout, and I have it so that the tabs stay hidden through visibility-gone until the fragment with a view pager is switched to. The problem is that the contents of the tabbed fragment are hidden underneath the toolbar and the tab display. Any ideas?
Main Activity Layout:
<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/main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:visibility="visible">
<include
android:id="#+id/my_toolbar"
layout="#layout/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="true"
app:layout_scrollFlags="enterAlways">
</include>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/colorPrimary"
android:id="#+id/TabsDisplay"
app:tabMode="scrollable"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="gone"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"/>
</FrameLayout>
<!--The drawer stuff is below -->
<android.support.design.widget.NavigationView
android:id="#+id/main_navDrawer"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_drawer_header"
app:itemIconTint="#color/colorAccent"
app:itemTextColor="#color/colorSecondary_text"
app:menu="#menu/menu_nav_drawer"/>
Toolbar Layout: ( I just had this seperate through different attempts at it, and never merged it back in.)
<?xml version="1.0" encoding="utf-8"?>
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="enterAlways"/>
I have a basic layout as an 'intro page' that just displays a textview right now that is put into the container on startup, that is replaced by the other fragments through the nav drawer. One of them has a viewpager, that enables the tablayout to appear, the tabs display and load with text and fragments properly, but they are being covered up by the toolbar/tab bar. I have tried having the tablayout directly into the fragment, but then it never displayed at all, and am having trouble finding the correct way to do this.
Tabbed/Viewpager Fragment:
<?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="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/tabTestVP"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Use a relative layout and give the following attribute to the FrameLayout:
android:layout_below="#+id/toolbar"
Make sure to add the ID to the toolbar first

U can use a RelativeLayout in place of the first FrameLayout in your hierarchy and align the Fragment container below the AppBarLayout. "android:layout_below="#id/appBarLayout"

implementing a custom behavior on recyclerview inside coordinatorlayout

I have 3 views in my layout file with CoordinatorLayout as the root view : AppbarLayout, RecyclerView and a Footer(not visible all the time). Recyclerview implements the default behavior appbar_scrolling_view_behavior, that ideally, brings recyclerview below the appbarlayout. But the recyclerview and footer overlap. To Prevent that, I had to write a custom behavior so that when footer is visible, Recyclerview should make space for the footer. But now, the default behavior of appbar_scrolling_view_behavior is gone and now appbarlayout and recyclerview overlap.Here is the Image of the layout
Link to the custom behavior i implemented:
https://github.com/Mandeep221/CustomBehaviorForRecyclerview/blob/master/CustomBehavior.java
My Question: How can i implement 2 things(simultaneously in one behavior):
get the recyclerview below the appbarlayout inside the co-ordinatorlayout
get the recycelerview to make space for the footer if the footer is visible.
If you can suggest some workaround, that would also be great! Thanks alot!
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:scrollbars="vertical"
app:layout_behavior="prokure.it.prokure.Search.NewSearch.CustomBehavior" />
<prokure.it.prokure.FooterBarLayout
android:id="#+id/footerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//footer child views
</LinearLayout>
</prokure.it.prokure.FooterBarLayout>
</android.support.design.widget.CoordinatorLayout>

Don't keep the android.support.design.widget.CoordinatorLayout as root layout.
Add a RelativeLayout as a root layout. Then add android.support.design.widget.CoordinatorLayout with property layout_alignParentTop and layout_above="#+id/footerBar" and set prokure.it.prokure.FooterBarLayout as align parent bottom as second child of RelativeLayout.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/footerBar">
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="4dp"
android:scrollbars="vertical"
/>
</android.support.design.widget.CoordinatorLayout>
<prokure.it.prokure.FooterBarLayout
android:id="#+id/footerBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//footer child views
</LinearLayout>
</prokure.it.prokure.FooterBarLayout>
</RelativeLayout>

Another simpler way is to add following lines to your prokure.it.prokure.FooterBarLayout
app:layout_anchor="#id/list_recycler_view"
app:layout_anchorGravity="bottom"
and keep prokure.it.prokure.FooterBarLayout inside coordinator layout.
Make sure to add an empty cell at the end of the recycler view so that prokure.it.prokure.FooterBarLayout does not overlap with last cell of RecyclerView.

Fragment from View Pager hiding behind Tab Bar

I am having an issue with a Tab bar and ViewPager in my android project. What the app does it has an activity which hosts a tab layout and then has 2 fragment which represents each of the tabs.
When the activity is opened it posts to an API to get some data and puts the data into a data adapter for a Recycler View and Card layout in each of the fragments.
The recycler view will contain 3 items but only 2 are being shown as the first is being hidden under the toolbar and/or the tab bar as shown in the screenshot below.
Below is the layout file of my activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill" />
</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_behaviour="#string/appbar_scrolling_view_behaviour" />-->
</android.support.design.widget.CoordinatorLayout>
Below is the layout of the fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
android:id="#+id/recycler_view"
class="android.support.v7.widget.RecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
</LinearLayout>
Below is the layout for card layout
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:elevation="5dp">
<TextView
android:id="#+id/txtApplicationName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxLines="3"
android:padding="8dp"
android:textColor="#222"
android:textSize="15dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Below is the screenshot as mentioned above which shows the problem. I've pixelated some of the text but it should you what I mean, there should be 3 items but the first item is hiding underneath the tab bar.

Edit: As suggested below by #smeet and #hardik, adding the scroll behavior app:layout_behavior="#string/appbar_scrolling_view_behavior" should fix the problem while preserving the scroll behavior. Scroll behaviors only work if the view is a direct child of the coordinator layout.
Old Answer
Just Wrap your appbar layout and viewpager in a vertical LinearLayout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
//appbar layout
//viewpager
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
From the docs, CoordinatorLayout is a super-powered FrameLayout. So you can expect the typical "lay views on top of other views" FrameLayout behavior.

Adding :
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in ViewPager resolved issue in my case.

if we will wrap app bar layout with linear layout than toolbar will not hide when you scroll so accepted answer might not help you if you want to hide toolbar when you scroll.
Smeet did it right way but not explained! here is full example with explanation.
add app namspace to CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
......
>
and just add below line in your ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
complete xml will be as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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: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.design.widget.TabLayout
android:id="#+id/tabLayout"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>