Complex custom toolbar in jetpack compose with custom height

1.1k Views Asked by At

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)
        }
    }
0

There are 0 best solutions below