Develop Reference

FAB not positioning inside CoordinatorLayout with RecyclerView

I am trying to display a list of items with a FAB to add a new item. The current screen is as below.
I have a CoordinatorLayout which has only a RecyclerView and the FAB. My problem is the FAB is not getting anchored to the bottom of the page, but to the bottom of the RecyclerView whose height seems to behave as if its wrap_content, but I've declared as match_parent. The RecylerView has a silver background for illustrative purposes.
<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"
tools:context="com.ae.apps.tripmeter.fragments.expenses.TripsListFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#color/silver"
android:layout_margin="#dimen/activity_horizontal_margin"
app:layoutManager="LinearLayoutManager"
tools:listitem="#layout/fragment_trip"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_input_add"
app:elevation="8dp"/>
I can't figure out why I am not able to position the FAB at the bottom of the page.

Try putting the RecyclerView in a 'content' layout file and add it to the main layout via
<include layout="#layout/content_recyclerview" />
EDIT:
The FAB should not be placed in the Fragment if it is to reside at the bottom of the Activity. Remove the FAB from the fragment and add it to the main activity. Like this:
<?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.your_company.your_project">
<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.AppBarLayout>
<-- ref. your recycler here -->
<include layout="#layout/content_with_your_list"/>
<-- Put the FAB here -->
<android.support.design.widget.FloatingActionButton
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_input_add"
/>
</android.support.design.widget.CoordinatorLayout>
Now in your fragment remove the FAB! It should reside in your main activity with the CoordinateLayout. Use a simple LinearLayout in your fragment.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_your_main_activity"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/silver"
android:layout_margin="#dimen/activity_horizontal_margin"
app:layoutManager="LinearLayoutManager"/>
</LinearLayout>
You will need to make changes were appropriate in order to fit you your project.
Toggle FAB visibility
In order to toggle the visibility of the FAB add the following property to the FloatingActionButton in your Parent Activity.
android:visibility="gone"
and make it visible in code with:
mFab.setVisibility(View.VISIBLE);
or invisible, again with
mFab.setVisibility(View.GONE);
Whenever you need, eg. when a fragment is displayed or removed.

You probably want something like this?
Example
<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.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_gravity="bottom|end"
android:src="#android:drawable/ic_input_add"
android:layout_margin="8dp"
app:elevation="8dp"/>
If you want to have some layout under fab, you should use relative layout as root layout. And put my code in this relative layout.

I use the following to anchor the fab at bottom of the recyclerView and it gives me my desired output. Try with this..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

Android floating action button hidden behind of bottom navigation bar

New to android programming & struggling with right now. I'm using android studio's default "Navigation Drawer Activity". On top of that, I've added a Bottom Bar from https://github.com/roughike/BottomBar. But, after adding that my FAB has hidden behind the Bottom Bar.
Here is the Scrrenshot -
I know it's some kind of style issue. I tried to give bottomMargin for FAB. But, it's not working.
Here is my code -
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.bhramaan.android.bhramaan.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/BhramaanTheme.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/BhramaanTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
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" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_gravity="bottom|end"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_behavior="shy"
android:background="#color/bottomBar"
app:bb_activeTabColor="#color/white"
app:bb_tabXmlResource="#xml/bottombar_tabs" />
</android.support.design.widget.CoordinatorLayout>
Need Some Guidance to solve this.

Add app:elevation="#dimen/text_margin" like this:
<android.support.design.widget.FloatingActionButton
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"
app:elevation="#dimen/text_margin" /><!--adding this line should resolve your problem-->

Here is a solution that works for our use case. Basically we wanted to hide bottom navigation view and the fab that belongs to it whenever the user scrolls in the screen.
For that purpose we have decided to use the app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" that comes out of the box for BottomNavigationView. All that is left is to anchor the fab to the BottomNavigationView and use the same layout_behavior on fab, too.
Here is an example of it:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<include layout="#layout/inc_app_bar"/>
<fragment
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/main_nav_host_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="#navigation/bottom_nav_graph"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/main_bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/Theme.BottomNavigationView"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/main_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/main_bottom_nav_view"
app:layout_anchorGravity="top|end"
android:layout_marginBottom="#dimen/fab_margin_bottom"
android:layout_marginEnd="#dimen/fab_margin_end"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:srcCompat="#drawable/ic_add_24px"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Other than that you can define your own layout_behavior for fab as explained in GitHub: BlogPosts / android-coordinatorlayout-scrolling-hide-fab-behavior.md too.
I hope that it helps :)

In advance I let other know this solution fits to my needs. I don't need fancy animations(which is ok, but not for my project requirements). What I did is to wrap the main content(FrameLayout), the FAB and the BottomNavigationView inside a RelativeLayout. Again, I think this could be done in a better way, so i'm open to suggestions.
<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:id="#+id/admin_appbar_layout"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
tools:elevation="4dp">
<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/admin_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/customActionBar"
app:theme="#style/customActionBar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/H2_bold"
android:text="#string/activity_admin_name"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation_bar"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_new_item"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_action_new"
android:layout_alignParentEnd="true"
android:layout_above="#+id/bottom_navigation_bar"
android:layout_margin="#dimen/fab_dimen"
tools:elevation="2dp"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/black"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/admin_bottom_navigation_items"
tools:elevation="2dp"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I know the question may seems old, but hope this helps to someone else.

Its just margin issue. Just try to implement this code in your coordinatorLayout
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="?attr/actionBarSize">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
style="#style/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_plus" />
</FrameLayout>
And use this style in your style.xml file.
<style name="floating_action_button">
<item name="android:layout_marginBottom">16dp</item>
</style>
We're just doubling the margin. First BottomNavigationView, and Second the default margin of FAB.

Change your xml as this. Add some more properties to your Floating Action Button.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|end"
android:layout_marginBottom="70dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:src="#android:drawable/ic_dialog_email" />

Floating Action Button isn't visualized on RecyclerView. How?

I want put a FAB on a RecyclerView to add more items but only show de RecyclerView without FAT or anything I put here. This is my code:
<LinearLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/lista"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnAnadir"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_add_white_24dp"
app:borderWidth="0dp"
app:layout_anchorGravity="bottom|center"
android:layout_gravity="right" />

Try using FrameLayout instead of LinearLayout as your root layout.

Using Floating Action Button With Tabs

I am using floating action button with slidingtablayout, but when i use fab in fragments every tab will have its own fab, and transition looks bad like this video from google design
http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNVRkV3FZMktvMWc/components-buttons-fab-behavior_06_xhdpi_009.webm
When i use fab in the viewpager it shrinks fragments like in the link
https://drive.google.com/file/d/0By6vpKpg_w4tcEJQUUlRazd0VEk/view?usp=sharing
Here is my code activity_main.xml
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.smooth.www.smooth.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/ColorPrimary"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
/>
</LinearLayout>
and one of my tabs
<android.support.design.widget.CoordinatorLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#f0f0f0"
>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/tab_main_swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.RecyclerView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/main_recycler"
/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:id="#+id/main_fab"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:transitionName="#string/fab_transition_name"
android:src="#drawable/fab_image"
app:layout_anchor="#id/main_recycler"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
what can i do to for transitions to look good??

Looks like you ar using a LinearLayout or something, instead of RelativeLayout. Can you post code snippets?

Bottom navigation bar hides on trying scroll

I have Activity with bottom navigation bar (via roughike BottomBar library). It's look like this:
When i'm trying to scroll page, bottom bar hides automatically. So, I get this:
I want avoid this effect. I do not want hide bottom bar when I'm just trying to scroll content but all content lies on screen.
But if page contains content more than one screen then bottom bar must hides on scroll (and now it's works fine).
My code doesn't have any listeners for scroll and my xml file looks like this:
<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"
tools:context=".presentation.ui.mainactivity.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainCord" >
<android.support.design.widget.AppBarLayout
android:id="#+id/sliderContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="#color/primary"
android:theme="#style/ToolbarStyle"
app:titleTextAppearance="#style/ToolbarStyle" />
</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:visibility="gone" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
</android.support.design.widget.CoordinatorLayout>
I'm looked for solution for my problem but found nothing. What can i do for avoid this effect?
UPDATED:
FAB is inside ViewPager. Layout for tab on screenshot look like this:
<?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/eventCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.RecyclerView
android:id="#+id/eventsRecyclerView"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity = "center"
android:gravity="center" >
<TextView
android:id="#+id/emptyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:gravity="center"
android:text="#string/empty_events_text"
android:drawableTop="#drawable/ic_no_calendar"
android:drawablePadding="4dp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_event_text"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primary"
android:text="#string/create_event"
android:textSize="16sp"
android:visibility="gone" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/createEvent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_add_white_24dp"
style="#style/floating_action_button"
app:layout_anchor="#id/eventsRecyclerView"
app:layout_anchorGravity="bottom|end"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
<RelativeLayout
android:id="#+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

app:bb_behavior="underNavbar"
You have an issue in the following code
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
replace the
app:bb_behavior="shy|shifting"
with
app:bb_behavior="underNavbar"
Hope this works for you!

Check your manifest FILE and make sure you're not using full screen theme...However, you can use the following code to hide and show the bar on android higher than API 19. To hide the bar, just change VISIBLE to GONE, and make sure you call the showNavBar() method in both your onCreate() and onResume() method
public void showNavBar() {
View view = getWindow().getDecorView();
view.setSystemUiVisibility(View.VISIBLE);
}

I had the same issue, I fixed it by doing this:
In activity_main.xml add this to the CoordinatorLayout:
android:fitsSystemWindows="true"
The viewpager should be like this:
<android.support.v4.view.ViewPager
android:background="#color/colorPrimary"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
And in all your Fragments, they should start with NestedScrollView and must contain (fillViewport):
<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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context="com.khan.junaid.phonefans.MainActivity">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fans_list_view"
/>
</android.support.v4.widget.NestedScrollView>
These settings will make the fragments scrollable, and the content will no more be hiding behind the Navigation bar buttons.