JetpackTopAppBarWithAvatar

fun JetpackTopAppBarWithAvatar(@StringRes titleRes: Int, avatarUri: String?, avatarContentDescription: String?, modifier: Modifier = Modifier, colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(), onAvatarClick: () -> Unit = {})

A Jetpack Compose top app bar with a title and avatar.

Center-aligned top app bar with a user avatar as the action item. Avatar is loaded asynchronously with Coil, with fallback to a default avatar icon.

Usage Example:

val userAvatar by viewModel.userAvatar.collectAsStateWithLifecycle()

JetpackTopAppBarWithAvatar(
titleRes = R.string.home,
avatarUri = userAvatar,
avatarContentDescription = "User profile",
onAvatarClick = { navController.navigate(Profile) }
)

Parameters

titleRes

The string resource ID for the title of the top app bar.

avatarUri

The URI for the avatar image.

avatarContentDescription

The content description for the avatar.

modifier

The modifier for this top app bar.

colors

The colors for this top app bar.

onAvatarClick

The callback when the avatar is clicked.