0

In scaffold the Top app bar height is fixed(by material ui) and it is only scrolling "Toolbar" section, but I want to scroll "Profile Detail Section" as well. Is there any solution or workaround for this? People of stackoverflow please help me. I have thought of using nesting scroll but compose does not support it.

Please see image for reference. I want scroll behaviour as shown in image.

    val pagerState = rememberPagerState()
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            Column(
                modifier = Modifier
                    .scrollable(rememberScrollState(), Orientation.Vertical)
            ) {
                CenterAlignedTopAppBar(
                    title = {
                        MyToolBar()
                    },
                    colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.White),
                    scrollBehavior = scrollBehavior,
                    modifier = Modifier.padding(0.dp),
                )
                ProfileDetailSection(businessData)
            }
        }
    ) {
        Column(
            modifier = Modifier
                .padding(it)
                .fillMaxWidth()
                .background(White)
        ) {
            TabLayout(pagerState)
            Divider(color = GreyRevampFour, thickness = 1.dp)
            //Lazy columns in different tabs
            TabContent(pagerState = pagerState)
        }
    }
Ansab
  • 11
  • 3
  • It's called a collapsing toolbar. I would suggest you to have a look here: https://stackoverflow.com/questions/67227755/jetpack-compose-collapsing-toolbar and here: https://github.com/android/compose-samples/tree/main/Jetsnack – Eliza Camber Aug 02 '23 at 12:00
  • Thanks @ElizaCamber but all those toolbars have a fixed height and in my case height is variable. Is there any solution for that? – Ansab Aug 03 '23 at 12:07
  • By using Intrinsics measurements to measure the height of your composable before drawing. https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements – Eliza Camber Aug 08 '23 at 13:25

0 Answers0