Jetpack compose - lazycolumn fillMaxHeight modifier hides widgets below, but not destroying widgets above

Question

I'm trying to build a simple chat screen, with a header, a footer (text field) and the messages part which is a lazycolumn. I've seen many people using such methods like the ones below: (fill parent max height, size etc.)

https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyItemScope

All I can put in lazycolumn modifiers is fillMaxHeight, width or size, if I use fillMaxHeight, it destroys the footer, if I don't use anything, the lazycolumn expands until the bottom of the screen, so it does the same behaviour. What am I doing wrong? Why does it behave like this? I can't put images because I don't have enough reputation...

Here is the full code:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface() {
                Column(Modifier.background(Color.Green)) {
                    ProfileCard("Kate", "Available")
                    Conversation(messages = SampleData.conversationSample)
                    SimpleTextField()
                }
            }

        }
    }
}

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn(
        modifier = Modifier
            .background(color = MainBg).fillMaxHeight(),
        reverseLayout = true,
    ) {
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

@Composable
fun MessageCard(message: Message) {
    var isExpanded by remember { mutableStateOf(false) }

    Column() {
        Text(
            text = message.message,
            color = com.boradincer.hellojetpack.ui.theme.PrimaryText,
            modifier = Modifier
                .padding(vertical = 4.dp, horizontal = 16.dp)
                .clip(RoundedCornerShape(4.dp))
                .background(color = LightBg)
                .clickable { isExpanded = !isExpanded }
                .padding(horizontal = 8.dp, vertical = 5.dp),
            maxLines = if (isExpanded) Int.MAX_VALUE else 2
        )
    }
}

Scuba

Apply Modifier.weight(1f) to the LazyColumn – Garrek

Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example. – Epact

@VikramParimi Sorry, I removed the unnecessary parts. – Scuba

Answer 1

Apply Modifier.weight(1f) to the LazyColumn

Column(){
    Header()

    LazyColumn(Modifier.weight(1f)) {
        //....
    }

    Footer()
}

Using fillMaxHeight() the modifier will make the LazyColumn fill the whole available height.

The weight modifier requires a ColumnScope. In your case use the modifier as parameter:

@Composable
fun Conversation(
     modifier: Modifier = Modifier,
     messages: List<Message>
   ){
    LazyColumn(modifier) {
        //...
    }
}

Column(){
    //
    Conversation(
          modifier = Modifier.weight(1f),
          messsages = list
    ) {
        //....
    }  
}

Garrek

It doesn't accept the weight attribute, "unresolved reference"... That's what I don't get, there are many things that it doesn't accept. – Scuba

@boradincer It happens because the weight modifier requires a ColumnScope. Check the updates answer. – Garrek