Frame layout takes over screen and hides bottom navigation and toolbar

Question

I am trying to switch my current setup of using the android navigation component to using the classic fragment manager because the nav component gives me a lot of limitations I can't work around.

I am facing an issue though, as when I begin a transaction to show a fragment in my frame layout, suddenly he bottom navigation and the toolbar don't show anymore. I've tried different things but I can't find a solution to why this is happening.

This is my activity's layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".FeedActivity"
android:orientation="vertical">


    <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:theme="@style/MyActionBar"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/my_toolbar"/>

    <include
            layout="@layout/content_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/feed_bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="?android:attr/windowBackground"

            app:itemBackground="@color/white"
            app:itemTextColor="@color/bottom_nav_color"
            app:itemIconTint="@color/bottom_nav_color"
            app:menu="@menu/navigation"
            app:labelVisibilityMode="unlabeled"/>

    </LinearLayout>

This is the layout of content_main I am including:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="FeedActivity"
             app:layout_behavior=""
             tools:showIn="@layout/activity_feed"
             android:padding="1dp"
             android:id="@+id/feed_frame_container">

</FrameLayout>

and this is my activity class:

import android.content.Intent
import android.os.Bundle
import android.util.Log
import android.view.Menu
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import androidx.fragment.app.Fragment
import androidx.lifecycle.ViewModelProviders
import co.getdere.Fragments.FeedFragment
import co.getdere.Fragments.ImageFullSizeFragment
import co.getdere.Fragments.ProfileRandomUserFragment
import co.getdere.Models.Images
import co.getdere.Models.Users
import co.getdere.RegisterLogin.RegisterActivity
import co.getdere.ViewModels.SharedViewModelCurrentUser
import co.getdere.ViewModels.SharedViewModelImage
import co.getdere.ViewModels.SharedViewModelRandomUser
import com.google.android.material.bottomnavigation.BottomNavigationView
import com.google.firebase.FirebaseApp
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.DatabaseError
import com.google.firebase.database.FirebaseDatabase
import com.google.firebase.database.ValueEventListener


class FeedActivity : AppCompatActivity() {

    lateinit var mToolbar: Toolbar
    lateinit var mBottomNav: BottomNavigationView

    var imageFullSizeFragment = ImageFullSizeFragment()
    var feedFragment = FeedFragment()
    var randomProfileNavHostFragment = ProfileRandomUserFragment()

    val fm = supportFragmentManager
    var active = feedFragment


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_feed)

        FirebaseApp.initializeApp(this)
        checkIfLoggedIn()


        mToolbar = findViewById(R.id.my_toolbar)
        setSupportActionBar(mToolbar)

        mBottomNav = findViewById(co.getdere.R.id.feed_bottom_nav)

        mBottomNav.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {

                co.getdere.R.id.destination_board -> {

                    val intent = Intent(this, BoardActivity::class.java)
                    startActivity(intent)
                }
                R.id.destination_profile_logged_in_user -> {

                    val intent = Intent(this, ProfileActivity::class.java)
                    startActivity(intent)
                }

                R.id.destination_feed -> {

                    val intent = Intent(this, ProfileActivity::class.java)
                    startActivity(intent)
                }
            }
            false
        }


        fm.beginTransaction().add(R.id.feed_frame_container, imageFullSizeFragment, "imageFullSizeFragment").hide(imageFullSizeFragment).commit()
        fm.beginTransaction().add(R.id.feed_frame_container, randomProfileNavHostFragment, "randomProfileNavHostFragment").hide(randomProfileNavHostFragment).commit()
        fm.beginTransaction().add(R.id.feed_frame_container, feedFragment, "feedFragment").commit()

    }


    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(co.getdere.R.menu.feed_navigation, menu)
        return super.onCreateOptionsMenu(menu)
    }

    private fun checkIfLoggedIn() {

        val uid = FirebaseAuth.getInstance().uid
        if (uid == null) {
            val intent = Intent(this, RegisterActivity::class.java)
            intent.flags = Intent.FLAG_ACTIVITY_CLEAR_TASK.or(Intent.FLAG_ACTIVITY_NEW_TASK)
            startActivity(intent)
        } else {
            fetchCurrentUser()
        }

    }

    private fun fetchCurrentUser() {

        val uid = FirebaseAuth.getInstance().uid
        val ref = FirebaseDatabase.getInstance().getReference("/users/$uid/profile")
        ref.addListenerForSingleValueEvent(object : ValueEventListener {
            override fun onCancelled(p0: DatabaseError) {
            }

            override fun onDataChange(p0: DataSnapshot) {


                sharedViewModelCurrentUser.currentUserObject = p0.getValue(Users::class.java)!!
                Log.d("checkLocation", "fetchCurrentUser")

            }

        })
    }


    companion object {
        fun newInstance(): FeedActivity = FeedActivity()
    }
}

If I run the app right now the fragment inside the frame layout takes over the whole screen, but if I remove these lines:

        fm.beginTransaction().add(R.id.feed_frame_container, imageFullSizeFragment, "imageFullSizeFragment").hide(imageFullSizeFragment).commit()
        fm.beginTransaction().add(R.id.feed_frame_container, randomProfileNavHostFragment, "randomProfileNavHostFragment").hide(randomProfileNavHostFragment).commit()
        fm.beginTransaction().add(R.id.feed_frame_container, feedFragment, "feedFragment").commit()

I can see the top bar and the bottom navigation again. Any ideas what's happening?

Answer 1

Try modifying <include> tag's android:layout* attributes in your activity's layout to:

<include
        layout="@layout/content_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

Answer 2

原来，我添加的一个片段的功能是隐藏这两个元素，因此，在将片段添加到片段管理器后，无论该片段是否处于活动状态，它们都是不可见的。