Kotlin Bottom Navigation bar is not alining to the bottom of the screen

Question

I'm creating a simple app with a navigation bar and everything looks OK in the activity, but, when I run the app, the navigation bar is not alining to the bottom of the screen, it moves up. I tried using different virtual phones (with different screen sizes) same result. Any assistance, it's greatly appreciated. Here is my code:

Main Activity

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Home">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:textSize="50sp"
        android:textStyle="bold"
        android:layout_centerInParent="true"
        android:textColor="@color/black" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="0dp"
        android:padding="0dp"
        app:itemBackground="@color/cardview_dark_background"
        app:itemTextColor="@drawable/selector"
        app:itemIconTint="@drawable/selector"
        app:menu="@menu/menu"
        />

</RelativeLayout> 

Menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/dashboard"
        android:title="Dashboard"
        android:icon="@drawable/ic_dashboard" />
    <item
        android:id="@+id/about"
        android:title="About"
        android:icon="@drawable/ic_about" />
    <item
        android:id="@+id/home"
        android:title="Home"
        android:icon="@drawable/ic_home" />
</menu>

this is how it looks in the activity layout

this is how it looks when I run the app

Answer 1

There's no issue with your xml file. The problem is with the edge-to-edge implementation. The default setup from Android Studio doesn't work well with bottom navigation.

You can either comment out the edge-to-edge code (not recommended) like this:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
//        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
//            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
//            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
//            insets
//        }
    }
}

Or, you can update it to handle the insets properly:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val bars = insets.getInsets(
                WindowInsetsCompat.Type.systemBars()
                        or WindowInsetsCompat.Type.displayCutout()
            )
            v.updatePadding(
                left = bars.left,
                top = bars.top,
                right = bars.right,
                bottom = bars.bottom,
            )
            WindowInsetsCompat.CONSUMED
        }
    }
}