Reputation: 537
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
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
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
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
Reputation: 1648
Make sure that:
You added this dependency in your app module's build.gradle
file:
implementation "androidx.compose.material:material:1.4.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