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

Question

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.

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?

score 31 · Accepted Answer · edited Jun 20 '20 at 09:12

31

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)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 23 '19 at 17:07

ianhanniballake

191,609
30
470
443

It worked but `AppBarConfiguration` cannot be accessed like that even document says so. it's a private constructor. – Chathuranga Shan Jayarathna Jul 23 '19 at 18:40
Like I said in the answer, the documentation assumes you are using `navigation-ui-ktx` if you're using Kotlin code. It is that artifact where that method exists. – ianhanniballake Jul 23 '19 at 18:42
1

how to pass appBarConfiguration if I set my toolbar from each fragment ? could you please help me here ? https://stackoverflow.com/questions/61093359/how-to-remove-back-button-in-the-toolbar-of-top-level-fragment-if-i-set-toolbar – Alexa289 Apr 08 '20 at 04:51
@Alexa289 - you can create an AppBarConfiguration in each fragment – ianhanniballake Apr 08 '20 at 04:54
@ianhanniballake i have tried to set it in fragment like this https://i.stack.imgur.com/eYf7v.png but the back button still appear sir. – Alexa289 Apr 08 '20 at 05:00
I finally can remove it, I have to set appbarconfiguration in each top level fragment, not only in home fragment – Alexa289 Apr 08 '20 at 05:22
@Alexa289 - that's what I meant when I said "in each fragment" - every `setupWithNavController()` should be passed your `AppBarConfiguration`. How else would it know how you want it set up? – ianhanniballake Apr 08 '20 at 05:34
This won't work in multi-setup project. You need to have a separate module having all the nav_graphs visible to each other and then you can have such solution. – Beemo May 09 '23 at 11:43

Devansh Maurya · Answer 2 · 2021-01-06T10:11:22.697

You can also use the extension function for AppBarConfiguration that takes the bottom navigation menu as its argument, just to make things a bit easier. Check here

It will set all the fragments in your bottom navigation bar as the top-level destinations.

It is as simple as this:

val appBarConfiguration = AppBarConfiguration(bottomNavigationBar.menu)
setupActionBarWithNavController(navigationController, appBarConfiguration)

And also as suggested by @ianhanniballake, you need to have navigation-ui-ktx for this to work.

score 1 · Answer 3 · answered Jan 23 '23 at 22:30

1

//hide back arrow in toolbar inside fragment while using NavigationComponent

    ((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(false);

answered Jan 23 '23 at 22:30

Himanshu HC

47
1
5

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

3 Answers3

//hide back arrow in toolbar inside fragment while using NavigationComponent

Linked