How to handle BottomNavigation Scaffold in MainActivity

Question

I wrote a Jetpack Compose example to learn. I have a login screen and after login I have a bottomnavigation,topbar scaffold. This scaffold's visibility is setting in navigation sealed class like that below

    sealed class KutuphanemNavigationItem(
      val screenRoute: String,
      val showBottomBar: Boolean = false,
      val data: Any? = null,
      @DrawableRes val icon: Int? = null,
      @StringRes val title: Int? = null,
      val showTopBar:Boolean = false,
      @StringRes val pageTitle:Int? = null
    ) {
     object LoginScreen : KutuphanemNavigationItem(screenRoute = 
       "kutuphanem_login_screen")
    object MainScreen : KutuphanemNavigationItem(
        screenRoute = "kutuphanem_main_screen",
        icon = R.drawable.ic_baseline_home_24,
        title = R.string.anasayfaItem,
        showTopBar = true,
        showBottomBar = true,
        pageTitle = R.string.anasayfaItem
    )

    object BookListScreen : KutuphanemNavigationItem(
        screenRoute = "kutuphanem_kitap_list_screen",
        icon = R.drawable.ic_baseline_view_list_24,
        showBottomBar = true,
        title = R.string.listeItem
    )

    object ParameterScreen : KutuphanemNavigationItem(
        screenRoute = "kutuphanem_parameter_screen",
        icon = R.drawable.ic_baseline_settings_24,
        title = R.string.parametreItem,
        showTopBar = true,
        showBottomBar = true,
        pageTitle = R.string.parametreItem
    )

    object ProfileScreen : KutuphanemNavigationItem(
        screenRoute = "kutuphanem_profile_screen",
        icon = R.drawable.ic_baseline_person_24,
        title = R.string.profilimItem,
        showBottomBar = true
    )

    object ParameterYayinEviScreen : KutuphanemNavigationItem(
        screenRoute = "kutuphanem_parameter_yayinevi_screen",
        showTopBar = true,
        pageTitle = R.string.yayinEviLabel
    )
 }

Also I'm setting start destination in MainActivity and Scaffolds are written in MainActivity because app is using one activity like below

     Scaffold(modifier = Modifier.navigationBarsPadding(),
                        scaffoldState = kutuphanemAppState.scaffoldState,
                        floatingActionButton = {
                            if (viewModel.checkTokenExist() && kutuphanemAppState.navController.isBottomNavigationTopBarVisible(
                                    isBottomNavigation = true
                            )) {
                                KutuphanemNavigationBottomFloatingActionButton()
                            }
                        },
                        isFloatingActionButtonDocked = true,
                        floatingActionButtonPosition = FabPosition.Center,
                        topBar = {
                            if (viewModel.checkTokenExist() && kutuphanemAppState.navController.isBottomNavigationTopBarVisible()) {
                                val currentPage: KutuphanemNavigationItem? =
                                    kutuphanemAppState.navController.getCurrentNavigationItem()
                                KutuphanemTopBar(
                                    navController = kutuphanemAppState.navController,
                                    pageTitle = stringResource(
                                        id = currentPage?.pageTitle ?: R.string.anasayfaItem
                                    )
                                )
                            }
                        },
                        bottomBar = {
                            if (viewModel.checkTokenExist() && kutuphanemAppState.navController.isBottomNavigationTopBarVisible(
                                    isBottomNavigation = true
                                )
                            ) {
                                KutuphanemBottomNavigationBar(kutuphanemAppState.navController)
                            }
                        },
                        snackbarHost = {
                            KutuphanemSnackBarHost(state = kutuphanemAppState.kutuphanemSnackbarState)
                        }) {
                        if (viewModel.checkTokenExist()) {
                            KutuphanemNavigation(
                                navController = kutuphanemAppState.navController,
                                startDestinition = KutuphanemNavigationItem.MainScreen,
                                showSnackbar = { message, duration, type ->
                                    kutuphanemAppState.showSnackbar(
                                        message = message,
                                        duration = duration,
                                        type = type
                                    )
                                }
                            )
                        } else {
                            KutuphanemNavigation(
                                navController = kutuphanemAppState.navController,
                                startDestinition = KutuphanemNavigationItem.LoginScreen,
                                showSnackbar = { message, duration, type ->
                                    kutuphanemAppState.showSnackbar(
                                        message = message,
                                        duration = duration,
                                        type = type
                                    )
                                }
                            )
                        }
                    }

If token is not exist , navigating to LoginScreen else navigating to MainScreen. But when I want to navigate to MainScreen from success login , bottom navigation ,topbar and FAB button scaffolds are not showing. When I close the app the open again , they are showing. What is the reason of this case?

score 0 · Answer 1 · answered Jun 18 '22 at 13:51

ViewModel has logic for token check and a state that will be updated by view model and the state will be observed by composable, when state changes the composables will recompose and update the ui base on new state.

data class UiState(
    val tokenExist: Boolean = false
)

class LoginViewModel(
    private val repository: LoginRepository,
    private val savedState: SavedStateHandle
) : ViewModel() {

    var uiState by mutableStateOf(UiState())
        private set

    // Business logic
    fun somethingRelatedToBusinessLogic() { /* ... */ }
}


@Composable
fun LogineScreen(viewModel: LoginViewModel = viewModel()) {

    val uiState = viewModel.uiState
    /* ... */

    ExampleReusableComponent(
        someData = uiState.tokenExist,
        onDoSomething = { viewModel.somethingRelatedToBusinessLogic() }
    )

}

You should read more about state change in jetpack compose

Reference: https://developer.android.com/jetpack/compose/state

I am handling Scaffolds in MainActivity. So I have controlled token existance in MainActivityViewModel. — emreturka, Jun 19 '22 at 16:00

How to handle BottomNavigation Scaffold in MainActivity

1 Answers1