I have the following composable function that creates a TopAppBar
. The preview shows the bar just fine, but can I get the menu to expand in the preview as well?
@Composable
@Preview
fun AppBarTop(refreshOnClickHandler: (() -> Unit)? = null) {
var showMenu by remember { mutableStateOf(false) }
TopAppBar(
elevation = 10.dp,
title = {
Text(stringResource(R.string.app_name))
},
actions = {
IconButton(onClick = { /* //TODO Make this */ }) {
Icon(
Icons.Filled.Search,
contentDescription = stringResource(R.string.content_desc_search_icon)
)
}
IconButton(onClick = { showMenu = !showMenu }) {
Icon(
Icons.Filled.MoreVert,
contentDescription = stringResource(R.string.content_desc_menu_icon)
)
}
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false }
) {
DropdownMenuItem(onClick = { /*TODO*/ }) {
Text(stringResource(R.string.action_refresh))
}
DropdownMenuItem(onClick = { /*TODO*/ }) {
Text(stringResource(R.string.action_settings))
}
}
}
)
}
Figured it out. Interactive preview is an experimental feature, so you have to enable it in the Android Studio settings first.
File -> Settings -> Experimental
then check the box next to Enable interactive and animation preview tools
.
After doing that, the interactive preview button will appear just above the preview of your component.