How to properly handle loading initials as place holders in Jetpack Compose

Question

I am trying to show initials when the user does not upload an icon, or set an icon, my only problem is our code uses jetpack compose and I have not found a better way to display this. My code is below but what this code does is it draws the name not in the card.

I have the ProfileCard, which has an Image and two text see image

my challenge now is how do I center the initials, and have a color in the background. I think draw Text is not working. In short I am wondering why it is not drawing on my Image in the card.

How to make initials icons using Coil in Jetpack Compose

I want to achieve something like this with text on the side

My code.

 val painter = rememberAsyncImagePainter(model = getProfileAvatar(e.id))
    val errorState = painter.state is AsyncImagePainter.State.Error 
    val emptyState = painter.state is AsyncImagePainter.State.Empty 
    val isErrorState = painter.state is AsyncImagePainter.State.Error

    val textMeasure = rememberTextMeasurer()
    val textLayoutResult = textMeasure.measure(text = buildAnnotatedString { append(personName) }, 
                                           style = TextStyle(color = Color.White, 
                                                             fontSize = 16.sp))
    


// the composable Profile Card that has the image and text. Hence the painter is what I //am trying to draw to.
        ProfileCard( modifier = Modifier.drawBehind 
                           { if (errorState || emptyState) 
                               { drawText(textLayoutResult = textLayout) } 
                           }, 
                         
                           painter = painter, 
                           onCardClick = { 
                               
                           })

// My Coil Loader

private fun getProfileAvatar(id: String) : ImageRequest {
    val url = ServiceAPI.photoUrl(id) 
    return ImageRequest.Builder(requireContext()) 
        .data(url) 
        .addHeader() ) 
        .build() }

This is how it looks drawing at the back.

Answer 1

Put in your Card a Row with a Alignment.CenterVertically.

Something like:

Card(
    modifier = Modifier.fillMaxWidth().height(100.dp),
    elevation = 2.dp
){

    Row(
      modifier = Modifier.padding(16.dp),
      verticalAlignment = Alignment.CenterVertically
    ){

        Text(
            modifier = Modifier
                .padding(16.dp)
                .drawBehind {
                    drawCircle(
                        color = Teal200,
                        radius = this.size.maxDimension
                    )
                },
            text = "NG",
            style = TextStyle(color = Color.White, fontSize = 20.sp)
        )

        Column(
            Modifier.padding(start = 20.dp),
            verticalArrangement = Arrangement.spacedBy(4.dp, CenterVertically),
        ){
            Text("Name Surname",style = TextStyle(fontSize = 14.sp))
            Text("Active Now",style = TextStyle(fontSize = 14.sp))
        }
    }
}