Hello, I’m looking to do a simple view (see screen...

# compose

[mmaillot]

Hello, I’m looking to do a simple view (see screenshot). I’ve 3 compose : MainScreen, Phoneme and Word. The Phoneme is a Row with 3 images inside (lower, upper and cursive). The word is a box with only one image. The drawable for Image are big. I have only the png format so I drop them directly in the drawable folder. I want to get the result in the second screenshot. (code in the thread).

[mmaillot]

Phoneme compose :

@Composable
fun Phoneme(
    modifier: Modifier = Modifier,
    @DrawableRes lowerImage: Int,
    @DrawableRes upperImage: Int,
    @DrawableRes cursiveImage: Int,
) {
    BoxWithConstraints(
        modifier = modifier
            .padding(20.dp)
            .scale(0.8f)
            .border(
                width = 20.dp,
                color = Color.White,
                shape = RoundedCornerShape(30.dp),
            )
    ) {
        val width = maxWidth
        Row(
            modifier = modifier
        ) {
            Image(
                painter = painterResource(id = lowerImage),
                contentScale = ContentScale.Fit,
                modifier = Modifier.width(width / 3),
                contentDescription = null
            )
            Image(
                painter = painterResource(id = upperImage),
                contentScale = ContentScale.Fit,
                modifier = Modifier.width(width / 3),
                contentDescription = null
            )
            Image(
                painter = painterResource(id = cursiveImage),
                contentScale = ContentScale.Fit,
                modifier = Modifier.width(width / 3),
                contentDescription = null
            )
        }
    }
}

[mmaillot]

Word Compose :

@Composable
fun Word(
    modifier: Modifier = Modifier,
    @DrawableRes wordImage: Int,
) {

    Row(
        modifier = modifier
            .scale(0.8f)
            .border(
                width = 20.dp,
                color = Color.White,
                shape = RoundedCornerShape(30.dp),
            )
    ) {
        Image(
            painter = painterResource(id = wordImage),
            contentScale = ContentScale.Fit,
            contentDescription = null
        )
    }
}

[mmaillot]

MainScreen:

@Composable
fun MainScreen(model: PhonemeModel) {
    BoxWithConstraints {
        val width = maxWidth
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .background(Color.Blue, RoundedCornerShape(30.dp))
        ) {
            Phoneme(
                modifier = Modifier.width((width / 3) * 2),
                lowerImage = model.lowerImage,
                upperImage = model.upperImage,
                cursiveImage = model.cursiveImage
            )
            Word(
                modifier = Modifier.width(width / 3),
                wordImage = model.wordImage
            )
        }
    }
}

[mmaillot]

I don’t know how I can automatically resize images to fit the width, so I get the width with a BoxWithConstraints then compute the size manually

[mmaillot]

It will be nice if I can use a row and say take the max width then for the children says: ok, resize to stay in the screen.

[mmaillot]

I can use fillMaxWidth with a factor maybe 🤔

[Tin Tran]

you mean the height?

[mmaillot]

yeah, you’re right. So I need to compute the width for each Image to fill the screen and check for each image the ratio to get the same height.

[Tin Tran]

You can use IntrinsicSize like this

Row(Modifier.height(IntrinsicSize.Max)) {
    //Phoneme
   Word(Modifier.fillMaxHeight()) 
}

[Colton Idle]

You can also use weight 1f on all of them if you need them to have their sizes spread evenly.

[mmaillot]

I forgot the weight, thanks a lot for your help, I have the perfect result now! 🙂