androidkotlinandroid-jetpack-composeandroid-jetpack-navigationandroid-jetpack-compose-lazy-column

Is there a way to implement a dropdown menu within a topbar?


I am relatively new to Kotlin. Currently I am making a demo for an app, in the demo I have a CenterAlignedTopBar with a title and a navigationIcon. Eventually I want to use the navigationIcon to show a LazyColumn with links to different pages of the app, but I don't know where to start.

I have tried to use parts of an tutorial I followed to learn, tried to put an image in the topbar and searched online for an answer. I couldn't find an answer that was helpful.

Below you can find the code where I want to implement it.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PresentAppAppBar(
    modifier: Modifier = Modifier,
) {
    CenterAlignedTopAppBar(
        title = { Text(stringResource(R.string.app_name)) },
        navigationIcon = {
            Icon(
               imageVector = Icons.Filled.Menu,
               modifier = Modifier
                   .clickable { /* TODO */ }
                   .padding(8.dp)
                   .size(32.dp),
               contentDescription = null
            )
        },
        modifier = modifier
    )
}

Solution

  • I believe this will solve your problem (That is assuming i understand your issue)

    `@OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun AppBar(
    ) {
        var showDropDownMenu by remember { mutableStateOf(false) }
    
        TopAppBar(
            {
                Text(
                    text = "Top Bar Title",
                )
            }, actions = {
    
                IconButton(
                    onClick = { showDropDownMenu = true }) {
                    Icon(Icons.Filled.MoreVert, null)
    
                }
    
                DropdownMenu(
                    showDropDown, { showDropDown = false }
                 // offset = DpOffset((-102).dp, (-64).dp),
                ) {
                    DropdownMenuItem(text = { Text(text = "Drop down item") }, leadingIcon = {
                        Icon(
                            Icons.Filled.Home
                            )
                    }, onClick = {
                        showDropDown = false
                    })
                }
            }
    
        )
    
    }
    `