Avatar
Avatar is a visual representation of a user profile either by image, icon or text.
Avatar has three different display types, handled by AvatarVariant.
Use AvatarVariant.Icon when you wish to show a representation of a profile represented by a person icon. Icon should also be used as a fallback for when an image or name does not exist.
Use AvatarVariant.Text when you wish to show a profile represented by text characters, such as initials. Text is able to show between 1-2 characters.
Use AvatarVariant.Image when you wish to show an image representing a profile picture, for example uploaded by the user itself.
Parameters
AvatarVariant Defines which content is to be displayed and what that content will be in the component. There is no default value, as the fallback AvatarVariant.Icon variant requires content description for proper accessibility behaviour.
text used by accessibility services to describe what this avatar represents. This should always be provided unless this avatar is used for decorative purposes, and does not represent a meaningful action that a user can take, but if an image is provided as content, then a content description is recommended. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar.
Modifier to be applied to the Carousel layout.
AvatarStyle Defines the background and foreground of the component.
a boolean used to determine if the background & content colors of the Avatar are to remain static through light/dark mode.
Defines the size of the component. Keep in mind that if the component is clickable (enabled through onClick), each size variant will be at least 48dp.
Controls the enabled state of the avatar. When false, this avatar will not be clickable.
The MutableInteractionSource representing the stream of Interactions for this component.
Will be called when the user clicks the button. This is optional and null by default.
See also
Samples
import androidx.compose.foundation.Image
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Avatar
import net.ikea.skapa.ui.components.AvatarSize
import net.ikea.skapa.ui.components.AvatarStyle
import net.ikea.skapa.ui.components.AvatarVariant
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
// This is an example of data from backend
data class BackendData(
val imagePainter: Unit? = null,
val contentDescription: String? = "Content description",
val firstName: String = "Firstname",
val lastName: String = "Lastname",
val fullName: String = "$firstName%$lastName",
val initials: String = fullName
.split('%')
.mapNotNull { it.firstOrNull()?.toString() }
.reduce { acc, s -> acc + s }
)
// This is simplified fallback logic to check if image exists: use image,
// if name exists but no image: use name, if neither exists: use icon
val variant = if (BackendData().imagePainter != null) {
AvatarVariant.Image(
content = { BackendData().imagePainter }
)
} else if (BackendData().initials != null) {
AvatarVariant.Text(BackendData().initials)
} else {
AvatarVariant.Icon
}
Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)) {
Avatar(
variant = variant,
contentDescription = BackendData().contentDescription,
style = AvatarStyle.Primary,
size = AvatarSize.Medium,
onClick = { /* Do something */ }
)
Avatar(
variant = variant,
contentDescription = BackendData().contentDescription,
style = AvatarStyle.Secondary,
size = AvatarSize.Medium,
onClick = { /* Do something */ }
)
}
}
//sampleEnd
}import androidx.compose.foundation.Image
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Avatar
import net.ikea.skapa.ui.components.AvatarSize
import net.ikea.skapa.ui.components.AvatarStyle
import net.ikea.skapa.ui.components.AvatarVariant
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
// This is an example of data from backend
data class BackendData(
val imagePainter: Int = R.drawable.avatar_demo_image,
val contentDescription: String = "Image content description",
val firstName: String = "Firstname",
val lastName: String = "Lastname",
val fullName: String = "$firstName%$lastName",
val initials: String = fullName
.split('%')
.mapNotNull { it.firstOrNull()?.toString() }
.reduce { acc, s -> acc + s }
)
// This is simplified fallback logic to check if image exists: use image,
// if name exists but no image: use name, if neither exists: use icon
val variant = if (BackendData().imagePainter != null) {
AvatarVariant.Image(
content = {
Image(
painter = painterResource(id = BackendData().imagePainter),
contentDescription = null,
alignment = Alignment.Center,
contentScale = ContentScale.Crop
)
}
)
} else if (BackendData().initials != null) {
AvatarVariant.Text(BackendData().initials)
} else {
AvatarVariant.Icon
}
Avatar(
variant = variant,
contentDescription = BackendData().contentDescription,
style = AvatarStyle.Secondary,
size = AvatarSize.Medium,
onClick = { /* Do something */ }
)
}
//sampleEnd
}