I have a Settings screen which shows list of setti...

# compose

[ms]

I have a Settings screen which shows list of settings item and under each item there will be more settings which shows/hides on parent click
but Compose doesn't allow to use NestedScrollable inside Column or LazyColumn
code in 🧵

[ms]

LazyColumn(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
) {
    items(count = 17) { index ->
        ShowContent(text = "Index $index")
    }
}


@ExperimentalFoundationApi
@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun ShowContent(text: String) {
    var showContent by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { showContent = !showContent }
            .padding(horizontal = 12.dp, vertical = 8.dp),
    ) {
        Column {
            Text(
                text = text,
                style = TextStyle(color = MaterialTheme.colors.onBackground),
            )
            AnimatedVisibility(
                visible = showContent,
                modifier = Modifier.padding(vertical = 8.dp),
            ) {
                LazyVerticalGrid(
                    cells = GridCells.Fixed(2),
                    modifier = Modifier.wrapContentHeight(),
                ) {
                    items(count = 4) { index ->
                        Text(
                            text = "Grid $index",
                            style = TextStyle(color = MaterialTheme.colors.onBackground),
                        )
                    }
                }
            }
        }
    }
}

[Colton Idle]

I would make the top most column a lazy column filled with a list of Settings all in a collapsed state, and then inside of Settings composable you pass in the sub-settings, and on click of settings you use AnimatedContent to expand and show the subsettings.

[Colton Idle]

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SettingsTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val list = listOf(
                        SettingsWithSubSettings(
                            "Setting 1",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                        SettingsWithSubSettings(
                            "Setting 2",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                        SettingsWithSubSettings(
                            "Setting 3",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                        SettingsWithSubSettings(
                            "Setting 4",
                            listOf("SubSetting 1", "SubSetting 2", "SubSetting 3")
                        ),
                    )
                    LazyColumn(Modifier.fillMaxSize()) {
                        items(list) {
                            Setting(settingName = it.settingName, subSettings = it.subSettingList)
                        }
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun Setting(settingName: String, subSettings: List<String>) {
    var visible by remember { mutableStateOf(false) }
    Text(text = settingName, modifier = Modifier.clickable { visible = !visible })
    AnimatedVisibility(visible = visible) {
        Column() {
            subSettings.forEach {
                Text(text = it)
            }
        }
    }
}

data class SettingsWithSubSettings(val settingName: String, val subSettingList: List<String>)

Produces an output like this

6_f.mp4

[Colton Idle]

I think Andrey Kulikov [G] has basically said that you can't have an inifinite height container inside of an inifinite height container.

LazyColumn is infinitely height, and so I don't think it can hold other scrollable containers? I'm no expert though. Maybe he can chime in.

[Abhishek Dewan]

yea it won't work that ways. You might want to have a lazycolumn with composable that can toggle between expanded and non expanded states.

[ms]

yes, it makes no sense to have an infinite height column inside an infinite one
but the problem is LazyVerticalGrid takes infinite height

[ms]

maybe I'll try to layout manually instead of using LazyVerticalGrid that might work

[Abhishek Dewan]

i’ve found lazy vertical grid too limiting for my use cases and also too unpredictable

[Abhishek Dewan]

so I’ve preferred to handroll mine

[Andrey Kulikov]

@Abhishek Dewan we are planning to finialize and stabilze the api shape of LazyVerticalGrid for 1.1 so any feedback about missed functionality will be useful! please file a bug with your input