Bottom of NavHostFragment hidden behind BottomNavigationView

Question

I have layout with a nav bar at the bottom and the main content inside a NavHostFragment. Now the bottom of the NavHostFragment is hidden behind the nav bar. How can I fix this?

This is the main layout of the activity:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

And one of the fragments of the nav host:

<?xml version="1.0" encoding="utf-8"?>

<androidx.core.widget.NestedScrollView
    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"
    android:isScrollContainer="true"
    app:layout_constraintTop_toTopOf="parent">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

just use linear layout no need for ConstraintLayout in your case — Fahad Alotaibi, Feb 27 '20 at 04:51

score 14 · Answer 1 · answered Mar 23 '20 at 22:04

I had the same problem and I found a cure. @ianhanniballake was right, but that is not a final solution. The problem is in value of 'layout_height' of NavHostFragment. You should walk through next 3 steps in activity_main.xml:

Be sure or remove android:paddingTop="?attr/actionBarSize" from root ConstraintLayout
Add app:layout_constraintTop_toBottomOf="@id/nav_host_fragment" to <BottomNavigationView>
Change in <fragment ... NavHostFragment>

android:layout_height="match_parent"

to

android:layout_height="0dp"
android:layout_weight="1"

=======================

A Little investigation:

Let's create a 'Bottom Navigation Activity'-project from scratch.

Step 0.1:

add background to root of activity_main.xml

android:background="@android:color/holo_green_light"

Step 0.2: change content of fragment_home.xml to this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_dark">

    <TextView
        android:id="@+id/left_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L_T"
        android:background="#ffcccc"
        android:layout_gravity="start|top"
        android:textSize="120sp" />

    <TextView
        android:id="@+id/right_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="R_B"
        android:background="#ccffcc"
        android:layout_gravity="end|bottom"
        android:textSize="120sp" />
</FrameLayout>

You will see:

Step 1: remove android:paddingTop="?attr/actionBarSize":

Step 2: Add app:layout_constraintTop_toBottomOf="@id/nav_host_fragment" constraint for BottomNavigationView

Step 3 (Final). change height to 0dp and add android:layout_weight="1" for NavHostFragment

PS.Hope this helps for other similar problems

Excellent answer. Solved my issue. I have been searching for a solution for the past two hours. — Wrichik Basu, Nov 07 '22 at 19:47

score 2 · Answer 2 · answered Feb 27 '20 at 04:44

2

You're missing a app:layout_constraintTop_toBottomOf="@id/nav_host_fragment" on your nav_view - you need both directions to build a constraint chain:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    android:layout_alignParentBottom="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/nav_host_fragment"
    app:menu="@menu/bottom_nav_menu" />

Of course, there's no reason to use ConstraintLayout for this case - if you have solely vertically stacked, non-overlapping views, you should use a LinearLayout.

answered Feb 27 '20 at 04:44

ianhanniballake

191,609
30
470
443

Now the content is fully visible but the top of it is partially hidden behind the ActionBar and the bottom of the nav bar is pushed down so that only a part of it is still visible. – Holger Feb 27 '20 at 04:50
Do you see the same issue if you use `` instead of ``? – ianhanniballake Feb 27 '20 at 05:02
In that case I get `java.lang.IllegalStateException: Activity does not have a NavController set` – Holger Feb 27 '20 at 10:37
You should be following the solution in [the known issue](https://issuetracker.google.com/issues/142847973) and getting the NavController from the NavHostFragment. – ianhanniballake Feb 27 '20 at 14:42

score 0 · Answer 3 · answered May 05 '20 at 16:41

0

Add

android:layout_marginBottom="55dp"

in your androidx.navigation.fragment.NavHostFragment

answered May 05 '20 at 16:41

A J

4,542
5
50
80

Probably not a great idea to hard code a value like that, Google might change the height of the bottom nav one day. – Kane Cheshire Sep 09 '20 at 20:29

score 0 · Answer 4 · answered Jul 31 '20 at 16:25

Set android:layout_height="0dp" for NavHostFragment.

When you want to adjust width / height based on constraints so that they take up remaining space in relation to a constraint with other View, set the width / height to 0dp. Only then the Constraints work.

score 0 · Answer 5 · answered Oct 20 '20 at 16:17

Try the below layout. You can change the appCustomViewPager to anything which is usable for you.

        <androidx.constraintlayout.widget.ConstraintLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<com.impelsys.ebooks.ui.AppCustomViewPager
    android:id="@+id/view_pager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorWhite"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_constraintBottom_toTopOf="@+id/nav_view"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0" />

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

score 0 · Answer 6 · answered Dec 30 '20 at 08:53

I used LinearLayout as main layout and added weights to the child layouts

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation"
        android:layout_weight="2"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        app:itemIconTint="@drawable/bottom_navigation_selector"
        app:itemTextColor="@drawable/bottom_navigation_selector"
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</LinearLayout>

Bottom of NavHostFragment hidden behind BottomNavigationView

6 Answers6