Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-preview

Can You Expand a DropdownMenu in the Jetpack Compose Preview?


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))
                }
            }
        }
    )
}

Solution

  • 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.