Solution 1 :
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
Solution 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
.
Solution 3 :
Add
android:layout_marginBottom=”55dp”
in your androidx.navigation.fragment.NavHostFragment
Solution 4 :
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.
Solution 5 :
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>
Solution 6 :
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>
Problem :
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>
Comments
Comment posted by Fahad Alotaibi
just use linear layout no need for ConstraintLayout in your case
Comment posted by Wrichik Basu
Excellent answer. Solved my issue. I have been searching for a solution for the past two hours.
Comment posted by Holger
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.
Comment posted by ianhanniballake
Do you see the same issue if you use
Comment posted by Holger
In that case I get
Comment posted by the known issue
You should be following the solution in
Comment posted by Kane Cheshire
Probably not a great idea to hard code a value like that, Google might change the height of the bottom nav one day.