Ask Your Question

Revision history [back]

click to hide/show revision 1
initial version

To configure titles and buttons in the TopAppBar for child screens in Android Jetpack Compose, you can follow these steps:

  1. Create a Composable function for the TopAppBar, and pass in the required parameters such as title and actions.

  2. In the child screen Composable function, call the TopAppBar function passing the required parameters.

  3. Add any additional buttons or menus to the TopAppBar by using the IconButton or DropdownMenu Composables.

Example code for a TopAppBar with a title and a back button:

@Composable
fun MainScreen(navController: NavHostController) {
    Scaffold(
        topBar = { AppBar(title = "Main") }
    ) {
        // Main content here
    }
}

@Composable
fun ChildScreen(navController: NavHostController) {
    Scaffold(
        topBar = {
            AppBar(title = "Child", navigationIcon = {
                IconButton(onClick = { navController.popBackStack() }) {
                    Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                }
            })
        }
    ) {
        // Child content here
    }
}

@Composable
fun AppBar(title: String, navigationIcon: @Composable (() -> Unit)? = null) {
    TopAppBar(
        title = { Text(text = title) },
        navigationIcon = navigationIcon
    )
}