Android | Kotlin | PreferenceFragmentCompat overlaps BottomNavigationView

Question

I'm having trouble when displaying my preferences in my app. My layout has a BottomNavigationView, and the preferences are overlapping this navigation. I've seen similar questions here, with different solutions, but none of them are working for me. I must be missing something in how the layouts work, but I don't see it.

This is my MainLayout:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="100"
    android:id="@+id/fragmentContainer"
    android:background="@color/colorSecondary"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigation"
        app:layout_constraintEnd_toStartOf="@+id/bottomNavigation"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        app:menu="@menu/bottom_nav_menu"
        android:background="@color/colorPrimary"
        app:itemIconTint="@android:color/white"
        app:itemTextColor="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

And this is how I load my preferences (I don't have a layout for this):

class SettingsFragment : PreferenceFragmentCompat() {

    override fun onCreatePreferences(savedInstanceState: Bundle?, rootKey: String?) {
        (activity as AppCompatActivity).supportActionBar?.title = "Settings"
        activity!!?.setTheme(R.style.PreferenceScreen);

        setPreferencesFromResource(R.xml.preferences,rootKey)
    }
}

This is how it looks in the app, the preferences are showing above the bottom navigation. Is there any way to limit the preferences to show until the bottom navigation view, and not any further (or on top of it)?

I instantiate SettingsFragment as follows throug a call in MainActivity:

replaceFragment(SettingsFragment(), "settings")

And the method for that is:

private fun replaceFragment(fragment: Fragment, fragmentTag: String){
        val fragmentTransaction = supportFragmentManager.beginTransaction()
        fragmentTransaction.replace(R.id.fragmentContainer, fragment, fragmentTag)
        fragmentTransaction.commit()
    }

Also useful to add: I see this problem only on a Samsung Galaxy S2 Plus phone, running Android 4.2.2 (JellyBean), and I can simulate it as well in a virtual device running JellyBean (API level 17).

I don't see it on a Samsung S9 running Android 10 (Q, API level 29), or Alcatel Go Play running Android 5.0.2 (Lollipop, API level 21).

So I'm guessing I'm doing something with the layouts which works on newer Android versions, but not on API level 17.

In my build.gradle file, I have the following in my defaultConfig:

minSdkVersion 17
targetSdkVersion 29

Answer 1

It's clearly an API level issue. I've played around with the virtual devices, and once I use API level 21, it works fine. All API levels lower than this will give the layout issue.

Since API level 21 still covers around 94% of the devices out there, I took the easy way out and simply upgraded my minSdkVersion from 17 to 21.