Android: Intellij Buttom nav template creates unused space, hides nodes under it

by

Issue

I created an Android project in Intellij with the buttom nav template. I can not use a certain space on the top (see screenshot) which corelates in size with the buttom nav bar, even though the constrains seem to be right. As well it hides/converes elements which are placed under it, actually there is a TextView and a spinner. enter image description here

<?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"
        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_activity_main"
            android:name"androidx.navigation.fragment.NavHostFragment"
            android:layout_width"match_parent"
            android:layout_height"wrap_content"
            app:defaultNavHost"true"
            app:navGraph"@navigation/mobile_navigation"
            android:scrollbars"vertical" app:layout_constraintTop_toTopOf"parent"
            app:layout_constraintEnd_toEndOf"parent" app:layout_constraintStart_toStartOf"parent"
            app:layout_constraintBottom_toTopOf"@+id/nav_view" android:layout_marginBottom"40dp"
            android:paddingBottom"40dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Solution

You have to remove the fragment height from wrap_content to 0dp i.e match_constraint (match_parent)

match_constraint or 0dp : The view expands as much as possible to meet the constraints on each side (after accounting for the view’s margins).

Chain: A chain is a group of views that are linked to each other with bi-directional position constraints. The views within a chain can be distributed either vertically or horizontally. For your case we need a Vertical Chain. See video

And last I remove the android:paddingTop"?attr/actionBarSize" from you ConstraintLayout

Try the below code:

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


<fragment
    android:id"@+id/nav_host_fragment_activity_main"
    android:layout_width"match_parent"
    android:layout_height"0dp"
    android:scrollbars"vertical"
    app:defaultNavHost"true"
    android:name"androidx.navigation.fragment.NavHostFragment"
    app:layout_constraintBottom_toTopOf"@+id/nav_view"
    app:layout_constraintEnd_toEndOf"parent"
    app:layout_constraintHorizontal_bias"0.5"
    app:layout_constraintStart_toStartOf"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"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"parent"
    app:layout_constraintTop_toBottomOf"@+id/nav_host_fragment_activity_main"
    app:menu"@menu/bottom_nav_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answered By – Sniffer

Leave a Comment