Navigation component - Hide navigation up icon and fragments label from the custom toolbar

Question

I'm trying to use custom action bar(with custom logo and navigation up button) for my application.

<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/white"/>

And set this tool bar in activity.

val navController = findNavController(R.id.nav_host_fragment_auth)
val appBarConfiguration = AppBarConfiguration(navController.graph)
val toolbar = findViewById<Toolbar>(R.id.toolbarAuth)
toolbar.setupWithNavController(navController, appBarConfiguration)

val mCustomView: View = layoutInflater.inflate(R.layout.custom_actionbar_auth, null)
val mButtonBack= mCustomView.findViewById<ImageView>(R.id.imageBack)
toolbar.addView(mCustomView)

Custom action bar layout,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/custom_actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:paddingStart="20dp"
android:paddingEnd="20dp">

<ImageView
    android:id="@+id/imageBack"
    android:layout_width="10dp"
    android:layout_height="15dp"
    android:layout_alignParentStart="true"
    android:layout_centerVertical="true"
    android:background="@drawable/ic_arrow_back_white" />

<ImageView
    android:id="@+id/imageTitle"
    android:layout_width="115dp"
    android:layout_height="20dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/ic_actionbar_logo" />

But when I'm going to different fragments it's showing the default navigation up button and fragment label in the action bar. How can I remove/hide these?

I tried following ways as well, but those could not work for me.

supportActionBar?.setDisplayHomeAsUpEnabled(false)
supportActionBar?.setHomeButtonEnabled(false)
supportActionBar?.setDisplayShowTitleEnabled(false)

toolbar.setNavigationIcon(null)

Answer 1

The toolbar.setupWithNavController() method calls through to the Toolbar methods of setNavigationIcon() and setTitle(). Those methods know nothing about your custom icon or title - they only update the built in navigation icon and title.

That means that toolbar.setupWithNavController() is not something you should ever be calling.

Instead, if you want your custom Toolbar layout to react to Navigation changes, you'll want to follow the guide for listening for navigation events and use an OnDestinationChangedListener to do whatever custom logic you want instead of calling toolbar.setupWithNavController():

val navController = findNavController(R.id.nav_host_fragment_auth)
val toolbar = findViewById<Toolbar>(R.id.toolbarAuth)
val mCustomView: View = layoutInflater.inflate(R.layout.custom_actionbar_auth, null)
val mButtonBack = mCustomView.findViewById<ImageView>(R.id.imageBack)
toolbar.addView(mCustomView)
navController.addOnDestinationChangedListener { _, destination, arguments ->
    // Update the icon for your mButtonBack, etc.
}

If you just want the default behavior for the navigation up icon, you can call navigateUp() directly:

mButtonBack.setOnClickListener {
    navController.navigateUp()
}