The navigation keys of the device vibrate when opening the Jetpack Compose Dropdown Menu

44 Views Asked by At

When the Dropdown Menu is opened, there is a flicker in the navigation keys. When I create a new application with the same codes, there is no problem, but this flicker occurs in my current application.

While there is no problem in the activities I created before the problem occurred, this flicker occurs in all activities I created after the problem occurs, even if there is no code.

UPDATE: I found that the problem is due to the similarity between the navigationbar and statusbar colors and the dropdownmenu colors. Setting the navigationbar colors manually fixed the problem.

//Update; Manuel set color

val systemUiController = rememberSystemUiController()

SideEffect {
    systemUiController.statusBarDarkContentEnabled = true
    systemUiController.setStatusBarColor(
        color = Color.White
    )
    systemUiController.setNavigationBarColor(
        color = Color.White
    )
}

DrapdownMenu(
            expanded = openDropDownMenu,
            onDismissRequest = {
                openDropDownMenu = false
            }, modifier = Modifier
                .wrapContentHeight()
                .width(150.dp),
            content = {
                optionsList.forEach {
                    DropdownMenuItem(
                        onClick = {
                            it.onClick.invoke()
                            openDropDownMenu = false
                        }, modifier = Modifier.height(50.dp),
                        contentPadding = PaddingValues(start = 10.dp, end = 15.dp)
                    ) {
                        Row(
                            modifier = Modifier
                                .wrapContentSize(),
                            verticalAlignment = Alignment.CenterVertically,
                            horizontalArrangement = Arrangement.Center
                        )
                        {
                            Icon(
                                painter = painterResource(id = it.icon),
                                tint = YappDarkGray,
                                contentDescription = it.name,
                                modifier = Modifier
                                    .size(24f.dp)
                            )

                            Text(
                                text = it.name, fontWeight = FontWeight.Light,
                                textAlign = TextAlign.Start,
                                fontSize = 16.sp, modifier = Modifier
                                    .padding(start = 10.dp)
                                    .wrapContentSize()
                            )
                        }
                    }
                }
            }
        )
0

There are 0 best solutions below