I want to be able to move between a user's stories when touching on the right/left. And when swiping, move to the next/prev users' stories. How's this implemented?

Now, swiping moves between a single user's list of stories and to the next/prev user when the current user's story list is completed.

What I want:

1. Touch right/left should move to the next/prev story, after end of story list, move to next/prev user.

2. Swiping should move to the next/prev user.

   fun StoriesDetail(userId: Long, storiesViewModel: StoriesViewModel, navController: NavHostController) { LaunchedEffect(Unit) { storiesViewModel.startStorySession() }

   // users list userid, userName,.. val storySessionUserList by storiesViewModel.storySessionUsers.collectAsState() val storySessionStoriesMap by storiesViewModel.userStoriesMap.collectAsState()

   val userPagerState = rememberPagerState(
       initialPage = storySessionUserList.indexOfFirst { it.userId == userId }.coerceAtLeast(0),
       pageCount = { storySessionUserList.size }
   )
   
   
   HorizontalPager(
       state = userPagerState
   ){
       userIndex ->
       val user = storySessionUserList[userIndex]
       //storylist
       val stories = storySessionStoriesMap[user.userId] ?: emptyList()
   
   
       val storyPagerState = rememberPagerState(
           initialPage = stories.indexOfFirst {story->
               !story.viewed
           }.coerceAtLeast(0),
           pageCount = { stories.size }
       )
   
   
   
       // TODO Update viewed status of every settled page story
       LaunchedEffect(storyPagerState.settledPage){
               val story = stories.getOrNull(storyPagerState.settledPage)
               if (story != null && !story.viewed) {
                   storiesViewModel.markStoryAsViewed(storyId = story.storyId)
               }
       }
   
       Scaffold(
           topBar = { StoriesTopBar(user.userName, storyPagerState.pageCount, storyPagerState.currentPage){navController.navigateUp() } },
           bottomBar = { StoryDetailBottomBar() }
       ) {
           HorizontalPager(
               state = storyPagerState,
               modifier = Modifier.fillMaxSize(),
               beyondViewportPageCount = 3
           ) {
               storyIndex->
               val currentStory = if (stories.isNotEmpty()) stories[storyIndex] else null
               Column(
                   modifier = Modifier
                       .fillMaxSize()
                       .padding(it)
                       .padding(horizontal = 16.dp)
                       //                .padding(bottom = 16.dp)
                       .verticalScroll(rememberScrollState()),
                   horizontalAlignment = Alignment.CenterHorizontally,
                   verticalArrangement = Arrangement.Center
               ) {
                   Divider(thickness = 2.dp, color = colorResource(id = R.color.orange_A200))
                   if(currentStory==null) {
   
                       Column(
                           modifier = Modifier
                               .padding(50.dp)
                               .align(Alignment.CenterHorizontally),
                           verticalArrangement = Arrangement.Center
                       ) {
                           CircularProgressIndicator()
                       }
   
                   }
                   else{
                       Text(
                           modifier = Modifier.padding(vertical = 24.dp, horizontal = 8.dp),
                           text = currentStory.storyDetails,
                           style = TextStyle(fontSize = 18.sp),
                           textAlign = TextAlign.Left,
                           lineHeight = 28.sp
                       )
                   }
                   Divider(thickness = 2.dp, color = colorResource(id = R.color.orange_A200))
   
               }
           }
       }
   }
   

   }

I want to be able to move between a user's stories when touching on the right/left. And when swiping, move to the next/prev users' stories. How's this implemented?

Now, swiping moves between a single user's list of stories and to the next/prev user when the current user's story list is completed.

What I want:

1. Touch right/left should move to the next/prev story, after end of story list, move to next/prev user.

2. Swiping should move to the next/prev user.

   fun StoriesDetail(userId: Long, storiesViewModel: StoriesViewModel, navController: NavHostController) { LaunchedEffect(Unit) { storiesViewModel.startStorySession() }

   // users list userid, userName,.. val storySessionUserList by storiesViewModel.storySessionUsers.collectAsState() val storySessionStoriesMap by storiesViewModel.userStoriesMap.collectAsState()

   val userPagerState = rememberPagerState(
       initialPage = storySessionUserList.indexOfFirst { it.userId == userId }.coerceAtLeast(0),
       pageCount = { storySessionUserList.size }
   )
   
   
   HorizontalPager(
       state = userPagerState
   ){
       userIndex ->
       val user = storySessionUserList[userIndex]
       //storylist
       val stories = storySessionStoriesMap[user.userId] ?: emptyList()
   
   
       val storyPagerState = rememberPagerState(
           initialPage = stories.indexOfFirst {story->
               !story.viewed
           }.coerceAtLeast(0),
           pageCount = { stories.size }
       )
   
   
   
       // TODO Update viewed status of every settled page story
       LaunchedEffect(storyPagerState.settledPage){
               val story = stories.getOrNull(storyPagerState.settledPage)
               if (story != null && !story.viewed) {
                   storiesViewModel.markStoryAsViewed(storyId = story.storyId)
               }
       }
   
       Scaffold(
           topBar = { StoriesTopBar(user.userName, storyPagerState.pageCount, storyPagerState.currentPage){navController.navigateUp() } },
           bottomBar = { StoryDetailBottomBar() }
       ) {
           HorizontalPager(
               state = storyPagerState,
               modifier = Modifier.fillMaxSize(),
               beyondViewportPageCount = 3
           ) {
               storyIndex->
               val currentStory = if (stories.isNotEmpty()) stories[storyIndex] else null
               Column(
                   modifier = Modifier
                       .fillMaxSize()
                       .padding(it)
                       .padding(horizontal = 16.dp)
                       //                .padding(bottom = 16.dp)
                       .verticalScroll(rememberScrollState()),
                   horizontalAlignment = Alignment.CenterHorizontally,
                   verticalArrangement = Arrangement.Center
               ) {
                   Divider(thickness = 2.dp, color = colorResource(id = R.color.orange_A200))
                   if(currentStory==null) {
   
                       Column(
                           modifier = Modifier
                               .padding(50.dp)
                               .align(Alignment.CenterHorizontally),
                           verticalArrangement = Arrangement.Center
                       ) {
                           CircularProgressIndicator()
                       }
   
                   }
                   else{
                       Text(
                           modifier = Modifier.padding(vertical = 24.dp, horizontal = 8.dp),
                           text = currentStory.storyDetails,
                           style = TextStyle(fontSize = 18.sp),
                           textAlign = TextAlign.Left,
                           lineHeight = 28.sp
                       )
                   }
                   Divider(thickness = 2.dp, color = colorResource(id = R.color.orange_A200))
   
               }
           }
       }
   }
   

   }

• android-jetpack-compose
• horizontal-pager

• Please edit the question to provide a minimal reproducible example of the code you have so far. – tyg Commented Mar 6 at 11:16
• @tyg I have now included the code. – jitkgstd Commented Mar 9 at 22:01

1 Answer 1

You can implement a gesture-based system in Jetpack Compose where:

• Swiping (left or right) moves between users' stories.

• Tapping moves between a user's individual stories.

You can refer this gist for that https://gist.github/Nirav186/fcb31ba129f837db1d80eb249c7097ad

and let me know if you want any more modifications