That is a part of the Jetpack Compose navigation collection:
This text exhibits the steps that you should do so as to add the underside navigation from this straightforward navigation in Jetpack Compose instance partly 1.
1. Add Icon Vector Asset
On this instance, you are including the ic_home.xml
and ic_search.xml
vector belongings for the display screen navigation tab.
This highlights the steps :
Chances are you’ll get the next compilation error after including these icons. AAPT: error: useful resource attr/colorControlNormal not discovered.
It’s due to the dependency on the androidx.appcompat:appcompat
library, which isn’t required by Jetpack Compose app.
To repair the error, add this library into your appbuild.gradle
file:
dependencies {
implementation 'androidx.appcompat:appcompat:1.4.1'
}
[Updated – Sept 27, 2022]: It appears like this step is pointless as a result of we are able to simply reference
ImageVector
straight from the code utilizingIcons.Default.Residence
. So this dependencyimplementation 'androidx.appcompat:appcompat:1.4.1'
will be eliminated as nicely.
2. Add BottomNavigation() Composable
androidx.compose.materials.BottomNavigation()
composable operate is used to implement the underside bar navigation.
@Composable
enjoyable BottomBarNavigation(navController: NavController) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.vacation spot?.route
if (currentRoute == null || currentRoute == NavRoute.Login.path) {
return
}
BottomNavigation {
}
}
navController.currentBackStackEntryAsState()
is used in order that it could possibly retrigger the composable operate to run when the navigation route is modified.
3. Add BottomNavigationItem() Composable
Within the BottomNavigation(), you add the RowScope.BottomNavigationItem()
for every row navigation tab.
BottomNavigation {
val homeSelected = currentRoute == NavRoute.Residence.path
BottomNavigationItem(
icon = {
Icon(
painter = painterResource(R.drawable.ic_home),
contentDescription = NavRoute.Residence.path
)
},
chosen = homeSelected,
onClick = {
if(!homeSelected) {
navController.navigate(NavRoute.Residence.path) {
popUpTo(NavRoute.Residence.path) { inclusive = true }
}
}
},
label = {Textual content(NavRoute.Residence.path)}
)
}
icon
,chosen
andonClick
are obligatory parameters, the remaining are non-obligatory.
[Updated – Sept 27, 2022]: Since importing icon asset manually is now not wanted (see above part), you change
Icon(
painter = painterResource(R.drawable.ic_home),
contentDescription = NavRoute.Residence.path
)
with
Icon(
imageVector = Icons.Default.Residence,
contentDescription = NavRoute.Residence.path
)
The commit adjustments are right here.
4. Implement Scaffold bottomBar
So as to add BottomBarNavigation()
, you name it from the Scaffold -> bottomBar
parameter as the next:
val navController = rememberNavController()
Scaffold(
bottomBar = { BottomBarNavigation(navController = navController) }
) {
NavGraph(navController)
}
[Updated – Sept 28, 2022]: Whereas engaged on this Easy RSS Feed reader app, I seen that the content material is roofed by this backside bar navigation. To repair that, I used
PaddingValues.calculateBottomPadding()
from theScaffold()
so as to add the underside padding of the content material.
- Use
paddingValues.calculateBottomPadding()
to calculate the required backside bar padding
val navController = rememberNavController()
Scaffold(
bottomBar = { BottomBarNav(navController = navController) }
) { paddingValues ->
NavGraph(
modifier = Modifier.padding(
backside = paddingValues.calculateBottomPadding()),
navController = navController
)
}
- Add
Modifier
parameter intoNavGraph()
andNavHost()
@Composable
enjoyable NavGraph(
modifier: Modifier = Modifier,
navController: NavHostController) {
NavHost(
modifier = modifier,
navController = navController,
startDestination = NavRoute.Login.path
) {
}
}
Supply Code
GitHub Repository: Demo_SimpleNavigationCompose (bottom_nav department)