Android bottom navigation bar - layout with ScrollView

Question

How would I configure my bottom navbar to force it to the bottom of the screen?

Example bottom nav bar:

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_menu" />

My layout (activity_main.xml) looks like:

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

<ScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:context=".MainActivity">

            <ImageView
                android:id="@+id/childPic"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:layout_marginTop="40dp"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/baby"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            More Image and TextViews

        </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Full XML here: https://snipit.io/public/snippets/66046

I tried various things like putting things in Views and/or Linear Layouts.

For the bottom bar, I also tried not using FrameLayout and just Linear/Relative Layout.

Either the app crashes or the bottom bar is somewhere in the middle of my screen

Need assistance figuring out how to create a bottom nav bar given that there is a ScrollView.

Or is something I am doing not good practice?

Answer 1

You cannot put your bottom navigation in the bottom of screen, because you are using ScrollView as a root layout. Everything inside Scrollview will be Scrolled. In order to keep bottom navigation in the bottom and fixed you should change your root layout to ConstraintLayout and put ScrollView inside it like:

<ConstraintLayout 
layout_height="match_parent>
<ScrollView
layout_height="wrap_content">
... Scrollable views here
</ScrollView>
<BottomNavigationView/>
</ConstraintLayout>

It is more recommended to use NestedScrollView instead of Scrollview as it is more flexible with animations