Avatar

Displays a person's avatar and fallbacks to their initials if the image could not be loaded.

Preview

Code

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.uikit.components.Avatar
import composables.uikit_examples.generated.resources.Res
import composables.uikit_examples.generated.resources.woman_1
import org.jetbrains.compose.resources.painterResource

@Composable
fun AvatarExample() {
    Row(horizontalArrangement = Arrangement.spacedBy(24.dp), verticalAlignment = Alignment.CenterVertically) {
        Avatar(
            painter = painterResource(Res.drawable.woman_1),
            initials = "Maya",
            modifier = Modifier.size(32.dp),
        )
        Avatar(
            painter = painterResource(Res.drawable.woman_1),
            initials = "Maya",
            modifier = Modifier.size(48.dp),
        )
        Avatar(
            painter = painterResource(Res.drawable.woman_1),
            initials = "Maya",
            modifier = Modifier.size(64.dp),
        )
    }
}

Installation

Get access to the source code of all components with a single one-time payment.Buy license ->

Usage

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.uikit.components.Avatar
import composables.uikit_examples.generated.resources.Res
import composables.uikit_examples.generated.resources.woman_1
import org.jetbrains.compose.resources.painterResource

@Composable
fun AvatarExample() {
    Row(horizontalArrangement = Arrangement.spacedBy(24.dp), verticalAlignment = Alignment.CenterVertically) {
        Avatar(
            painter = painterResource(Res.drawable.woman_1),
            initials = "Maya",
            modifier = Modifier.size(32.dp),
        )
        Avatar(
            painter = painterResource(Res.drawable.woman_1),
            initials = "Maya",
            modifier = Modifier.size(48.dp),
        )
        Avatar(
            painter = painterResource(Res.drawable.woman_1),
            initials = "Maya",
            modifier = Modifier.size(64.dp),
        )
    }
}