To navigate one screen to another screen we can use navigation like below
1. MainActivity:-
@Composable
fun AppRoute() {
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "MainMenu") {
composable(route = "MainMenu") {
MainMenuScreen(navController)
}
composable (route = AppConstant.POST) {
PostListScreen()
}
composable(route = AppConstant.ALBUM) {
AlbumScreen()
}
composable(route = AppConstant.COMMENT) {
CommentScreen()
}
composable(route = AppConstant.PHOTOS) {
PhotoScreen()
}
}
}
2. MainMenuScreen class
@Composable
fun MainMenuScreen(navController: NavController) {
val mainMenuViewModel: MainMenuViewModel = hiltViewModel()
LazyVerticalGrid(
columns = GridCells.Fixed(2),
contentPadding = PaddingValues(8.dp),
verticalArrangement = Arrangement.SpaceAround,
) {
items(mainMenuViewModel.getMainMenuData()) {
MainMenuItem(menuName = it.menuName, navController)
}
}
}
@Composable
fun MainMenuItem(menuName: String, navController: NavController) {
Box(
modifier = Modifier
.padding(10.dp)
.size(140.dp)
.clip(RoundedCornerShape(8.dp))
.paint(painter = painterResource(id = R.drawable.bg1))
.border(1.dp, Color.LightGray)
.clickable {
navController.navigate(menuName)
},
contentAlignment = Alignment.BottomCenter
) {
Text(
text = menuName,
fontSize = 18.sp,
color = Color.Black,
modifier = Modifier.padding(0.dp, 20.dp),
style = MaterialTheme.typography.bodyMedium
)
}
}3. AppConstantpackage com.example.jetpackcompose2.util
object AppConstant {
const val POST="Post"
const val COMMENT="comments"
const val ALBUM="albums"
const val PHOTOS="photos"
}4. inside hilt module
@Module
@InstallIn(SingletonComponent::class)
class MainMenuModule {
@Singleton
@Provides
fun provideMenu(): List<MainMenuData> {
return listOf(
MainMenuData(AppConstant.POST),
MainMenuData(AppConstant.PHOTOS),
MainMenuData(AppConstant.ALBUM),
MainMenuData(AppConstant.COMMENT)
)
}
}
