Search code examples
androidandroid-architecture-navigation

How to remove back button from toolbar when using bottom menu bar with navigation architecture components

I have an application which has a bottom menu bar which users can use to switch between 4 home page tabs. It's working fine like below.

enter image description here

The only problem I'm having is it showing back button when I switch between different fragment. Since all these fragments are at the same level I do not want it to behave like that.

This is my implementation.

MainNavigationActivity

class MainNavigationActivity : AppCompatActivity() {

    private lateinit var navigationController: NavController

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

        initialization()
    }

    private fun initialization(){

        navigationController = Navigation.findNavController(this, R.id.hostFragment)

        setSupportActionBar(toolbar)
        NavigationUI.setupWithNavController(bottomNavigationBar,navigationController)
        NavigationUI.setupActionBarWithNavController(this,navigationController)
    }

override fun onBackPressed() {
        onSupportNavigateUp()
    }

MainNavigationActivity Layout

<RelativeLayout
        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=".activities.MainNavigationActivity">

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="@color/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <fragment
            android:id="@+id/hostFragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/toolbar"
            android:layout_above="@id/bottomNavigationBar"
            app:defaultNavHost="true"
            app:navGraph="@navigation/main_navigation_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@android:color/white"
            app:menu="@menu/bottom_navigation_menu"
            app:labelVisibilityMode="labeled"/>

</RelativeLayout>

bottom_navigation_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/navigation_home"
            android:state_checked="true"
            android:color="@color/colorPrimary"
            android:title="@string/navigation_home"
            android:icon="@drawable/ic_bottom_bar_menu_home"/>
    <item
            android:id="@+id/navigation_offers"
            android:state_checked="false"
            android:color="@color/gray"
            android:title="@string/navigation_offers"
            android:icon="@drawable/ic_bottom_bar_menu_offers"/>

    <item
            android:id="@+id/navigation_my_bookings"
            android:state_checked="false"
            android:color="@color/gray"
            android:title="@string/navigation_my_bookings"
            android:icon="@drawable/ic_bottom_bar_menu_bookings"/>
    <item
            android:id="@+id/navigation_my_account"
            android:state_checked="false"
            android:color="@color/gray"
            android:title="@string/navigation_my_account"
            android:icon="@drawable/ic_bottom_bar_menu_account"/>
</menu>

The Ids are given to the fragments in the navigation graph and the ids in the menu.xml are the same. that's how it identifies the correct fragment and switch to that fragment correctly.

How can I remove this back button on the toolbar in home screen level?

Solution

  • As per the NavigationUI documentation:

    By default, the Navigation button is hidden when a user is at a top-level destination of a navigation graph and appears as an Up button in any other destination.

    If you want to customize which destinations are considered top-level destinations, you can instead pass a set of destination IDs to the constructor, as shown below:

    val appBarConfiguration = AppBarConfiguration(setOf(
    R.id.navigation_home, R.id.navigation_offers,
    R.id.navigation_my_bookings, R.id.navigation_my_account))

    (Note that this constructor requires the navigation-ui-ktx artifact - the alternative is to use the AppBarConfiguration.Builder)