Bottom Navigation - Make one of the items open a BottomSheet

2.1k views Asked by At

I just want to have my "More" menu point open a BottomSheet:

enter image description here

enter image description here


I'm using the new Android navigation component with a navigation graph, but I can't figure out where I could override the behavior.

My menu.xml looks like this:

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

    <item
        android:id="@+id/navigation_home_screen"
        android:icon="@drawable/ic_add_white_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_sas"
        android:icon="@drawable/ic_check_white_24dp"
        android:title="@string/title_activity_sa" />

    <item
        android:id="@+id/navigation_profile"
        android:icon="@drawable/ic_close_white_24dp"
        android:title="@string/title_profile" />

    <item
        android:id="@+id/navigation_more_menu"
        android:icon="@drawable/ic_more_horiz_24"
        android:title="@string/title_more_menu" />
</menu>

My nav-graph:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mobile_navigation"
    app:startDestination="@id/navigation_home_screen">

    <fragment
        android:id="@+id/navigation_home_screen"
        android:name="com.dev.solidmind.ui.HomeScreenFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home_screen" />

    <fragment
        android:id="@+id/navigation_sas"
        android:name="com.dev.solidmind.ui.SA_Fragment"
        android:label="@string/title_activity_sa"
        tools:layout="@layout/fragment_sa" />

    <fragment
        android:id="@+id/navigation_profile"
        android:name="com.dev.solidmind.ui.ProfileFragment"
        android:label="@string/title_profile"
        tools:layout="@layout/fragment_profile" />

    <dialog
        android:id="@+id/navigation_more_menu"
        android:label="@string/title_more_menu" />
</navigation>

As you can see I tried adding the more menu BottomSheet as a dialog or some other item, but nothing works.

I added everything in the set-up methods for the navigation component and thought I could override the behavior in the addOnDestinationChangedListener, but it throws an error because it tries to navigate to that menu point:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        BottomNavigationView bottomNavView = findViewById(R.id.nav_view);
        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home_screen, R.id.navigation_sas, R.id.navigation_profile, R.id.navigation_more_menu)
                .build();
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
        NavigationUI.setupWithNavController(bottomNavView, navController);

        navController.addOnDestinationChangedListener((controller, destination, arguments) -> {
            if (destination.getId() == R.id.navigation_home_screen) {
                Objects.requireNonNull(getSupportActionBar()).hide();
            } else if (destination.getId() == R.id.navigation_more_menu) {
                openBottomSheet();
            } else {
                Objects.requireNonNull(getSupportActionBar()).show();
            }
        });
    }

openBottomSheet method:

public void openBottomSheet() {
        View dialogView = getLayoutInflater().inflate(R.layout.main_bottom_sheet_menu, findViewById(R.id.main_root_layout), false);
        BottomSheetDialog dialog = new BottomSheetDialog(this);

        if (paidContentUnlocked)
            adaptBottomSheetToPaidStatus(dialogView);

        dialog.setContentView(dialogView);
        dialog.show();
    }

Can I prevent the navigation and only open my menu instead?
Without having to go back to manually managing Fragments with transactions etc...

1

There are 1 answers

0
Biscuit On

I've been able to do by simply surrounding my <fragment> tag with a CoordinatorLayout just like below

activity_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <fragment
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_menu"
        app:labelVisibilityMode="labeled"
        />
</LinearLayout>

MyBottomSheet

class BottomSheetFragment: BottomSheetDialogFragment(), View.OnClickListener {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog = BottomSheetDialog(requireContext(), theme)

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_bottom_sheet, container, false)
    }
}

OR the Answer of @Naveen Rao

findViewById(R.id.nav_bottom_view).setOnNavigationItemSelectedListener {
    // This is to avoid going to startDestination of opening of the BottomSheet
    navController.navigate(it.itemId)
    true
}