How can we put 2 lazycolumns in the same view with...

# compose

[Elio Maroun]

How can we put 2 lazycolumns in the same view without getting an exception

[efemoney]

I mean, the exception is there for a reason. How about you fix the root cause or share what you’re trying to achieve instead

[myanmarking]

why would you want two lazyColumns? Explain what you want to achieve

[Elio Maroun]

@Composable
fun LocationDetailViewTopBar(modifier: Modifier = Modifier) {
    val navController = LocalNavController.current
    val scrollState = rememberScrollState()
    val listState = rememberLazyListState()
    val EXPANDED_TOP_BAR_HEIGHT = 200.dp
    val COLLAPSED_TOP_BAR_HEIGHT = 56.dp
    val overlapHeightPx = with(LocalDensity.current) {
        EXPANDED_TOP_BAR_HEIGHT.toPx() - COLLAPSED_TOP_BAR_HEIGHT.toPx()
    }

    val isCollapsed: Boolean by remember {
        derivedStateOf {
            val isFirstItemHidden = listState.firstVisibleItemScrollOffset > overlapHeightPx
            isFirstItemHidden || listState.firstVisibleItemIndex > 0
        }
    }


    Box() {
        LocationDetailCollapsedTopBar1(
            modifier = Modifier.zIndex(2f),
            isCollapsed = isCollapsed,
            locationName = "Fahed Supermarket Jounieh"
        )

        Spacer(modifier = Modifier.size(8.dp))

        LazyColumn(
            state = listState,
            modifier = Modifier
                .heightIn( max=216.dp)
                .fillMaxWidth()
        ) {
            item {
                LocationDetailExpandedTopBar()

                Spacer(modifier = Modifier.size(16.dp))
            }
        }

    }

}

[Elio Maroun]

private class LocationDetailTab(val title: String, val content: @Composable () -> Unit)

private val locationTabs = listOf<LocationDetailTab>(
    LocationDetailTab("Location", {}),
    LocationDetailTab("Items", { ItemsList() }),
    LocationDetailTab("Reviews", {})
)

@Composable
fun LocationDetailTabs(modifier: Modifier = Modifier) {
    val selectedTab = rememberSaveable { mutableStateOf(0) }
    TabRow(selectedTabIndex = selectedTab.value,
        containerColor = Color.Transparent,
        divider = {},
        indicator = {
            Box(
                Modifier
                    .tabIndicatorOffset(it[selectedTab.value])
                    .fillMaxWidth()
                    .height(4.dp)
                    .padding(horizontal = 8.dp)
                    .clip(RoundedCornerShape(topEnd = 4.dp, topStart = 4.dp))
                    .background(color = MaterialTheme.colorScheme.primary)
            )
        }) {
        locationTabs.forEachIndexed { i, info ->
            Tab(
                selected = selectedTab.value == i,
                onClick = { selectedTab.value = i },
                selectedContentColor = Color.White,
                unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
            ) { Text(info.title, modifier = Modifier.padding(bottom = 14.dp, top = 18.dp)) }
        }
    }
    Column {
        locationTabs[selectedTab.value].content()
    }
}

[Elio Maroun]

ItemsList is a lazycolumn

[Elio Maroun]

@Composable
fun LocationDetailView() {
    Column(modifier = Modifier.background(Color.Black)) {

        LazyColumn {
            stickyHeader {
                LocationDetailViewTopBar(modifier = Modifier.wrapContentSize())
                Spacer(modifier = Modifier.size(32.dp))
            }
            item {
                LocationDetailTabs(modifier = Modifier.wrapContentHeight())

            }
        }

}

[Elio Maroun]

My aim is to have a collapsable toolbar which on expansion state shows an image and on collapsed shows a basic toolbar,

[Elio Maroun]

with a 3 tab layout one of them contains a lazy column also as a view, to show the items. So if the user scrolls on the items, he will collapse the toolbar...

[Elio Maroun]

Any help?!

[Elio Maroun]

???

[myanmarking]

you can’t. Unless you define a fixed size for the inner one