Develop Reference

How to show BottomNavigation CoordinatorLayout in Android

In my application I want show BottomNavigation bottom of CoordinatorLayout and for this I write below code :
<?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:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/mainToolbar"
layout="#layout/toolbar_main" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.aurelhubert.ahbottomnavigation.AHBottomNavigationViewPager
android:id="#+id/mainViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/mainBottomNavigation"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="#+id/mainBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_anchorGravity="bottom"
app:selectedBackgroundVisible="true" />
</android.support.design.widget.CoordinatorLayout>
But when run application show me BottomNavigation top of CoordinatorLayout!
How can I show BottomNavigation bottom of CoordinatorLayout ?

I hope the answer is not too late. I just had the same problem, I used android:layout_gravity="bottom".
I have a Toolbar, a BottomNavigationView, and in the middle, I have a FrameLayout that is used as a placeholder for a fragment. Here is my XML layout:
<?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:background="#drawable/bg_main"
android:minHeight="?attr/actionBarSize">
<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="wrap_content"
android:background="#color/colorTab"
app:layout_scrollFlags="scroll|enterAlways"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.v4.view.ViewPager
android:id="#+id/slide_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemBackground="#color/colorTab"
app:itemIconTint="#drawable/bottom_navigation_toolbar"
app:itemTextColor="#drawable/bottom_navigation_toolbar"
app:menu="#menu/bottom_bar"
/>
</android.support.design.widget.CoordinatorLayout>
Also check out this question, it uses almost the same layout, and it also shows how to change the behavior of the BottomNavigationView so that it hides when you scroll. If you wish to implement that feature make sure to create the class BottomNavigationBehavior (or whatever you want to call it) and add this line to your BottomNavigationView in XML:
app:layout_behavior="com.yourpackage.yourpackage.BottomNavigationBehavior"
Hope it helps!

This helps me resolve the issue of bottom of view going behind bottom navigation bar.
I have resolved it by:
adding app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
to the BottomNavigationView.
Changing the parent layout of ActivityMain to CoordinatorLayout &
Adding android:layout_gravity="bottom" to BottomNavigationView.

Scrolling Recycler View programmatically does not update CoordinatorLayout.Behaviour while scrolling it by touch update CoordinatorLayout.Behaviour

I referred This Question but no answers works for me. So basically I have a BottomNavigationView which hide on scroll down and show on scroll up. it works fine when I scroll Recycler View by touch but does not work when I scroll the RecyclerView programmatically. Seems like it does not trigger CoordinatorLayout.Behaviour when programmatically scrolled. In a certain case I have to open that fragment which contains RecyclerView with scroll to some position, and BottomNavigationView hiding it have to came back when user scroll up That means I don't want to hide visibility of BottomNavigationView just hide on scroll either scroll by programmatically or by touch.
activity_main.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"
tools:context="com.kliff.digitaldwarka.activity.MainActivity">
<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="?attr/actionBarSize"
android:id="#+id/myAppBar"
app:elevation="0dp"
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:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
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.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:itemBackground="#android:color/white"
android:id="#+id/bottom_nav"
android:layout_gravity="bottom"
app:menu="#menu/bottom_nav_menu"/>
</android.support.design.widget.CoordinatorLayout>
<com.appeaser.sublimenavigationviewlibrary.SublimeNavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_gravity="start"
app:snvHeaderLayout="#layout/nav_header"
app:snvMenu="#menu/nav_menu"
style="#style/NavigationViewStyle"
app:snvItemTextColor="#555555"
app:snvSubheaderItemTextColor="#555555"
app:snvItemIconTint="#555555"
app:snvBadgeTextColor="#555555"
app:snvHintTextColor="#757575"
app:snvHintTypefaceStyle="normal"
app:snvBadgeTypefaceStyle="normal"
app:snvSubheaderItemTypefaceStyle="normal"
app:snvItemTypefaceStyle="normal" />
</android.support.v4.widget.DrawerLayout>
fragment_category.xml
<android.support.v7.widget.CardView
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="wrap_content"
app:cardElevation="1dp"
app:cardUseCompatPadding="true">
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</android.support.v7.widget.CardView>
Code For scrolling
mRecyclerView.getLayoutManager().scrollToPosition(34); //specific postion
By scrolling this way how can I achive the behaviour. Any Help Would be appricited thanks.

CoordinatorLayout.Behaviour is works with only NestedScroll event. When you try to scroll RecyclerView programmatically it is treat as normal scroll.
Write below line to inform RecyclerView start NesteadScroll, With ViewCompat.SCROLL_AXIS_VERTICAL and ViewCompat.TYPE_NON_TOUCH
ViewCompat.SCROLL_AXIS_VERTICAL: Indicates scrolling along the vertical axis.
ViewCompat.TYPE_NON_TOUCH: Indicates that the input type for the gesture is caused by something which is not a user touching a screen. This is usually from a fling which is settling.
recycler_view.startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL, ViewCompat.TYPE_NON_TOUCH)
recycler_view.smoothScrollBy(0,200)

For me nothing did work, until I wrapped Bhavesh Jabuvanis answer in a post
mRecyclerView?.post {
mRecyclerView?.startNestedScroll(ViewCompat.SCROLL_AXIS_VERTICAL, ViewCompat.TYPE_NON_TOUCH)
mRecyclerView?.smoothScrollToPosition(scrollToPosition)
}

Try the following code. Its working for me. I am using the BottomBar Library.
public void showBottomBar(boolean show) {
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mBottomBar.getLayoutParams();
CoordinatorLayout.Behavior behavior2 = params.getBehavior();
if (behavior2 != null) {
behavior2.onNestedFling(coordinator, mBottomBar, null, 0, show ? -10000 : 10000, true);
}
}

I have use this code please check if its suitable for you :-
activity_mail.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"
tools:context="com.example.constraintlayout.ScrollingActivity">
<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|exitUntilCollapsed">
<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>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_scrolling.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.constraintlayout.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</android.support.v4.widget.NestedScrollView>

CollapsingToolbarLayout inside ViewPager

I am using a ViewPager which loads different pages. These shall be made of CollapsingToolbarLayout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Once inflated, the layout shall work like this:
It shall allow swiping through pages and every page has a picture in its toolbar which can collapse individually. Is this possible?
<?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/root_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/background"
android:transitionName="#string/transition_session_background">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll"
android:minHeight="1px"
android:fitsSystemWindows="true"
android:background="#null"
app:titleEnabled="false">
<ImageView
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:transitionName="#string/transition_session_image" />
</android.support.design.widget.CollapsingToolbarLayout>
<include layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:clipToPadding="false">
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

It shall allow swiping through pages and every page has a picture in
its toolbar which can collaps individually. Is this possible?
No, unfortunately toolbar having its own state for each page of viewpager is not possible. The reason is simple to understand, since the viewpager is a view of equal hierarchy as the viewpager the viewpager and toolbar work independently.
Although, you can have an app where each time a page is changed in viewpager, the toolbar either remains collapsed or expanded.
To achieve this set up viewpager's on page change listener
// Attach the page change listener inside the activity
vpPager.addOnPageChangeListener(new OnPageChangeListener() {
// This method will be invoked when a new page becomes selected.
#Override
public void onPageSelected(int position) {
appBarLayout.setExpanded(true);//or false as you wish
}
});
Using Support Library v23, you can call appBarLayout.setExpanded(true/false) in your onPageSelected() overridden method.

you can use Collapsing toolbar with viewpagerand a Tablayout:
<?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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
app:titleEnabled="false"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
//your image view under toolbar
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/test"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#color/colorAccent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
here is a good implementation Example:
http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/

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>

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