Bottom of NavHostFragment hidden behind BottomNavigationView - android

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>

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

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.

Add
android:layout_marginBottom="55dp"
in your androidx.navigation.fragment.NavHostFragment

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.

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>

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>

Related

Why can't my recyclerview scroll completely

I am trying to get recyclerview to scroll completely. For some reason the recyclerview stops to scroll at a particular spot, as if it as scrolled completedly.
Here's a picture of this:
Please keep in mind this is where the recyclerview scrolls to. And this fragment (screen) only contains the recyclerview.
this is the layout of the fragment containing the recyclerview:
<androidx.constraintlayout.widget.ConstraintLayout 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=".ui.ways.WaysFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#layout/custom_ways_item" />
</androidx.constraintlayout.widget.ConstraintLayout>
This the custom_view_item of the recyclerview:
<androidx.constraintlayout.widget.ConstraintLayout
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="425dp">
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="370dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_marginStart="30dp"
android:layout_marginTop="25dp"
android:layout_marginEnd="30dp"
android:foreground="?selectableItemBackground"
app:cardCornerRadius="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
.....
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Thanks for your help in advance.. I'm more than happy to provide any information needed. Thanks again.
EDIT
Here's my activity_main.xml. I'm using navigation component method.
<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">
<fragment
android:id="#+id/nav_host_fragment_activity_main"
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="#id/container"
app:navGraph="#navigation/mobile_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:labelVisibilityMode="selected"
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>
The RecyclerView (fragment content) is drawn behind the BottomNavView; to solve this you need to make the fragment container to match the constraints by setting android:layout_height="0dp"; so that the constraints set can be applied:
<fragment
...
android:layout_height="0dp"
Give the recycler view a layout_height of 0dp so it can match constraints also link the bottom constraint to top of the bottom navigation menu.
<fragment
android:id="#+id/nav_host_fragment_activity_main"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
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/bottom_nav_menu" />

Cannot see the end part of post in my recyclerview completely

This is the feed where I used recyclerview in home fragment to show posts but in it, I can't see the last post completely and if I add any textview below that still can't view it.
As shown in the image I can't see the like comment and share button of the last post
I tried putting the textview inside the swiperefreshlayout and out of it but still not working here is the code for fragment and activity:
Fragment :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="#color/light_grey">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/pullToRefresh"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<Space
android:layout_width="match_parent"
android:layout_height="30dp"
android:id="#+id/spppp"
android:layout_below="#+id/pullToRefresh"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/homeend"
android:layout_below="#id/spppp"
android:fontFamily="#font/nunito"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/add_post_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.954"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.88"
app:srcCompat="#android:drawable/ic_input_add" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="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" />
<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" />
</androidx.constraintlayout.widget.ConstraintLayout>
I think the issue is in the activity layout. Your fragment takes up the width and height of the activity, but you're also displaying a bottom navigation view at the bottom, it might be hiding part of the fragment.
Try setting your fragment to fill up the activity, but also be on top of the bottom navigation bar. You're currently setting the fragment's height to match_parent, which is making its layout_constraintBottom_toTopOf="#id/nav_view" useless.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent" />
<fragment
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to set fragment above bottom navigation view with xml?

I am trying to show a fragment host above bottom navigation view. But bottom nav view takes a portion of the fragment host. I tried solutions of other SO answers but it still not solving the problem.
I used both Relative layout with 'layout_above' attribute and constraint layout with realted attributes to keep the fragment above bottom nav view. But the fragment show the text view is still cut off by bottom nav view.
Heres the xml codes I tried:
With relative layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu" />
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/nav_host_fragment"
android:layout_alignParentStart="true"
app:defaultNavHost="true"
app:navGraph="#navigation/mobile_navigation" />
</RelativeLayout>
with constaint layout:
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="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" />
<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" />
</androidx.constraintlayout.widget.ConstraintLayout>
How do I set the fragment host above bottom navigation view with xml?
Try using linear layout
<?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"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true"
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"
app:menu="#menu/bottom_nav_menu" />
</LinearLayout>
Replace the paddingTop by 0dp value, that solved it for me.
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="0dp"
android:paddingTop="?attr/actionBarSize" <!-- Delete this line -->
android:layout_marginBottom="?attr/actionBarSize" <!-- If you have BottomNavigationView, add this line, so it doesn't overlap your list -->
>

2 Navigationbars (top and bottom) in android

So I need two navigationbars (one at the bottom and one on the top). But as you can already see on the picture above there is no room for the navigation bar on the bottom because of the map (the navigation bar is below the screen). How can I show the bottom navigation bar WITHOUT setting hardcoding width and heights of the map.
This is my xml file:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main3Activity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu" />
<fragment
android:id="#+id/map2"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapsActivity"></fragment>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_viedw"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu" />
</LinearLayout>
As you are using ConstraintLayout, there's no need to use LinearLayout as ConstraintLayout is more efficient and is meant to keep the layout hierarchy flat. You can try as shown below:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main3Activity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="#menu/bottom_nav_menu" />
<fragment
android:id="#+id/map2"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/nav_viedw"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/nav_info"
tools:context=".MapsActivity" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_viedw"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/nav_info"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
Give some margin bottom in fragments in which you want to show your bottom navigation, as now your fragment taking all height of layout below the top navigation.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<fragment
android:id="#+id/map2"
android:layout_width="0dp"
android:layout_height="0dp"
tools:context=".MapsActivity"
app:layout_constraintTop_toBottomOf="#+id/nav_info"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#+id/nav_viedw"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_viedw"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Fragment Content Overlaps Toolbar and Bottom Navigation View

I have implemented a bottom navigation view in my android application. With five fragments. However, I have a problem that each time I change the fragment the content of the fragment overlaps the toolbar.
layout for the bottom navigation view
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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=".DashboardActivity">
<include layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</include>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_above="#+id/navigationView"
android:layout_height="match_parent"
/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationView"
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:itemBackground="#android:color/white"
app:itemIconTint="#color/cardview_dark_background"
app:itemTextColor="#android:color/black"
app:menu="#menu/navigation_menu"
/>
</android.support.constraint.ConstraintLayout>
an example of one of the fragments layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AttendanceFragment">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.7" />
<android.support.v7.widget.CardView
android:id="#+id/cardView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/barrier3"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/spinner_courses"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.v7.widget.CardView>
<TextView
android:id="#+id/tv_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/colorPrimaryDark"
android:textSize="12sp"
app:layout_constraintBottom_toTopOf="#+id/barrier3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="Date" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_add_icon"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<!--<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginBottom="4dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:clickable="true"
app:srcCompat="#drawable/ic_more_vert_black_24dp"
app:fabSize="mini"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/spinner"
app:layout_constraintTop_toTopOf="parent"
android:focusable="true" />-->
<android.support.constraint.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="cardView2,tv_time"
tools:layout_editor_absoluteY="511dp" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="4dp"
app:cardBackgroundColor="#color/colorMainBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/barrier3">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_register"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
This is what the screen look like with overlapping content
I removed from my ConstraintLayout the default generated marginTop field, and changed my fragment's layout_height to 0dp. Then in all of my Fragments' layout's the outermost layout_height I always set to match parent.
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="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" />
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
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" />
</androidx.constraintlayout.widget.ConstraintLayout>
Add margins to container:
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_above="#+id/navigationView"
android:layout_height="match_parent"
android:layout_marginBottom="{bottom_navigation_height}"
android:layout_marginTop="{tool_bar_height}"
/>
You should add constraints to your #id/container.
To the top to your toolbar and to the bottom to the BottomNavigationBar. The same should you do to these elements. Toolbar top to parent and toolbar bottom to container. BottomNavigationBar top to container and bottom to parent. Then set the height of the container to 0dp.
<include layout="#layout/toolbar"
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="?attr/actionBarSize"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="#+id/navigationView"
app:layout_constraintTop_toTopOf="#id/toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
Didn't test the code but should work.
Its overlapping because You have not giving proper constraint to your controls.
You can try this way.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">
<include
android:id="#+id/include"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/navigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/include" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigationView"
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:itemBackground="#android:color/white"
app:itemIconTint="#color/cardview_dark_background"
app:itemTextColor="#android:color/black"
app:menu="#menu/navigation_menu"
/>
</android.support.constraint.ConstraintLayout>
In Recent Android Studio Versions (4.0.beta 1), if the hierarchy on the default generated activity_main.xml (omitted attributes) is as following,
<androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView />
<fragment />
</androidx.constraintlayout.widget.ConstraintLayout>
The fragments seems overlapping the bottom navigation, just rearranging it as shown below,
<androidx.constraintlayout.widget.ConstraintLayout>
<fragment />
<com.google.android.material.bottomnavigation.BottomNavigationView />
</androidx.constraintlayout.widget.ConstraintLayout>
fixed the problem for me without touching any constraints and NOT adding any padding or margins
your fragment container used "match_parent",which take up the position of toolbar and navigationBar,maybe you can choice nested LinearLayout and use height=warp_content, weight=1

Categories

Resources