Develop Reference

Hide ActionBar on ListView scroll contained in a Fragment within a ViewPager

I want to hide the ActionBar on ListView scroll.
The official documentation suggests we use this pattern to do so:
<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.v7.widget.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
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I can't, however, use this pattern since my "Scrollable view" is a ListView inside a Fragment that is rendered inside the ViewPager. I use the following code in my app:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.x.y.MainActivity">
<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="48dp"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
style="#style/AppTabLayout"
android:id="#+id/tabs"
app:tabTextAppearance="#style/AppTabTextAppearance"
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="#mipmap/ic_add_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I've tried putting the ViewPager inside the AppBarLayout, and the Toolbar and TabLayout in a CollapsibleToolbarLayout. However, if I do that, the ViewPager layout isn't even shown and the ActionBar is permanently hidden.
What do I do?

CoordinatorLayout doesn't work with listview. So either replace the listview with a recyclerview (which i would highly recommend) or put your listview inside a NestedScrollView. The xml code you posted is ok. If any of these is not working then post your fragment's xml code and hit me up again

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>

Recyclerview + viewpager, make toolbar collapse

I have a recyclerview inside a viewpager. I also have Tabs above that and a toolbar. I'd like to collapse those (or one of those I have to try it out) when I move the recyclerView down. Basically the same as here.
I'm having trouble to get this to work.
Here is what I have:
<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="com.cedric.testdesign.MainActivity">
<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:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<com.signpetitions.cedric.signpetitions.components.MyFab
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Inside the viewPager I have a fragment with a recycler view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/recyclerView"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

I added this to the toolbar :
app:layout_scrollFlags="scroll|enterAlways"
Then it works. The issue though is that when the statusbar is transparent the text behind the toolbar is visible. So the statusbar has to have a color.

Android, TabLayout miscalculates height, won't show bottom of layout

I'm working on a tab activity in my app, but it seems that the tabs are using the wrong height (thinking the layout is about half an inch taller than it is on any device) and as a result any vertical centering is off on the low side, and my scrollviews are messed up because the screen won't scroll far enough down to see the bottom of the view. I have tried tinkering with the layout_height on any relevant class I can think of and hiding the tabs, but nothing helps and I cant find this problem anywhere else. I generated the default template for a TabLayout activity in Android Studio 1.4.
activity_main
<?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"
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"
tools:context=".MainActivity">
<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:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/colorPrimaryDark" />
</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="#drawable/ic_youtube_searched_for_white_18dp"
android:visibility="gone"/>
</android.support.design.widget.CoordinatorLayout>
fragment_main
<ScrollView 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:background="#color/white"
tools:context="com.example.ggould.flyingfood.HistoryFragment">
<LinearLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
//other stuff
</LinearLayout
</ScrollView>

On activity_main you can create a RelativeLayout. Put your ViewPager and AppBarLayout inside RelativeLayout and set your ViewPager like this:
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"/>

<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
you have to wrap content for the widget.toolbar

CoordinatorLayout with Toolbar and fragment

I'm using the layout below, The CoordinatorLayout holds inside it AppBarLayout (With Toolbar and TabLayout inside it) and a placeholder RelativeLayout, so I could add and replace fragments on it.
I'm experiencing margin errors, the fragments I add on the RelativeLayout will always over expand beyond the bottom of the screen (in the amount similar to the size of the AppBarLayout height), I've tried setting it's height to wrap_content and match_parent, in both cases it goes overboard.
if I remove the app:layout_behavior="#string/appbar_scrolling_view_behavior" from the RelativeLayout the top of it will be under the AppBarLayout which is also not the desired outcome.
<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/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<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"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#ffffff"
app:tabMode="scrollable"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<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="20dp"
android:src="#drawable/ic_done" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>

I have figured out the problem on showing fragment below toolbar when using the coordinator layout. The problem in my case is:
In this image it shows the Fragment is overlapped by Toolbar.
Now just put your AppBarLayout and FrameLayout inside LinearLayout like below,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/mainappbar"
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"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Now your problem is solved. And it will be like this.
The final image.

You will also see this issue if you have a ScrollView inside the fragment. So make sure you use a NestedScrollView instead:
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

Had the same issue. Changing RelativeLayout to FrameLayout with parameter app:layout_behavior="#string/appbar_scrolling_view_behavior" solved my problem.
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>

The issue has been solved by updating the recyclerview library (to com.android.support:recyclerview-v7:22.2.0)
The fragment I was loading had a recyclerview in it.