CODEWITHSUNDEEP
androidandroid-studiokotlinandroid-jetpack-compose
a.hess
a.hess

Reputation: 537

Jetpack Compose: "Unresolved reference: BottomNavigation"

My MainActivity looks this way:

class MainActivity : ComponentActivity() {
@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        BottomNavTheme {
            Scaffold(bottomBar = {
                BottomNavigation(
                    backgroundColor = colorResource(id = R.color.teal_200),
                    contentColor = Color.Black
                ) {

                }
            }) {
                
            }
        }
    }
}

}

The code should be alright, I guess. But it results in an "Unresolved reference:"-error

error-message

I have implemented that functionality in the past already. It wasn't that hard to do.

What goes wrong here? How can the issue become fixed?

Have there been changes? I'm using the very new Android Studio Flamingo.

Upvotes: 14

Views: 7546

Answers (3)

Canturk Karabulut
Canturk Karabulut

Reputation: 136

You can currently use the BottomAppBar. This is the current one. You can currently use the bottomappbar. This is the current one. I wrote a bottom navigation currently, I will be adding its codes

  override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FoodAppWithComposeTheme {
                BottomBarAnimationApp()
            }
        }
    }

    @Composable
    fun BottomBarAnimationApp() {
        val bottomBarState = rememberSaveable { (mutableStateOf(true)) }
        val navController = rememberNavController()
        val navBackStackEntry by navController.currentBackStackEntryAsState()

        when (navBackStackEntry?.destination?.route) {
            ScreenState.CategoryBottomItem.route -> {
                // Show BottomBar
                bottomBarState.value = true
            }

            ScreenState.HomeBottomItem.route -> {
                bottomBarState.value = true
            }

            ScreenState.CategorySearchItem.route -> {
                bottomBarState.value = true
            }

            else -> {
                bottomBarState.value = false
                //Else branch is working other states
                //"car_details" -> {
                //                // Hide BottomBar
                //                bottomBarState.value = false
                //            }
            }
        }
        Scaffold(
            bottomBar = {
                BottomBar(
                    navController = navController,
                    bottomBarState = bottomBarState
                )
            },
            content = {
                SetupNavGraph(navHostController = navController)
            })

    }

    @Composable
    fun BottomBar(navController: NavController, bottomBarState: MutableState<Boolean>) {
        val items = listOf(
            BottomBarScreen.Home,
            BottomBarScreen.Category,
            BottomBarScreen.Search,
        )
        AnimatedVisibility(visible = bottomBarState.value,
            enter = slideInVertically(initialOffsetY = { it }),
            exit = slideOutVertically(targetOffsetY = { it }),
            content = {
                BottomAppBar {
                    val navBackStackEntry by navController.currentBackStackEntryAsState()
                    val currentRoute = navBackStackEntry?.destination?.route

                    items.forEach {
                        NavigationBarItem(
                            selected = currentRoute == it.route,
                            onClick = { navController.navigate(it.route) },
                            icon = {
                                Icon(
                                    painter = painterResource(id = it.icon),
                                    contentDescription = it.title
                                )
                            },
                            label = { Text(text = it.title) },
                        )
                    }
                }
            })
    }
Bottom Navigation State

sealed class BottomBarScreen(
    val route:String,
    val title:String,
    val icon:Int
){
    object Home : BottomBarScreen(
        route = ScreenState.HomeBottomItem.route,
        title = "Home",
        icon = R.drawable.baseline_home_24
    )
    object Category : BottomBarScreen(
        route = ScreenState.CategoryBottomItem.route,
        title = "Category",
        icon = R.drawable.baseline_category_24
    )
    object Search : BottomBarScreen(
        route = ScreenState.CategorySearchItem.route,
        title = "Search",
        icon = R.drawable.baseline_search_24
    )
}

Upvotes: 2

elias sharafi
elias sharafi

Reputation: 389

Renamed to NavigationBar in m3.

For more information about the changes in the new version of the material, refer to the following link:

Migrate from Material 2 to Material 3 in Compose

Upvotes: 16

Mikhail Guliaev
Mikhail Guliaev

Reputation: 1648

Make sure that:

  1. You added this dependency in your app module's build.gradle file:

    implementation "androidx.compose.material:material:1.4.2"

  2. You imported androidx.compose.material.BottomNavigation in your MainActivity.kt file.

If you did all these steps below, the error has to be disappeared. If it is not, try to invalidate caches and restart Android Studio:

File -> Invalidate caches -> [Mark all options such as clear file system cache etc.] -> Invalidate & Restart

Upvotes: 13

Related Questions