How do I load detail content when row/ column is clicked

Edwin 0
Viewed 24

I'm practicing Jetpack Compose, I'm trying to create a screen that load texts and image content when navigated to.

Here's what I mean;

Android Developers Soothe App Home Image

[Referencing the android developer soothe app.] If I make the rows clickable. And I want to navigate to a screen containing details of Inversions, quick yoga or stretching, depending on which is clicked.

What compose navigation feature should I use to create it??

I did a bit of research previously but I haven't been able to find what I need.

Just in case it's needed, I'll add these.

my compose navigation version;

    def nav_version = "2.5.2"

    implementation "androidx.navigation:navigation-compose:$nav_version"

I'll be sinerely greatful for any help. Thanks in advance.

jetpack-compose-navigation android-jetpack navigation android-jetpack-compose kotlin
1 Answers

If I understood you correctly, you want to navigate to a seperate screen when you click one of the items inside the Horizontal LazyRow. In order to do this you will need to implement navigation using compose navigation library: https://developer.android.com/jetpack/compose/navigation and you will need to add an onClick event for each item in that LazyRow. For this you would need to set up a NavController, Navhost and Routes for each item.

I have set up something similar but with a navigation Drawer, maybe it will help you understand how the navigation works in jetpack compose! Navigating between composable's using a Navigation Drawer in Jetpack Compose

Hope this will help you!

Josef M0
Related