Android Navigation Bar covering viewpager content

Question

I can't stop the Systems Navigation Bar from covering up my content!

I am scrolled to the very bottom of the recyclerview but its getting hidden behind the navigation bar. Here is my XML layout.

<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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="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" />

</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:fitsSystemWindows="true"
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<com.melnykov.fab.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    app:fab_colorNormal="@color/accent"
    app:fab_colorPressed="@color/accent_dark" />

Here is the fragments layout which you are seeing in the picture.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="8dp">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"/>

</FrameLayout>

Ive tried adding android:fitsSystemWindows="true" into every piece of layout I could but that did not work. Other threads mention adding margin calculated from the bar, but that doesn't seem like the proper solution. I grabbed this layout directly from Google's CheesSquare app demo'ing the appbarlayout, and that one looks like its working fine.

Answer 1

I Figured it out. In my particular situation each of my fragments manage their own toolbar instance. I was calling setSupportActionBar() in the onViewCreated() method on my fragments. Moving this functionality into onCreateView() solved it.

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_my_account, container, false);
        setupToolbar((Toolbar) view.findViewById(R.id.toolbar));
        return view;
    }

    private void setupToolbar(Toolbar toolbar) {
        toolbarController.registerToolbar(toolbar);
        toolbarController.setActivityTitle("My Account");
    }

(registerToolbar() calls setSupportActionBar() inside the hosting activity).

Hope this helps everyone!

Answer 2

Go to style.xml and remove these two items, or set their "true" values to "false".

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

In my case the problem was solved by removing these two theme styles values.

Answer 3

try to replace your gradle dependency

com.android.support:recyclerview-v7:22.0.+

with

com.android.support:recyclerview-v7:22.2.0 

or

com.android.support:recyclerview-v7:+

(not sure this is the right notation)

Answer 4

The problem is using of AppBarLayout. The CoordinatorLayout was introduced as powerful FrameLayout which brings nice animations based on defined Behaviors. If we want to add some kind of scroll animation, like collapsing toolbar, etc. then we have to wrap our Toolbar with AppBarLayout, but when we want to place a static content inside CoordinatorLayout, such as ViewPager in your case, then we don't need to use AppBarLayout at all:

activity_main.xml:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.mydemoci.MainActivity">

    <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"/>

    <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"/>

</android.support.design.widget.CoordinatorLayout>

content_main.xml:

<RelativeLayout
    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="#A1D490"

    // Remember CoordinatorLayout is a kind of FrameLayout,
    // so we have to provide top margin to make Toolbar visible
    android:layout_marginTop="?attr/actionBarSize"

    tools:context="com.mydemoci.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@color/colorAccent"
        android:text="Hello World"
        android:textSize="30sp"/>

</RelativeLayout>

Answer 5

Simply adding margin bottom to View Pager fix it for me.

Here is the code in my activity_main.xml

<android.support.v4.view.ViewPager
    android:id="@+id/main_viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="55dp"/>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />

Answer 6

Wrap ViewPager into ConstraintLayout then, set to your viewpager:

app:layout_constraintBottom_toBottomOf="parent"

that should work

Answer 7

Viewpager's fragment root view has to be RecyclerView or NestedScrollView. FrameLayout doesn't support scrolling behavior of CoordinatorLayout and this is why it doesn't work well.

How you can fix the viewpager's fragment layout: don't wrap RecyclerView inside FrameLayout. Instead declare RecyclerView at the root. You also can set padding="8dp" on RecyclerView, just use android:clipToPadding="false".