Hamburger icon not showing correctly after toolbar replacement Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Hamburger icon not showing correctly after toolbar replacement without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have an activity that has a fragment layout dedicated to the toolbar. In the center we have a normal nav_host container.

The activity contains one fragment that correctly shows the hamburger. If I click a button it gets replaced from a second fragment that replace the old toolbar with a new one. After clicking back the new toolbar is replaced by the old one.

The problem is that the hamburger icon doesn’t show up and the toolbar doesn’t work as expected. Ideas?

This is the code in the activity:

open fun setupToolbar() {
    initialToolbar = ToolbarFragment()
    setToolbarFragment(initialToolbar){
        setNavController()
    }
}

fun setToolbarFragment(fragment: Fragment, callback: () -> (Unit) = {}) {
    supportFragmentManager
            .beginTransaction()
            .replace(R.id.toolbarContainer, fragment)
            .runOnCommit {
                callback.invoke()
            }.commit()
}

private fun setNavController() {
    val navController = findNavController(R.id.nav_host_fragment)
    val appBarConfiguration = setFragmentsWithHamburgerMenu(navController)
    toolbar.setupWithNavController(navController, appBarConfiguration)
}

fun setFragmentsWithHamburgerMenu(navController: NavController): AppBarConfiguration {
    return AppBarConfiguration(
            setOf(
                    R.id.analyticsFragment,
                    R.id.routinesFragment,
                    R.id.currentRunFragment,
                    R.id.myMapsFragment,
                    R.id.myRobotsFragment
            ),
            drawer_layout
    )
}

This is the code instead of the second fragment:

override fun onResume() {
    super.onResume()
    val fragment = SearchToolbarFragment(searchHint, this::onQueryTextChange)
    baseActivity.setToolbarFragment(fragment) {
          // other stuff
    }

}

override fun onPause() {
    super.onPause()
    baseActivity.setupToolbar()
}

This instead is my activity layout:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bind="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable name="viewModel" type="[package].DashboardViewModel" />
    </data>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <FrameLayout
                android:id="@+id/toolbarContainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toTopOf="parent"/>

            <fragment
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:id="@+id/nav_host_fragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                app:defaultNavHost="true"
                app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/toolbarContainer" />

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_nav"
                style="@style/BottomNavigationView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:itemBackground="@color/white"
                app:itemTextColor="@color/button_view_item"
                app:labelVisibilityMode="labeled"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:menu="@menu/menu_bottom_nav" />

            <LinearLayout
                android:id="@+id/progressMaskLayout"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/toolbarContainer">

                <include layout="@layout/progress_mask" />
            </LinearLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true">

            <include
                bind:viewModel="@{viewModel}"
                layout="@layout/element_navigation_bar"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </com.google.android.material.navigation.NavigationView>
    </androidx.drawerlayout.widget.DrawerLayout>
</layout>

Answer

To avoid the problem I just added a fragment over the previous one and I removed the added one.

Like this:

fun addToolbarFragment(fragment: Fragment, callback: () -> (Unit) = {}) {
    supportFragmentManager
            .beginTransaction()
            .add(R.id.toolbarContainer, fragment)
            .runOnCommit {
                callback.invoke()
            }.commit()
}

fun removeToolbarFragment(fragment: Fragment, callback: () -> (Unit) = {}) {
    supportFragmentManager
            .beginTransaction()
            .remove(fragment)
            .runOnCommit {
                callback.invoke()
            }.commit()
}

In this way, all the customization done in the first toolbar won’t be lost.

We are here to answer your question about Hamburger icon not showing correctly after toolbar replacement - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji