Custom avatar component with initial letter

[heinhtoohtookyaw]

Select Topic Area

Question

Body

I want to create custom avatar component in jetpack compose with initial letter while without image.

Logic

If empty url import user's name first char else binding url(no placeholder included).

[ShineThyuZan]

In my opinion , u should try this

Box( modifier = Modifier .size(size = size) .border( border = if (hasRing) { BorderStroke( width = MaterialTheme.dimen.small, color = MaterialTheme.colorScheme.surface ) } else { BorderStroke( width = 0.dp, color = MaterialTheme.colorScheme.surface ) }, shape = CircleShape ) .padding(all = if (hasRing) MaterialTheme.dimen.tiny else 0.dp) .clip(CircleShape) .background( color = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp) ) .clickable { onClickedAvatarImage() }, contentAlignment = Alignment.Center ) { if (url.isNotEmpty()) { AsyncImage( model = url, contentDescription = "Avatar Image", contentScale = ContentScale.Crop, modifier = Modifier .size(size = size) .clip(CircleShape) .clickable { onClickedAvatarImage() } ) } else { Text( text = name.toString().uppercase(), style = textSize, color = MaterialTheme.colorScheme.primary ) } }

[queenofcorgis]

GitHub's Acceptable Use Policies prohibits coordinated or inauthentic activity like rapid questions and answers. As a result, we'll be unmarking the answer and locking this post. Please note any future violations may result in a temporary or indefinite block from the Community. Thanks for understanding.