Make composable wrap content - Jetpack Compose

Question

I am trying to make the ImageComposable wrap its height and width according to its content, along with the two Text composable, align to the bottom of Assemble composable. Following is the code for that:

@Composable
fun ImageComposable(url:String){
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current).data(url).apply{
            placeholder(drawableResId = R.drawable.ic_broken_pic)
        }.build()
    )
    Image(painter = painter, contentDescription = null, Modifier.padding(2.dp).border(width = 2.dp, shape = CircleShape, color = MaterialTheme.colors.onPrimary)

}

@Composable
fun Assemble(url:String){
    Column (modifier = Modifier.fillMaxWidth().height(400.dp).background(MaterialTheme.colors.primary)
        .padding(16.dp), verticalArrangement = Arrangement.Bottom) {
        ImageComposable(url)
        Text(text = "title")
        Text(text = "Body")
    }
}

but the ImageComposable ends up taking all the height and width of the Assemble composable and I am not able to see the two Text composables that I added in the column. So I am confused as to what is the exact problem here. I thought at least it should show the ImageComposable along with the two Text composable but it is not happening.

I am using coil image loading library here for parsing the image from url. For now in testing, I am passing url as an Empty String. Hence I am calling the composable as:
Assemble("")

I didn't find any document that would help me understand this behavior. So I wanted to know the reason to this problem and possible solutions to overcome it.

Answer 1

You can explicitly specify the height of each component:

fun ImageComposable(modifier: Modifier = Modifier, url: String){
//...
    Image(modifier = modifier, //...
}

Column(//..
   ImageComposable(modifier = Modifier.height(200.dp)//...
   Text(modifier = Modifier.height(50.dp)//...
   Text(modifier = Modifier.height(150.dp)//...
}

Or you can specify a fraction of the maximum height it will take up:

fun ImageComposable(modifier: Modifier = Modifier, url: String){
//...
    Image(modifier = modifier, //...
}

Column(//..
   ImageComposable(modifier = Modifier.fillMaxHeight(0.75f)//...
   Text(modifier = Modifier.fillMaxHeight(0.1f)//...
   Text(modifier = Modifier.fillMaxHeight(0.15f)//...
}

You can also try playing with the weight modifier:

fun ImageComposable(modifier: Modifier = Modifier, url: String){
//...
    Image(modifier = modifier, //...
}

Column(//..
   ImageComposable(modifier = Modifier.weight(1f)//...
   Text(modifier = Modifier.weight(1f, fill = false)//...
   Text(modifier = Modifier.weight(1f, fill = false)//...
}