Exploring Jetpack Compose: TopAppBar

  • title — the title to be displayed within the app bar. This is required
  • color — the color to be used for the background of the toolbar. Optional, if not provided then the themes primary color will be used.
  • navigationIcon — the icon to be displayed at the start of the app bar
@Composable
fun TopAppBar(
title: @Composable() () -> Unit,
color: Color = MaterialTheme.colors().primary,
navigationIcon: @Composable() (() -> Unit)? = null
)
TopAppBar(
title = { Text(text = "AppBar") }
)
TopAppBar(
title = {
Row(children = {
Text(text = "AppBar")
Text(text = " With another child")
})
}
)
TopAppBar(
title = { Text(text = "AppBar") },
color = Color.White
)
TopAppBar(
title = { Text(text = "AppBar") },
color = Color.White,
navigationIcon = {
AppBarIcon(
icon = imageResource(
id = R.drawable.ic_menu_black_24dp)
) {
// Open nav drawer
}
}
)
Container(width = ActionIconDiameter, height = ActionIconDiameter) {
Ripple(bounded = false) {
Clickable(onClick = onClick) {
SimpleImage(icon)
}
}
}
@Composable
fun <T> TopAppBar(
title: @Composable() () -> Unit,
actionData: List<T>,
color: Color = MaterialTheme.colors().primary,
navigationIcon: @Composable() (() -> Unit)? = null,
action: @Composable() (T) -> Unit
// TODO: support overflow menu
here with the remainder of the list
)
sealed class MenuAction(
@StringRes val label: Int,
@DrawableRes val icon: Int) {

object Share : MenuAction(R.string.share, R.drawable.ic_share)
}
TopAppBar<MenuAction>(
title = { Text(text = "AppBar") },
color = Color.White,
navigationIcon = {
AppBarIcon(icon = imageResource(
id = R.drawable.ic_menu_black_24dp)) {
// Open nav drawer
}
}
)
TopAppBar<MenuAction>(
title = { Text(text = "AppBar") },
color = Color.White,
navigationIcon = {
AppBarIcon(icon = imageResource(
id = R.drawable.ic_menu_black_24dp)) {
// Open nav drawer
}
},
actionData = listOf(MenuAction.Save)
)
TopAppBar<MenuAction>(
title = { Text(text = "AppBar") },
color = Color.White,
navigationIcon = {
AppBarIcon(icon = imageResource(
id = R.drawable.ic_menu_black_24dp)) {
// Open nav drawer
}
},
actionData = listOf(MenuAction.Save),
action = { menuAction ->
AppBarIcon(icon = imageResource(
id = menuAction.icon)) {
// Handle action click
}
}
)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Joe Birch

Android @ Buffer, Google Developer Expert for Android. Passionate about mobile development and learning. www.joebirch.co