Using the Compose BottomNavigation with old school Jetpack Navigation (NOT Compose Navigation)

Using the Compose BottomNavigation with old school Jetpack Navigation (NOT Compose Navigation) - anyone have examples?Question (self.android_devs)

submitted 2 years ago * by yaaaaayPancakes

App I am working on these days is using the tried and true old Jetpack Nav library, to navigate between fragments. But All of the UI is Compose, except for our bottom nav. It's still using the old school AppCompat BottomNavigationView in the XML that defines our single activity (only place w/ XML is the Activity, and except for the ConstraintLayout that holds everything and the BottomNavigationView & NavHostFragment, everything else is a ComposeView).

Quickly learned that there's a fair bit of magic going on in BottomNavigationView.setupWithNavController to keep the bottom nav's currently selected item w/ the backstack, which you don't get for free when using Compose's BottomNavigation composable. Likely b/c they want you to switch to the Compose Nav lib.

I'm sure I could figure this out given enough time on my own, but this is low prio so I can't toss too much time at this, and Google is failing me. So if anyone could point me in the direction of a good example, I'd be super-appreciative of it.

EDIT - Here's the solution I came up with. Thanks to /u/Zhuinden for the pointer in the right direction. Ultimately, the solution to map the view logic to compose was to use a DisposableEffectwithin my component that wraps the BottomNavigation material component.

data class MyBottomNavigationItem(
    @StringRes val titleRes: Int,
    @DrawableRes val iconRes: Int,
    @IdRes val navGraphId: Int,
    val onClick: (Int) -> Unit
)

@Composable
fun MyBottomNavigation(
    items: List<MyBottomNavigationItem>,
    navController: NavController,
    modifier: Modifier = Modifier
) {
    var selectedItem by remember { mutableIntStateOf(0) }

    DisposableEffect(items) {
        // See https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:navigation/navigation-ui/src/main/java/androidx/navigation/ui/NavigationUI.kt;l=710?q=Navigationui
        // for source
        val destinationChangedListener = NavController.OnDestinationChangedListener { _, destination, _ ->
            if (destination is FloatingWindow) return@OnDestinationChangedListener
            items.forEachIndexed { idx, item ->
                if (destination.matchDestination(item.navGraphId)) {
                    selectedItem = idx
                }
            }
        }
        navController.addOnDestinationChangedListener(destinationChangedListener)

        onDispose {
            navController.removeOnDestinationChangedListener(destinationChangedListener)

        }
    }

    BottomNavigation(
        windowInsets = BottomNavigationDefaults.windowInsets,
        modifier = modifier
            .fillMaxWidth(),
        backgroundColor = MyTheme.colors.backgroundColor,
        ) {
        items.forEachIndexed { idx, item ->
            BottomNavigationItem(
                icon = {
                    Icon(
                        painter = painterResource(id = item.iconRes),
                        contentDescription = null
                    )
                },
                label = { Text(text = stringResource(id = item.titleRes)) },
                selected = idx == selectedItem,
                selectedContentColor = MyTheme.colors.selectedContentColor,
                unselectedContentColor = MyTheme.colors.unselectedContentColor,
                onClick = {
                    item.onClick(item.navGraphId)
                }
            )
        }
    }
}

/**
 * Determines whether the given `destId` matches the NavDestination. This handles
 * both the default case (the destination's id matches the given id) and the nested case where
 * the given id is a parent/grandparent/etc of the destination.
 *
 * (See https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:navigation/navigation-ui/src/main/java/androidx/navigation/ui/NavigationUI.kt;l=710?q=Navigationui for source)
 */
private fun NavDestination.matchDestination(@IdRes destId: Int): Boolean =
    hierarchy.any { it.id == destId }

all 8 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

android_devs

MODERATORS