How to insert a fragment layout within a Frame Layout

Question

I'm trying to create an Android app using Kotlin for the first time and am trying to use different fragment layouts when the user clicks on navigation icons without having them overlap my bottom navigation bar. I've created a FrameLayout with the intention of putting the fragment layouts within it, but am unclear on how to write the code to do so.

This is the MainActivity.kt that I have that covers the Nav bar now:

private val onNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
       when (item.itemId) {
            R.id.navigation_home -> {
                setContentView(R.layout.fragment_home)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_favorites -> {
                setContentView(R.layout.fragment_favorite)
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_calculator -> {
                setContentView(R.layout.fragment_calculator)
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

And this is my frame layout:

<FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above= "@id/nav_view">

</FrameLayout>

grantespo · Answer 1 · 2019-05-19T22:08:50.463

You want to navigate to the appropriate fragment when a tab on the NavBar is selected. This is how you do it.

Let's say we have a MainActivity which has 3 tabs: "Tab1", "Tab2", "Tab3" The MainActivity will have 2 XML Layouts: The navBar and the FrameLayout. Then, you're going to want to create 3 new Fragments (each having their own XML layout too). Those 3 Fragments will take the view of the framelayout when the appropriate navbar tab is selected

For Example:

MAIN ACTIVITY XML

<FrameLayout
    android:id="@+id/mainFragment"
    android:layout_width="match_parent"
    android:background="#ffffff"
    android:layout_height="match_parent"
    android:layout_above="@+id/bottom_nav"
    android:text="@string/title_home" />

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="?android:attr/windowBackground"
    app:menu="@menu/bottom_navigation" />

MAIN ACTIVITY KOTLIN

class MainActivity : AppCompatActivity() {

private lateinit var manager: FragmentManager
private lateinit var transaction: FragmentTransaction

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.navigation_tab1 -> {

            title = "Tab1"
            manager = supportFragmentManager
            transaction = manager.beginTransaction()
            transaction.replace(R.id.mainFragment, Tab1Fragment())
            transaction.addToBackStack(null)
            transaction.commit()


            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_tab2 -> {

            title = "Tab2"
            manager = supportFragmentManager
            transaction = manager.beginTransaction()
            transaction.replace(R.id.mainFragment, Tab2Fragment())
            transaction.addToBackStack(null)
            transaction.commit()

            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_tab3 -> {

            title = "Tab 3"
            manager = supportFragmentManager
            transaction = manager.beginTransaction()
            transaction.replace(R.id.mainFragment, Tab3Fragment())
            transaction.addToBackStack(null)
            transaction.commit()

            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

@SuppressLint("CommitTransaction")
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val navigation = findViewById<View>(R.id.bottom_nav) as BottomNavigationView
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

    }
}

score 0 · Answer 2 · answered May 19 '19 at 22:12

Please refer to very good source of knowledge: https://developer.android.com/training/basics/fragments/fragment-ui#AddAtRuntime

basically you need to create transaction which is mentioned in link:

val transaction = supportFragmentManager.beginTransaction().apply {
  // Replace whatever is in the fragment_container view with this fragment,
  // and add the transaction to the back stack so the user can navigate back
  replace(R.id.fragment_container, newFragment)
  addToBackStack(null)
transaction.commit()
}

so in your case:

when (item.itemId) {
var fragment: Fragment
            R.id.navigation_home -> {
              fragment = HomeFragment()
            }
            .
            .  
            .
val transaction = supportFragmentManager.beginTransaction().apply {
  replace(R.id.fragment_container, fragment)
  addToBackStack(null)
  transaction.commit()

you can also use use add instead of replace.

Please refer to this post to determine which method use: Difference between add(), replace(), and addToBackStack()

How to insert a fragment layout within a Frame Layout

2 Answers2