Android Jetpack Compose BottomNavigationBar

Activity

import android.os.Bundleimport androidx.activity.ComponentActivityimport androidx.activity.compose.setContentimport androidx.compose.material.*import androidx.compose.material.icons.Iconsimport androidx.compose.material.icons.filled.AccountCircleimport androidx.compose.material.icons.filled.Homeimport androidx.compose.material.icons.filled.Listimport androidx.compose.runtime.Composableimport androidx.compose.runtime.getValueimport androidx.compose.runtime.mutableStateOfimport androidx.compose.runtime.saveable.rememberSaveableimport androidx.compose.runtime.setValueimport androidx.compose.ui.graphics.vector.ImageVectorimport com.luasoftware.journey.ui.theme.JourneyThemeclass MainActivity : ComponentActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContent {            JourneyApp()        }    }}

Screens / Routes

// you can also use sealed class instead of enumenum class JourneyScreen(    val icon: ImageVector,    label: String? = null,    val body: @Composable ((String) -> Unit) -> Unit) {    Home(        icon = Icons.Filled.Home,        body = { HomeScreen() }    ),    Collections(        icon = Icons.Filled.List,        body = { CollectionsScreen() }    ),    UserProfile(        icon = Icons.Filled.AccountCircle,        label = "Profile",        body = { UserProfileScreen() }    );    val label: String by lazy { label ?: name }    @Composable    fun content(onScreenChange: (String) -> Unit) {        body(onScreenChange)    }}@Composablefun HomeScreen() {    Text(text = "Home")}@Composablefun CollectionsScreen() {    Text(text = "Collections")}@Composablefun UserProfileScreen() {    Text(text = "Profile")}

Main Composable

@Composablefun JourneyApp() {    JourneyTheme {        val screens = JourneyScreen.values().toList()        // remember current screen + survive configuration change        var currentScreen by rememberSaveable { mutableStateOf(JourneyScreen.Home) }        Scaffold(            bottomBar = {                BottomNavigation {                    screens.forEach { screen ->                        BottomNavigationItem(                            icon = { Icon(imageVector = screen.icon, contentDescription = screen.label) },                            label = { Text(screen.label) },                            selected = currentScreen == screen,                            onClick = { currentScreen = screen }                        )                    }                }            }        ) { innerPadding ->            Box(modifier = Modifier.padding(innerPadding)) {                currentScreen.content(                    onScreenChange = { screenName ->                        currentScreen = JourneyScreen.valueOf(screenName)                    }                )            }        }    }}

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.