Hi guys, I want to implement the screen-like scree...

# android

[Bharath Kandula]

Hi guys, I want to implement the screen-like screen recording in jetpack compose. Below scrolling only applies to the lazy column lists only.

Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(BackgroundPrimary)
    ) {
        CustomAppBar() {
            navController.popBackStack()
        }
        Divider(thickness = 1.dp, color = BorderPrimary)
        Spacer(modifier = Modifier.height(Spacing20))
        Column(
            modifier = Modifier.wrapContentHeight().fillMaxWidth()
           
        ) {
            Row(
                modifier = Modifier
                    .padding(horizontal = 40.dp, vertical = 20.sp)
                    .fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Spacer(modifier = Modifier.width(30.dp))
                Column {
                    Text(
                        text = viewModel.getSelectedContact().name ?: "",
                        modifier = Modifier.padding(vertical = 2.dp),
                        color = ContentPrimary
                    )
                    Text(
                        text = "${viewModel.getSelectedOperator().name} ${viewModel.getSelectedCircle().name}",
                        color = ContentSecondary
                    )
                    Text(
                        text = viewModel.getSelectedContact().mobileNumber ?: "",
                        color = ContentSecondary
                    )
                }
                Spacer(modifier = Modifier.weight(1f))
                Text(
                    text = "Change",
                    color = ContentBrand,
                    modifier = Modifier.clickable(onClick = {
                        navController.navigate(BillPayNavigationScreens.ConfirmCircleOperator.route)
                    })
                )
                Spacer(modifier = Modifier.width(30.dp))
            }
            PreSearchViewForPlanScreen()
         
            val pagerState = rememberPagerState()

          

            Tabs(tabs = tabs, pagerState = pagerState)
            PlansContentScreen(tabs = tabs, pagerState = pagerState, viewModel,navController)
        }
    }

@Composable
fun PlansContentScreen(plans: List<PlanInfoData>, navController: NavHostController) {
    LazyColumn(modifier = Modifier.padding(vertical = 10.dp, horizontal = 40.dp).fillMaxHeight()) {
        items(items = plans) { plan ->
            UI(plan, navController)
            Spacer(modifier = Modifier.height(30.dp))
        }
    }
}

Can anyone suggest the scrolling approach? The search is sticky and lazy column scroll.
Thanks, advance.

Record_2022-09-24-18-31-22.mkv.mp4

[Amit]

I'm also interested in knowing the solution for this. You may get a better response for this if you ask in the #compose channel. Do you mind posting this there as well?

[Bharath Kandula]

Sure @Amit, I will post there as well.
Thanks for the suggestion.