How to keep showing the hamburger icon instead of the back/up icon after clicked on the drawer?

user_3321334 0
Viewed 484

I am following the codelab https://developer.android.com/codelabs/kotlin-android-training-add-navigation/index.html#9, and I use the following code to wire up the drawer:

class MainActivity : AppCompatActivity() {

    private lateinit var drawerLayout : DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        @Suppress("UNUSED_VARIABLE")
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        drawerLayout = binding.drawerLayout

        val navController = findNavController(R.id.myNavHostFragment)
        // To support up action and also the title, the third parameter is optional and is used
        // for the hamburger menu for drawer.
        NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)

        // show the navigation drawer
        NavigationUI.setupWithNavController(binding.navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.myNavHostFragment)

        // this is for the hamburger menu
        return NavigationUI.navigateUp(navController, drawerLayout)
    }
}

When the initial fragment is shown, the hamburger is shown as expected:

initial fragment

However, after I selected on one of the item from the drawer, e.g. About, it becomes a back/up button:

enter image description here

How to keep using the hamburger button instead of having it changed to an up button?

The full code from the codelab is here: https://github.com/google-developer-training/android-kotlin-fundamentals-apps/tree/master/AndroidTriviaNavigation

android-navigation android-architecture-navigation android
2 Answers

As per the AppBarConfiguration documentation:

NavigationUI uses an AppBarConfiguration object to manage the behavior of the Navigation button in the upper-left corner of your app's display area. The Navigation button’s behavior changes depending on whether the user is at a top-level destination.

A top-level destination is the root, or highest level destination, in a set of hierarchically-related destinations. Top-level destinations do not display an Up button in the top app bar because there is no higher level destination. By default, the start destination of your app is the only top-level destination.

When the user is at a top-level destination, the Navigation button becomes a drawer icon if the destination uses a DrawerLayout. If the destination doesn't use a DrawerLayout, the Navigation button is hidden. When the user is on any other destination, the Navigation button appears as an Up button.

Therefore if you want to have the Drawer icon appear on multiple destinations and not just the start destination, you need to create an AppBarConfiguration object with exactly what destinations you want to be top-level destinations:

// Use the IDs from your navigation graph
val appBarConfiguration = AppBarConfiguration(
    setOf(R.id.rulesFragment, R.id.aboutFragment),
    drawerLayout)

Thus, your code becomes:

class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration : AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        @Suppress("UNUSED_VARIABLE")
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        // Use the Kotlin extension in navigation-ui-ktx to create
        // the AppBarConfiguration
        appBarConfiguration = AppBarConfiguration(
            setOf(R.id.rulesFragment, R.id.aboutFragment),
            binding.drawerlayout)

        val navController = findNavController(R.id.myNavHostFragment)
        // To support up action and also the title, the third parameter is optional and is used
        // for the hamburger menu for drawer.
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration)

        // show the navigation drawer
        NavigationUI.setupWithNavController(binding.navView, navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.myNavHostFragment)

        // this is for the hamburger menu
        return NavigationUI.navigateUp(navController, appBarConfiguration)
    }
}
user_16763630

I think if you add the layout in your navdrawer_menu.xml file the hamburger icon will remain

user_129643010
Related