Add avatar picker and defaults.

2026-04-21 17:29:32 +01:00 · 2021-07-20 13:08:52 -03:00
parent 0093e1d3eb
commit ed23c3fe7c
133 changed files with 4935 additions and 859 deletions
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/Avatar.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/Avatar.kt
@@ -0,0 +1,79 @@
+package org.thoughtcrime.securesms.avatar
+
+import android.net.Uri
+import org.thoughtcrime.securesms.R
+
+/**
+ * Represents an Avatar which the user can choose, edit, and render into a bitmap via the renderer.
+ */
+sealed class Avatar(
+  open val databaseId: DatabaseId
+) {
+  data class Resource(
+    val resourceId: Int,
+    val color: Avatars.ColorPair
+  ) : Avatar(DatabaseId.DoNotPersist) {
+    override fun isSameAs(other: Avatar): Boolean {
+      return other is Resource && other.resourceId == resourceId
+    }
+  }
+
+  data class Text(
+    val text: String,
+    val color: Avatars.ColorPair,
+    override val databaseId: DatabaseId,
+  ) : Avatar(databaseId) {
+    override fun withDatabaseId(databaseId: DatabaseId): Avatar {
+      return copy(databaseId = databaseId)
+    }
+
+    override fun isSameAs(other: Avatar): Boolean {
+      return other is Text && other.databaseId == databaseId
+    }
+  }
+
+  data class Vector(
+    val key: String,
+    val color: Avatars.ColorPair,
+    override val databaseId: DatabaseId,
+  ) : Avatar(databaseId) {
+    override fun withDatabaseId(databaseId: DatabaseId): Avatar {
+      return copy(databaseId = databaseId)
+    }
+
+    override fun isSameAs(other: Avatar): Boolean {
+      return other is Vector && other.key == key
+    }
+  }
+
+  data class Photo(
+    val uri: Uri,
+    val size: Long,
+    override val databaseId: DatabaseId
+  ) : Avatar(databaseId) {
+    override fun withDatabaseId(databaseId: DatabaseId): Avatar {
+      return copy(databaseId = databaseId)
+    }
+
+    override fun isSameAs(other: Avatar): Boolean {
+      return other is Photo && databaseId == other.databaseId
+    }
+  }
+
+  open fun withDatabaseId(databaseId: DatabaseId): Avatar {
+    throw UnsupportedOperationException()
+  }
+
+  abstract fun isSameAs(other: Avatar): Boolean
+
+  companion object {
+    fun getDefaultForSelf(): Resource = Resource(R.drawable.ic_profile_outline_40, Avatars.colors.random())
+    fun getDefaultForGroup(): Resource = Resource(R.drawable.ic_group_outline_40, Avatars.colors.random())
+  }
+
+  sealed class DatabaseId {
+    object DoNotPersist : DatabaseId()
+    object NotSet : DatabaseId()
+    data class Saved(val id: Long) : DatabaseId()
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarBundler.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarBundler.kt
@@ -0,0 +1,69 @@
+package org.thoughtcrime.securesms.avatar
+
+import android.os.Bundle
+import java.lang.IllegalStateException
+
+/**
+ * Utility class which encapsulates reading and writing Avatar objects to and from Bundles.
+ */
+object AvatarBundler {
+
+  private const val TEXT = "org.thoughtcrime.securesms.avatar.TEXT"
+  private const val COLOR = "org.thoughtcrime.securesms.avatar.COLOR"
+  private const val URI = "org.thoughtcrime.securesms.avatar.URI"
+  private const val KEY = "org.thoughtcrime.securesms.avatar.KEY"
+  private const val DATABASE_ID = "org.thoughtcrime.securesms.avatar.DATABASE_ID"
+  private const val SIZE = "org.thoughtcrime.securesms.avatar.SIZE"
+
+  fun bundleText(text: Avatar.Text): Bundle = Bundle().apply {
+    putString(TEXT, text.text)
+    putString(COLOR, text.color.code)
+    putDatabaseId(DATABASE_ID, text.databaseId)
+  }
+
+  fun extractText(bundle: Bundle): Avatar.Text = Avatar.Text(
+    text = requireNotNull(bundle.getString(TEXT)),
+    color = Avatars.colorMap[bundle.getString(COLOR)] ?: throw IllegalStateException(),
+    databaseId = bundle.getDatabaseId()
+  )
+
+  fun bundlePhoto(photo: Avatar.Photo): Bundle = Bundle().apply {
+    putParcelable(URI, photo.uri)
+    putLong(SIZE, photo.size)
+    putDatabaseId(DATABASE_ID, photo.databaseId)
+  }
+
+  fun extractPhoto(bundle: Bundle): Avatar.Photo = Avatar.Photo(
+    uri = requireNotNull(bundle.getParcelable(URI)),
+    size = bundle.getLong(SIZE),
+    databaseId = bundle.getDatabaseId()
+  )
+
+  fun bundleVector(vector: Avatar.Vector): Bundle = Bundle().apply {
+    putString(KEY, vector.key)
+    putString(COLOR, vector.color.code)
+    putDatabaseId(DATABASE_ID, vector.databaseId)
+  }
+
+  fun extractVector(bundle: Bundle): Avatar.Vector = Avatar.Vector(
+    key = requireNotNull(bundle.getString(KEY)),
+    color = Avatars.colorMap[bundle.getString(COLOR)] ?: throw IllegalStateException(),
+    databaseId = bundle.getDatabaseId()
+  )
+
+  private fun Bundle.getDatabaseId(): Avatar.DatabaseId {
+    val id = getLong(DATABASE_ID, -1L)
+
+    return if (id == -1L) {
+      Avatar.DatabaseId.NotSet
+    } else {
+      Avatar.DatabaseId.Saved(id)
+    }
+  }
+
+  private fun Bundle.putDatabaseId(key: String, databaseId: Avatar.DatabaseId) {
+    if (databaseId is Avatar.DatabaseId.Saved) {
+      putLong(key, databaseId.id)
+    }
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarColorItem.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarColorItem.kt
@@ -0,0 +1,42 @@
+package org.thoughtcrime.securesms.avatar
+
+import android.view.View
+import android.widget.ImageView
+import com.airbnb.lottie.SimpleColorFilter
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.util.MappingAdapter
+import org.thoughtcrime.securesms.util.MappingModel
+import org.thoughtcrime.securesms.util.MappingViewHolder
+
+typealias OnAvatarColorClickListener = (Avatars.ColorPair) -> Unit
+
+/**
+ * Selectable color item for choosing colors when editing a Text or Vector avatar.
+ */
+data class AvatarColorItem(
+  val colors: Avatars.ColorPair,
+  val selected: Boolean
+) {
+
+  companion object {
+    fun registerViewHolder(adapter: MappingAdapter, onAvatarColorClickListener: OnAvatarColorClickListener) {
+      adapter.registerFactory(Model::class.java, MappingAdapter.LayoutFactory({ ViewHolder(it, onAvatarColorClickListener) }, R.layout.avatar_color_item))
+    }
+  }
+
+  class Model(val colorItem: AvatarColorItem) : MappingModel<Model> {
+    override fun areItemsTheSame(newItem: Model): Boolean = newItem.colorItem.colors == colorItem.colors
+    override fun areContentsTheSame(newItem: Model): Boolean = newItem.colorItem == colorItem
+  }
+
+  private class ViewHolder(itemView: View, private val onAvatarColorClickListener: OnAvatarColorClickListener) : MappingViewHolder<Model>(itemView) {
+
+    private val imageView: ImageView = findViewById(R.id.avatar_color_item)
+
+    override fun bind(model: Model) {
+      itemView.setOnClickListener { onAvatarColorClickListener(model.colorItem.colors) }
+      imageView.background.colorFilter = SimpleColorFilter(model.colorItem.colors.backgroundColor)
+      imageView.isSelected = model.colorItem.selected
+    }
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarPickerStorage.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarPickerStorage.kt
@@ -0,0 +1,55 @@
+package org.thoughtcrime.securesms.avatar
+
+import android.content.Context
+import android.net.Uri
+import android.webkit.MimeTypeMap
+import org.thoughtcrime.securesms.database.DatabaseFactory
+import org.thoughtcrime.securesms.mediasend.Media
+import org.thoughtcrime.securesms.mms.PartAuthority
+import org.thoughtcrime.securesms.util.MediaUtil
+import org.thoughtcrime.securesms.util.storage.FileStorage
+import java.io.InputStream
+
+object AvatarPickerStorage {
+
+  private const val DIRECTORY = "avatar_picker"
+  private const val FILENAME_BASE = "avatar"
+
+  @JvmStatic
+  fun read(context: Context, fileName: String) = FileStorage.read(context, DIRECTORY, fileName)
+
+  fun save(context: Context, media: Media): Uri {
+    val fileName = FileStorage.save(context, PartAuthority.getAttachmentStream(context, media.uri), DIRECTORY, FILENAME_BASE, MediaUtil.getExtension(context, media.uri) ?: "")
+
+    return PartAuthority.getAvatarPickerUri(fileName)
+  }
+
+  fun save(context: Context, inputStream: InputStream): Uri {
+    val fileName = FileStorage.save(context, inputStream, DIRECTORY, FILENAME_BASE, MimeTypeMap.getSingleton().getExtensionFromMimeType(MediaUtil.IMAGE_JPEG) ?: "")
+
+    return PartAuthority.getAvatarPickerUri(fileName)
+  }
+
+  @JvmStatic
+  fun cleanOrphans(context: Context) {
+    val avatarFiles = FileStorage.getAllFiles(context, DIRECTORY, FILENAME_BASE)
+    val database = DatabaseFactory.getAvatarPickerDatabase(context)
+    val photoAvatars = database
+      .getAllAvatars()
+      .filterIsInstance<Avatar.Photo>()
+
+    val inDatabaseFileNames = photoAvatars.map { PartAuthority.getAvatarPickerFilename(it.uri) }
+    val onDiskFileNames = avatarFiles.map { it.name }
+
+    val inDatabaseButNotOnDisk = inDatabaseFileNames - onDiskFileNames
+    val onDiskButNotInDatabase = onDiskFileNames - inDatabaseFileNames
+
+    avatarFiles
+      .filter { onDiskButNotInDatabase.contains(it.name) }
+      .forEach { it.delete() }
+
+    photoAvatars
+      .filter { inDatabaseButNotOnDisk.contains(PartAuthority.getAvatarPickerFilename(it.uri)) }
+      .forEach { database.deleteAvatar(it) }
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarRenderer.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/AvatarRenderer.kt
@@ -0,0 +1,156 @@
+package org.thoughtcrime.securesms.avatar
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Typeface
+import android.graphics.drawable.Drawable
+import android.net.Uri
+import androidx.appcompat.content.res.AppCompatResources
+import com.airbnb.lottie.SimpleColorFilter
+import com.amulyakhare.textdrawable.TextDrawable
+import org.signal.core.util.concurrent.SignalExecutors
+import org.thoughtcrime.securesms.mediasend.Media
+import org.thoughtcrime.securesms.mms.PartAuthority
+import org.thoughtcrime.securesms.profiles.AvatarHelper
+import org.thoughtcrime.securesms.providers.BlobProvider
+import org.thoughtcrime.securesms.util.MediaUtil
+import org.whispersystems.libsignal.util.guava.Optional
+import java.io.ByteArrayInputStream
+import java.io.ByteArrayOutputStream
+import java.io.IOException
+import javax.annotation.meta.Exhaustive
+
+/**
+ * Renders Avatar objects into Media objects. This can involve creating a Bitmap, depending on the
+ * type of Avatar passed to `renderAvatar`
+ */
+object AvatarRenderer {
+
+  private val DIMENSIONS = AvatarHelper.AVATAR_DIMENSIONS
+
+  fun getTypeface(context: Context): Typeface {
+    return Typeface.createFromAsset(context.assets, "fonts/Inter-Medium.otf")
+  }
+
+  fun renderAvatar(context: Context, avatar: Avatar, onAvatarRendered: (Media) -> Unit, onRenderFailed: (Throwable?) -> Unit) {
+    @Exhaustive
+    when (avatar) {
+      is Avatar.Resource -> renderResource(context, avatar, onAvatarRendered, onRenderFailed)
+      is Avatar.Vector -> renderVector(context, avatar, onAvatarRendered, onRenderFailed)
+      is Avatar.Photo -> renderPhoto(context, avatar, onAvatarRendered)
+      is Avatar.Text -> renderText(context, avatar, onAvatarRendered, onRenderFailed)
+    }
+  }
+
+  @JvmStatic
+  fun createTextDrawable(
+    context: Context,
+    avatar: Avatar.Text,
+    inverted: Boolean = false,
+    size: Int = DIMENSIONS,
+    isRect: Boolean = true
+  ): Drawable {
+    val typeface = getTypeface(context)
+    val color: Int = if (inverted) {
+      avatar.color.backgroundColor
+    } else {
+      avatar.color.foregroundColor
+    }
+
+    val builder = TextDrawable
+      .builder()
+      .beginConfig()
+      .fontSize(Avatars.getTextSizeForLength(context, avatar.text, size * 0.8f, size * 0.45f).toInt())
+      .textColor(color)
+      .useFont(typeface)
+      .width(size)
+      .height(size)
+      .endConfig()
+
+    return if (isRect) {
+      builder.buildRect(avatar.text, Color.TRANSPARENT)
+    } else {
+      builder.buildRound(avatar.text, Color.TRANSPARENT)
+    }
+  }
+
+  private fun renderVector(context: Context, avatar: Avatar.Vector, onAvatarRendered: (Media) -> Unit, onRenderFailed: (Throwable?) -> Unit) {
+    renderInBackground(context, onAvatarRendered, onRenderFailed) { canvas ->
+      val drawableResourceId = Avatars.getDrawableResource(avatar.key) ?: return@renderInBackground Result.failure(Exception("Drawable resource for key ${avatar.key} does not exist."))
+      val vector: Drawable = requireNotNull(AppCompatResources.getDrawable(context, drawableResourceId))
+      vector.setBounds(0, 0, DIMENSIONS, DIMENSIONS)
+
+      canvas.drawColor(avatar.color.backgroundColor)
+      vector.draw(canvas)
+      Result.success(Unit)
+    }
+  }
+
+  private fun renderText(context: Context, avatar: Avatar.Text, onAvatarRendered: (Media) -> Unit, onRenderFailed: (Throwable?) -> Unit) {
+    renderInBackground(context, onAvatarRendered, onRenderFailed) { canvas ->
+      val textDrawable = createTextDrawable(context, avatar)
+
+      canvas.drawColor(avatar.color.backgroundColor)
+      textDrawable.draw(canvas)
+      Result.success(Unit)
+    }
+  }
+
+  private fun renderPhoto(context: Context, avatar: Avatar.Photo, onAvatarRendered: (Media) -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      val blob = BlobProvider.getInstance()
+        .forData(AvatarPickerStorage.read(context, PartAuthority.getAvatarPickerFilename(avatar.uri)), avatar.size)
+        .createForSingleSessionOnDisk(context)
+
+      onAvatarRendered(createMedia(blob, avatar.size))
+    }
+  }
+
+  private fun renderResource(context: Context, avatar: Avatar.Resource, onAvatarRendered: (Media) -> Unit, onRenderFailed: (Throwable?) -> Unit) {
+    renderInBackground(context, onAvatarRendered, onRenderFailed) { canvas ->
+      val resource: Drawable = requireNotNull(AppCompatResources.getDrawable(context, avatar.resourceId))
+      resource.colorFilter = SimpleColorFilter(avatar.color.foregroundColor)
+
+      val padding = (DIMENSIONS * 0.2).toInt()
+      resource.setBounds(0 + padding, 0 + padding, DIMENSIONS - padding, DIMENSIONS - padding)
+
+      canvas.drawColor(avatar.color.backgroundColor)
+      resource.draw(canvas)
+      Result.success(Unit)
+    }
+  }
+
+  private fun renderInBackground(context: Context, onAvatarRendered: (Media) -> Unit, onRenderFailed: (Throwable?) -> Unit, drawAvatar: (Canvas) -> Result<Unit>) {
+    SignalExecutors.BOUNDED.execute {
+      val canvasBitmap = Bitmap.createBitmap(DIMENSIONS, DIMENSIONS, Bitmap.Config.ARGB_8888)
+      val canvas = Canvas(canvasBitmap)
+
+      val drawResult = drawAvatar(canvas)
+      if (drawResult.isFailure) {
+        canvasBitmap.recycle()
+        onRenderFailed(drawResult.exceptionOrNull())
+      }
+
+      val outStream = ByteArrayOutputStream()
+      val compressed = canvasBitmap.compress(Bitmap.CompressFormat.JPEG, 80, outStream)
+      canvasBitmap.recycle()
+
+      if (!compressed) {
+        onRenderFailed(IOException("Failed to compress bitmap"))
+        return@execute
+      }
+
+      val bytes = outStream.toByteArray()
+      val inStream = ByteArrayInputStream(bytes)
+      val uri = BlobProvider.getInstance().forData(inStream, bytes.size.toLong()).createForSingleSessionOnDisk(context)
+
+      onAvatarRendered(createMedia(uri, bytes.size.toLong()))
+    }
+  }
+
+  private fun createMedia(uri: Uri, size: Long): Media {
+    return Media(uri, MediaUtil.IMAGE_JPEG, System.currentTimeMillis(), DIMENSIONS, DIMENSIONS, size, 0, false, false, Optional.absent(), Optional.absent(), Optional.absent())
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/Avatars.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/Avatars.kt
@@ -0,0 +1,153 @@
+package org.thoughtcrime.securesms.avatar
+
+import android.content.Context
+import android.graphics.Paint
+import androidx.annotation.ColorInt
+import androidx.annotation.DrawableRes
+import androidx.annotation.Px
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.conversation.colors.AvatarColor
+import kotlin.math.abs
+import kotlin.math.min
+
+object Avatars {
+
+  /**
+   * Enum class mirroring AvatarColors codes but utilizing foreground colors for text or icon tinting.
+   */
+  enum class ForegroundColor(private val code: String, @ColorInt val colorInt: Int) {
+    A100("A100", 0xFF3838F5.toInt()),
+    A110("A110", 0xFF1251D3.toInt()),
+    A120("A120", 0xFF086DA0.toInt()),
+    A130("A130", 0xFF067906.toInt()),
+    A140("A140", 0xFF661AFF.toInt()),
+    A150("A150", 0xFF9F00F0.toInt()),
+    A160("A160", 0xFFB8057C.toInt()),
+    A170("A170", 0xFFBE0404.toInt()),
+    A180("A180", 0xFF836B01.toInt()),
+    A190("A190", 0xFF7D6F40.toInt()),
+    A200("A200", 0xFF4F4F6D.toInt()),
+    A210("A210", 0xFF5C5C5C.toInt());
+
+    fun deserialize(code: String): ForegroundColor {
+      return values().find { it.code == code } ?: throw IllegalArgumentException()
+    }
+
+    fun serialize(): String = code
+  }
+
+  /**
+   * Mapping which associates color codes to ColorPair objects containing background and foreground colors.
+   */
+  val colorMap: Map<String, ColorPair> = ForegroundColor.values().map {
+    ColorPair(AvatarColor.deserialize(it.serialize()), it)
+  }.associateBy {
+    it.code
+  }
+
+  val colors: List<ColorPair> = colorMap.values.toList()
+
+  val defaultAvatarsForSelf = linkedMapOf(
+    "avatar_abstract_01" to DefaultAvatar(R.drawable.ic_avatar_abstract_01, "A130"),
+    "avatar_abstract_02" to DefaultAvatar(R.drawable.ic_avatar_abstract_02, "A120"),
+    "avatar_abstract_03" to DefaultAvatar(R.drawable.ic_avatar_abstract_03, "A170"),
+    "avatar_cat" to DefaultAvatar(R.drawable.ic_avatar_cat, "A190"),
+    "avatar_dog" to DefaultAvatar(R.drawable.ic_avatar_dog, "A140"),
+    "avatar_fox" to DefaultAvatar(R.drawable.ic_avatar_fox, "A190"),
+    "avatar_tucan" to DefaultAvatar(R.drawable.ic_avatar_tucan, "A120"),
+    "avatar_sloth" to DefaultAvatar(R.drawable.ic_avatar_sloth, "A160"),
+    "avatar_dinosaur" to DefaultAvatar(R.drawable.ic_avatar_dinosour, "A130"),
+    "avatar_pig" to DefaultAvatar(R.drawable.ic_avatar_pig, "A180"),
+    "avatar_incognito" to DefaultAvatar(R.drawable.ic_avatar_incognito, "A220"),
+    "avatar_ghost" to DefaultAvatar(R.drawable.ic_avatar_ghost, "A100")
+  )
+
+  val defaultAvatarsForGroup = linkedMapOf(
+    "avatar_heart" to DefaultAvatar(R.drawable.ic_avatar_heart, "A180"),
+    "avatar_house" to DefaultAvatar(R.drawable.ic_avatar_house, "A120"),
+    "avatar_melon" to DefaultAvatar(R.drawable.ic_avatar_melon, "A110"),
+    "avatar_drink" to DefaultAvatar(R.drawable.ic_avatar_drink, "A170"),
+    "avatar_celebration" to DefaultAvatar(R.drawable.ic_avatar_celebration, "A100"),
+    "avatar_balloon" to DefaultAvatar(R.drawable.ic_avatar_balloon, "A220"),
+    "avatar_book" to DefaultAvatar(R.drawable.ic_avatar_book, "A100"),
+    "avatar_briefcase" to DefaultAvatar(R.drawable.ic_avatar_briefcase, "A180"),
+    "avatar_sunset" to DefaultAvatar(R.drawable.ic_avatar_sunset, "A120"),
+    "avatar_surfboard" to DefaultAvatar(R.drawable.ic_avatar_surfboard, "A110"),
+    "avatar_soccerball" to DefaultAvatar(R.drawable.ic_avatar_soccerball, "A130"),
+    "avatar_football" to DefaultAvatar(R.drawable.ic_avatar_football, "A220"),
+  )
+
+  @DrawableRes
+  fun getDrawableResource(key: String): Int? {
+    val defaultAvatar = defaultAvatarsForSelf.getOrDefault(key, defaultAvatarsForGroup[key])
+
+    return defaultAvatar?.vectorDrawableId
+  }
+
+  private fun textPaint(context: Context) = Paint().apply {
+    isAntiAlias = true
+    typeface = AvatarRenderer.getTypeface(context)
+    textSize = 1f
+  }
+
+  /**
+   * Calculate the text size for a give string using a maximum desired width and a maximum desired font size.
+   */
+  @JvmStatic
+  fun getTextSizeForLength(context: Context, text: String, @Px maxWidth: Float, @Px maxSize: Float): Float {
+    val paint = textPaint(context)
+    return branchSizes(0f, maxWidth / 2, maxWidth, maxSize, paint, text)
+  }
+
+  /**
+   * Uses binary search to determine optimal font size to within 1% given the input parameters.
+   */
+  private fun branchSizes(@Px lastFontSize: Float, @Px fontSize: Float, @Px target: Float, @Px maxFontSize: Float, paint: Paint, text: String): Float {
+    paint.textSize = fontSize
+    val textWidth = paint.measureText(text)
+    val delta = abs(lastFontSize - fontSize) / 2f
+    val isWithinThreshold = abs(1f - (textWidth / target)) <= 0.01f
+
+    if (textWidth == 0f) {
+      return maxFontSize
+    }
+
+    if (delta == 0f) {
+      return min(maxFontSize, fontSize)
+    }
+
+    return when {
+      fontSize >= maxFontSize -> {
+        maxFontSize
+      }
+      isWithinThreshold -> {
+        fontSize
+      }
+      textWidth > target -> {
+        branchSizes(fontSize, fontSize - delta, target, maxFontSize, paint, text)
+      }
+      else -> {
+        branchSizes(fontSize, fontSize + delta, target, maxFontSize, paint, text)
+      }
+    }
+  }
+
+  @JvmStatic
+  fun getForegroundColor(avatarColor: AvatarColor): ForegroundColor {
+    return ForegroundColor.values().firstOrNull { it.serialize() == avatarColor.serialize() } ?: ForegroundColor.A210
+  }
+
+  data class DefaultAvatar(
+    @DrawableRes val vectorDrawableId: Int,
+    val colorCode: String
+  )
+
+  data class ColorPair(
+    val backgroundAvatarColor: AvatarColor,
+    val foregroundAvatarColor: ForegroundColor
+  ) {
+    @ColorInt val backgroundColor: Int = backgroundAvatarColor.colorInt()
+    @ColorInt val foregroundColor: Int = foregroundAvatarColor.colorInt
+    val code: String = backgroundAvatarColor.serialize()
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/photo/PhotoEditorFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/photo/PhotoEditorFragment.kt
@@ -0,0 +1,65 @@
+package org.thoughtcrime.securesms.avatar.photo
+
+import android.os.Bundle
+import android.view.View
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.commit
+import androidx.fragment.app.setFragmentResult
+import androidx.navigation.Navigation
+import org.signal.core.util.ThreadUtil
+import org.signal.core.util.concurrent.SignalExecutors
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.avatar.AvatarBundler
+import org.thoughtcrime.securesms.avatar.AvatarPickerStorage
+import org.thoughtcrime.securesms.database.DatabaseFactory
+import org.thoughtcrime.securesms.providers.BlobProvider
+import org.thoughtcrime.securesms.scribbles.ImageEditorFragment
+
+class PhotoEditorFragment : Fragment(R.layout.avatar_photo_editor_fragment), ImageEditorFragment.Controller {
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    val args = PhotoEditorFragmentArgs.fromBundle(requireArguments())
+    val photo = AvatarBundler.extractPhoto(args.photoAvatar)
+    val imageEditorFragment = ImageEditorFragment.newInstanceForAvatarEdit(photo.uri)
+
+    childFragmentManager.commit {
+      add(R.id.fragment_container, imageEditorFragment, IMAGE_EDITOR)
+    }
+  }
+
+  override fun onTouchEventsNeeded(needed: Boolean) {
+  }
+
+  override fun onRequestFullScreen(fullScreen: Boolean, hideKeyboard: Boolean) {
+  }
+
+  override fun onDoneEditing() {
+    val args = PhotoEditorFragmentArgs.fromBundle(requireArguments())
+    val applicationContext = requireContext().applicationContext
+    val imageEditorFragment: ImageEditorFragment = childFragmentManager.findFragmentByTag(IMAGE_EDITOR) as ImageEditorFragment
+
+    SignalExecutors.BOUNDED.execute {
+      val editedImageUri = imageEditorFragment.renderToSingleUseBlob()
+      val size = BlobProvider.getFileSize(editedImageUri) ?: 0
+      val inputStream = BlobProvider.getInstance().getStream(applicationContext, editedImageUri)
+      val onDiskUri = AvatarPickerStorage.save(applicationContext, inputStream)
+      val photo = AvatarBundler.extractPhoto(args.photoAvatar)
+      val database = DatabaseFactory.getAvatarPickerDatabase(applicationContext)
+      val newPhoto = photo.copy(uri = onDiskUri, size = size)
+
+      database.update(newPhoto)
+      BlobProvider.getInstance().delete(requireContext(), photo.uri)
+
+      ThreadUtil.runOnMain {
+        setFragmentResult(REQUEST_KEY_EDIT, AvatarBundler.bundlePhoto(newPhoto))
+        Navigation.findNavController(requireView()).popBackStack()
+      }
+    }
+  }
+
+  companion object {
+    const val REQUEST_KEY_EDIT = "org.thoughtcrime.securesms.avatar.photo.EDIT"
+
+    private const val IMAGE_EDITOR = "image_editor"
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerFragment.kt
@@ -0,0 +1,223 @@
+package org.thoughtcrime.securesms.avatar.picker
+
+import android.Manifest
+import android.app.Activity
+import android.content.Intent
+import android.os.Bundle
+import android.view.Gravity
+import android.view.View
+import android.widget.PopupMenu
+import android.widget.Toast
+import androidx.appcompat.widget.Toolbar
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.setFragmentResult
+import androidx.fragment.app.setFragmentResultListener
+import androidx.fragment.app.viewModels
+import androidx.navigation.Navigation
+import androidx.recyclerview.widget.RecyclerView
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.AvatarBundler
+import org.thoughtcrime.securesms.avatar.photo.PhotoEditorFragment
+import org.thoughtcrime.securesms.avatar.text.TextAvatarCreationFragment
+import org.thoughtcrime.securesms.avatar.vector.VectorAvatarCreationFragment
+import org.thoughtcrime.securesms.components.ButtonStripItemView
+import org.thoughtcrime.securesms.components.recyclerview.GridDividerDecoration
+import org.thoughtcrime.securesms.groups.ParcelableGroupId
+import org.thoughtcrime.securesms.mediasend.AvatarSelectionActivity
+import org.thoughtcrime.securesms.mediasend.Media
+import org.thoughtcrime.securesms.permissions.Permissions
+import org.thoughtcrime.securesms.util.MappingAdapter
+import org.thoughtcrime.securesms.util.ViewUtil
+import org.thoughtcrime.securesms.util.visible
+import java.util.Objects
+
+/**
+ * Primary Avatar picker fragment, displays current user avatar and a list of recently used avatars and defaults.
+ */
+class AvatarPickerFragment : Fragment(R.layout.avatar_picker_fragment) {
+
+  companion object {
+    const val REQUEST_KEY_SELECT_AVATAR = "org.thoughtcrime.securesms.avatar.picker.SELECT_AVATAR"
+    const val SELECT_AVATAR_MEDIA = "org.thoughtcrime.securesms.avatar.picker.SELECT_AVATAR_MEDIA"
+
+    private const val REQUEST_CODE_SELECT_IMAGE = 1
+  }
+
+  private val viewModel: AvatarPickerViewModel by viewModels(factoryProducer = this::createFactory)
+
+  private fun createFactory(): AvatarPickerViewModel.Factory {
+    val args = AvatarPickerFragmentArgs.fromBundle(requireArguments())
+    val groupId = ParcelableGroupId.get(args.groupId)
+
+    return AvatarPickerViewModel.Factory(AvatarPickerRepository(requireContext()), groupId, args.isNewGroup, args.groupAvatarMedia)
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    val toolbar: Toolbar = view.findViewById(R.id.avatar_picker_toolbar)
+    val recycler: RecyclerView = view.findViewById(R.id.avatar_picker_recycler)
+    val cameraButton: ButtonStripItemView = view.findViewById(R.id.avatar_picker_camera)
+    val photoButton: ButtonStripItemView = view.findViewById(R.id.avatar_picker_photo)
+    val textButton: ButtonStripItemView = view.findViewById(R.id.avatar_picker_text)
+    val saveButton: View = view.findViewById(R.id.avatar_picker_save)
+    val clearButton: View = view.findViewById(R.id.avatar_picker_clear)
+
+    recycler.addItemDecoration(GridDividerDecoration(4, ViewUtil.dpToPx(16)))
+
+    val adapter = MappingAdapter()
+    AvatarPickerItem.register(adapter, this::onAvatarClick, this::onAvatarLongClick)
+
+    recycler.adapter = adapter
+
+    val avatarViewHolder = AvatarPickerItem.ViewHolder(view)
+
+    viewModel.state.observe(viewLifecycleOwner) { state ->
+      if (state.currentAvatar != null) {
+        avatarViewHolder.bind(AvatarPickerItem.Model(state.currentAvatar, false))
+      }
+
+      clearButton.visible = state.canClear
+
+      val wasEnabled = saveButton.isEnabled
+      saveButton.isEnabled = state.canSave
+      if (wasEnabled != state.canSave) {
+        val alpha = if (state.canSave) 1f else 0.5f
+        saveButton.animate().cancel()
+        saveButton.animate().alpha(alpha)
+      }
+
+      adapter.submitList(state.selectableAvatars.map { AvatarPickerItem.Model(it, it == state.currentAvatar) })
+    }
+
+    toolbar.setNavigationOnClickListener { Navigation.findNavController(it).popBackStack() }
+    cameraButton.setOnIconClickedListener { openCameraCapture() }
+    photoButton.setOnIconClickedListener { openGallery() }
+    textButton.setOnIconClickedListener { openTextEditor(null) }
+    saveButton.setOnClickListener { v ->
+      viewModel.save {
+        setFragmentResult(
+          REQUEST_KEY_SELECT_AVATAR,
+          Bundle().apply {
+            putParcelable(SELECT_AVATAR_MEDIA, it)
+          }
+        )
+        Navigation.findNavController(v).popBackStack()
+      }
+    }
+    clearButton.setOnClickListener { viewModel.clear() }
+
+    setFragmentResultListener(TextAvatarCreationFragment.REQUEST_KEY_TEXT) { _, bundle ->
+      val text = AvatarBundler.extractText(bundle)
+      viewModel.onAvatarEditCompleted(text)
+    }
+
+    setFragmentResultListener(VectorAvatarCreationFragment.REQUEST_KEY_VECTOR) { _, bundle ->
+      val vector = AvatarBundler.extractVector(bundle)
+      viewModel.onAvatarEditCompleted(vector)
+    }
+
+    setFragmentResultListener(PhotoEditorFragment.REQUEST_KEY_EDIT) { _, bundle ->
+      val photo = AvatarBundler.extractPhoto(bundle)
+      viewModel.onAvatarEditCompleted(photo)
+    }
+  }
+
+  override fun onResume() {
+    super.onResume()
+    ViewUtil.hideKeyboard(requireContext(), requireView())
+  }
+
+  override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
+    if (requestCode == REQUEST_CODE_SELECT_IMAGE && resultCode == Activity.RESULT_OK && data != null) {
+      val media: Media = Objects.requireNonNull(data.getParcelableExtra(AvatarSelectionActivity.EXTRA_MEDIA))
+      viewModel.onAvatarPhotoSelectionCompleted(media)
+    } else {
+      super.onActivityResult(requestCode, resultCode, data)
+    }
+  }
+
+  private fun onAvatarClick(avatar: Avatar, isSelected: Boolean) {
+    if (isSelected) {
+      openEditor(avatar)
+    } else {
+      viewModel.onAvatarSelectedFromGrid(avatar)
+    }
+  }
+
+  private fun onAvatarLongClick(anchorView: View, avatar: Avatar): Boolean {
+    val menuRes = when (avatar) {
+      is Avatar.Photo -> R.menu.avatar_picker_context
+      is Avatar.Text -> R.menu.avatar_picker_context
+      is Avatar.Vector -> return false
+      is Avatar.Resource -> return false
+    }
+
+    val popup = PopupMenu(context, anchorView, Gravity.TOP)
+    popup.menuInflater.inflate(menuRes, popup.menu)
+    popup.setOnMenuItemClickListener { menuItem ->
+      when (menuItem.itemId) {
+        R.id.action_delete -> viewModel.delete(avatar)
+      }
+
+      true
+    }
+    popup.show()
+
+    return true
+  }
+
+  fun openEditor(avatar: Avatar) {
+    when (avatar) {
+      is Avatar.Photo -> openPhotoEditor(avatar)
+      is Avatar.Resource -> throw UnsupportedOperationException()
+      is Avatar.Text -> openTextEditor(avatar)
+      is Avatar.Vector -> openVectorEditor(avatar)
+    }
+  }
+
+  fun openPhotoEditor(photo: Avatar.Photo) {
+    Navigation.findNavController(requireView())
+      .navigate(AvatarPickerFragmentDirections.actionAvatarPickerFragmentToAvatarPhotoEditorFragment(AvatarBundler.bundlePhoto(photo)))
+  }
+
+  fun openVectorEditor(vector: Avatar.Vector) {
+    Navigation.findNavController(requireView())
+      .navigate(AvatarPickerFragmentDirections.actionAvatarPickerFragmentToVectorAvatarCreationFragment(AvatarBundler.bundleVector(vector)))
+  }
+
+  fun openTextEditor(text: Avatar.Text?) {
+    val bundle = if (text != null) AvatarBundler.bundleText(text) else null
+    Navigation.findNavController(requireView())
+      .navigate(AvatarPickerFragmentDirections.actionAvatarPickerFragmentToTextAvatarCreationFragment(bundle))
+  }
+
+  fun openCameraCapture() {
+    Permissions.with(this)
+      .request(Manifest.permission.CAMERA)
+      .ifNecessary()
+      .onAllGranted {
+        val intent = AvatarSelectionActivity.getIntentForCameraCapture(requireContext())
+        startActivityForResult(intent, REQUEST_CODE_SELECT_IMAGE)
+      }
+      .onAnyDenied {
+        Toast.makeText(requireContext(), R.string.AvatarSelectionBottomSheetDialogFragment__taking_a_photo_requires_the_camera_permission, Toast.LENGTH_SHORT)
+          .show()
+      }
+      .execute()
+  }
+
+  fun openGallery() {
+    Permissions.with(this)
+      .request(Manifest.permission.READ_EXTERNAL_STORAGE)
+      .ifNecessary()
+      .onAllGranted {
+        val intent = AvatarSelectionActivity.getIntentForGallery(requireContext())
+        startActivityForResult(intent, REQUEST_CODE_SELECT_IMAGE)
+      }
+      .onAnyDenied {
+        Toast.makeText(requireContext(), R.string.AvatarSelectionBottomSheetDialogFragment__viewing_your_gallery_requires_the_storage_permission, Toast.LENGTH_SHORT)
+          .show()
+      }
+      .execute()
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerItem.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerItem.kt
@@ -0,0 +1,150 @@
+package org.thoughtcrime.securesms.avatar.picker
+
+import android.util.TypedValue
+import android.view.View
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.core.view.setPadding
+import androidx.core.widget.addTextChangedListener
+import com.airbnb.lottie.SimpleColorFilter
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.AvatarRenderer
+import org.thoughtcrime.securesms.avatar.Avatars
+import org.thoughtcrime.securesms.mms.DecryptableStreamUriLoader
+import org.thoughtcrime.securesms.mms.GlideApp
+import org.thoughtcrime.securesms.util.MappingAdapter
+import org.thoughtcrime.securesms.util.MappingModel
+import org.thoughtcrime.securesms.util.MappingViewHolder
+import org.thoughtcrime.securesms.util.visible
+
+typealias OnAvatarClickListener = (Avatar, Boolean) -> Unit
+typealias OnAvatarLongClickListener = (View, Avatar) -> Boolean
+
+object AvatarPickerItem {
+
+  private val SELECTION_CHANGED = Any()
+
+  fun register(adapter: MappingAdapter, onAvatarClickListener: OnAvatarClickListener, onAvatarLongClickListener: OnAvatarLongClickListener) {
+    adapter.registerFactory(Model::class.java, MappingAdapter.LayoutFactory({ ViewHolder(it, onAvatarClickListener, onAvatarLongClickListener) }, R.layout.avatar_picker_item))
+  }
+
+  class Model(val avatar: Avatar, val isSelected: Boolean) : MappingModel<Model> {
+    override fun areItemsTheSame(newItem: Model): Boolean = avatar.isSameAs(newItem.avatar)
+
+    override fun areContentsTheSame(newItem: Model): Boolean = avatar == newItem.avatar && isSelected == newItem.isSelected
+
+    override fun getChangePayload(newItem: Model): Any? {
+      return if (newItem.avatar == avatar && isSelected != newItem.isSelected) {
+        SELECTION_CHANGED
+      } else {
+        null
+      }
+    }
+  }
+
+  class ViewHolder(
+    itemView: View,
+    private val onAvatarClickListener: OnAvatarClickListener? = null,
+    private val onAvatarLongClickListener: OnAvatarLongClickListener? = null
+  ) : MappingViewHolder<Model>(itemView) {
+
+    private val imageView: ImageView = itemView.findViewById(R.id.avatar_picker_item_image)
+    private val textView: TextView = itemView.findViewById(R.id.avatar_picker_item_text)
+    private val selectedFader: View? = itemView.findViewById(R.id.avatar_picker_item_fader)
+    private val selectedOverlay: View? = itemView.findViewById(R.id.avatar_picker_item_selection_overlay)
+
+    init {
+      textView.typeface = AvatarRenderer.getTypeface(context)
+      textView.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
+        updateTextSize()
+      }
+      textView.addTextChangedListener(
+        afterTextChanged = {
+          updateTextSize()
+        }
+      )
+    }
+
+    private fun updateTextSize() {
+      textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, Avatars.getTextSizeForLength(context, textView.text.toString(), textView.measuredWidth * 0.8f, textView.measuredHeight * 0.45f))
+    }
+
+    override fun bind(model: Model) {
+      val alpha = if (model.isSelected) 1f else 0f
+      val scale = if (model.isSelected) 0.9f else 1f
+
+      imageView.animate().cancel()
+      textView.animate().cancel()
+      selectedOverlay?.animate()?.cancel()
+      selectedFader?.animate()?.cancel()
+
+      if (model.isSelected) {
+        itemView.setOnLongClickListener {
+          onAvatarLongClickListener?.invoke(itemView, model.avatar) ?: false
+        }
+      } else {
+        itemView.setOnLongClickListener(null)
+      }
+
+      itemView.setOnClickListener { onAvatarClickListener?.invoke(model.avatar, model.isSelected) }
+
+      if (payload.isNotEmpty() && payload.contains(SELECTION_CHANGED)) {
+        imageView.animate().scaleX(scale).scaleY(scale)
+        textView.animate().scaleX(scale).scaleY(scale)
+        selectedOverlay?.animate()?.alpha(alpha)
+        selectedFader?.animate()?.alpha(alpha)
+        return
+      }
+
+      imageView.scaleX = scale
+      imageView.scaleY = scale
+      textView.scaleX = scale
+      textView.scaleY = scale
+      selectedFader?.alpha = alpha
+      selectedOverlay?.alpha = alpha
+
+      imageView.clearColorFilter()
+      imageView.setPadding(0)
+
+      when (model.avatar) {
+        is Avatar.Text -> {
+          textView.visible = true
+
+          if (textView.text.toString() != model.avatar.text) {
+            textView.text = model.avatar.text
+          }
+
+          imageView.setImageDrawable(null)
+          imageView.background.colorFilter = SimpleColorFilter(model.avatar.color.backgroundColor)
+          textView.setTextColor(model.avatar.color.foregroundColor)
+        }
+        is Avatar.Vector -> {
+          textView.visible = false
+
+          val drawableId = Avatars.getDrawableResource(model.avatar.key)
+          if (drawableId == null) {
+            imageView.setImageDrawable(null)
+          } else {
+            imageView.setImageDrawable(AppCompatResources.getDrawable(context, drawableId))
+          }
+
+          imageView.background.colorFilter = SimpleColorFilter(model.avatar.color.backgroundColor)
+        }
+        is Avatar.Photo -> {
+          textView.visible = false
+          GlideApp.with(imageView).load(DecryptableStreamUriLoader.DecryptableUri(model.avatar.uri)).into(imageView)
+        }
+        is Avatar.Resource -> {
+          imageView.setPadding((imageView.width * 0.2).toInt())
+          textView.visible = false
+          GlideApp.with(imageView).clear(imageView)
+          imageView.setImageResource(model.avatar.resourceId)
+          imageView.colorFilter = SimpleColorFilter(model.avatar.color.foregroundColor)
+          imageView.background.colorFilter = SimpleColorFilter(model.avatar.color.backgroundColor)
+        }
+      }
+    }
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerRepository.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerRepository.kt
@@ -0,0 +1,175 @@
+package org.thoughtcrime.securesms.avatar.picker
+
+import android.content.Context
+import android.net.Uri
+import android.widget.Toast
+import io.reactivex.rxjava3.core.Single
+import org.signal.core.util.StreamUtil
+import org.signal.core.util.ThreadUtil
+import org.signal.core.util.concurrent.SignalExecutors
+import org.signal.core.util.logging.Log
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.AvatarPickerStorage
+import org.thoughtcrime.securesms.avatar.AvatarRenderer
+import org.thoughtcrime.securesms.avatar.Avatars
+import org.thoughtcrime.securesms.database.DatabaseFactory
+import org.thoughtcrime.securesms.groups.GroupId
+import org.thoughtcrime.securesms.mediasend.Media
+import org.thoughtcrime.securesms.profiles.AvatarHelper
+import org.thoughtcrime.securesms.providers.BlobProvider
+import org.thoughtcrime.securesms.recipients.Recipient
+import org.thoughtcrime.securesms.util.NameUtil
+import org.whispersystems.signalservice.api.util.StreamDetails
+import java.io.IOException
+
+private val TAG = Log.tag(AvatarPickerRepository::class.java)
+
+class AvatarPickerRepository(context: Context) {
+
+  private val applicationContext = context.applicationContext
+
+  fun getAvatarForSelf(): Single<Avatar> = Single.fromCallable {
+    val details: StreamDetails? = AvatarHelper.getSelfProfileAvatarStream(applicationContext)
+    if (details != null) {
+      try {
+        val bytes = StreamUtil.readFully(details.stream)
+        Avatar.Photo(
+          BlobProvider.getInstance().forData(bytes).createForSingleSessionInMemory(),
+          details.length,
+          Avatar.DatabaseId.DoNotPersist
+        )
+      } catch (e: IOException) {
+        Log.w(TAG, "Failed to read avatar!")
+        getDefaultAvatarForSelf()
+      }
+    } else {
+      getDefaultAvatarForSelf()
+    }
+  }
+
+  fun getAvatarForGroup(groupId: GroupId): Single<Avatar> = Single.fromCallable {
+    val recipient = Recipient.externalGroupExact(applicationContext, groupId)
+
+    if (AvatarHelper.hasAvatar(applicationContext, recipient.id)) {
+      try {
+        val bytes = AvatarHelper.getAvatarBytes(applicationContext, recipient.id)
+        Avatar.Photo(
+          BlobProvider.getInstance().forData(bytes).createForSingleSessionInMemory(),
+          AvatarHelper.getAvatarLength(applicationContext, recipient.id),
+          Avatar.DatabaseId.DoNotPersist
+        )
+      } catch (e: IOException) {
+        Log.w(TAG, "Failed to read group avatar!")
+        getDefaultAvatarForGroup()
+      }
+    } else {
+      getDefaultAvatarForGroup()
+    }
+  }
+
+  fun getPersistedAvatarsForSelf(): Single<List<Avatar>> = Single.fromCallable {
+    DatabaseFactory.getAvatarPickerDatabase(applicationContext).getAvatarsForSelf()
+  }
+
+  fun getPersistedAvatarsForGroup(groupId: GroupId): Single<List<Avatar>> = Single.fromCallable {
+    DatabaseFactory.getAvatarPickerDatabase(applicationContext).getAvatarsForGroup(groupId)
+  }
+
+  fun getDefaultAvatarsForSelf(): Single<List<Avatar>> = Single.fromCallable {
+    Avatars.defaultAvatarsForSelf.entries.mapIndexed { index, entry ->
+      Avatar.Vector(entry.key, color = Avatars.colors[index % Avatars.colors.size], Avatar.DatabaseId.NotSet)
+    }
+  }
+
+  fun getDefaultAvatarsForGroup(): Single<List<Avatar>> = Single.fromCallable {
+    Avatars.defaultAvatarsForGroup.entries.mapIndexed { index, entry ->
+      Avatar.Vector(entry.key, color = Avatars.colors[index % Avatars.colors.size], Avatar.DatabaseId.NotSet)
+    }
+  }
+
+  fun writeMediaToMultiSessionStorage(media: Media, onMediaWrittenToMultiSessionStorage: (Uri) -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      onMediaWrittenToMultiSessionStorage(AvatarPickerStorage.save(applicationContext, media))
+    }
+  }
+
+  fun persistAvatarForSelf(avatar: Avatar, onPersisted: (Avatar) -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      val avatarDatabase = DatabaseFactory.getAvatarPickerDatabase(applicationContext)
+      val savedAvatar = avatarDatabase.saveAvatarForSelf(avatar)
+      avatarDatabase.markUsage(savedAvatar)
+      onPersisted(savedAvatar)
+    }
+  }
+
+  fun persistAvatarForGroup(avatar: Avatar, groupId: GroupId, onPersisted: (Avatar) -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      val avatarDatabase = DatabaseFactory.getAvatarPickerDatabase(applicationContext)
+      val savedAvatar = avatarDatabase.saveAvatarForGroup(avatar, groupId)
+      avatarDatabase.markUsage(savedAvatar)
+      onPersisted(savedAvatar)
+    }
+  }
+
+  fun persistAndCreateMediaForSelf(avatar: Avatar, onSaved: (Media) -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      if (avatar.databaseId !is Avatar.DatabaseId.DoNotPersist) {
+        persistAvatarForSelf(avatar) {
+          AvatarRenderer.renderAvatar(applicationContext, avatar, onSaved, this::handleRenderFailure)
+        }
+      } else {
+        AvatarRenderer.renderAvatar(applicationContext, avatar, onSaved, this::handleRenderFailure)
+      }
+    }
+  }
+
+  fun persistAndCreateMediaForGroup(avatar: Avatar, groupId: GroupId, onSaved: (Media) -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      if (avatar.databaseId !is Avatar.DatabaseId.DoNotPersist) {
+        persistAvatarForGroup(avatar, groupId) {
+          AvatarRenderer.renderAvatar(applicationContext, avatar, onSaved, this::handleRenderFailure)
+        }
+      } else {
+        AvatarRenderer.renderAvatar(applicationContext, avatar, onSaved, this::handleRenderFailure)
+      }
+    }
+  }
+
+  fun createMediaForNewGroup(avatar: Avatar, onSaved: (Media) -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      AvatarRenderer.renderAvatar(applicationContext, avatar, onSaved, this::handleRenderFailure)
+    }
+  }
+
+  fun handleRenderFailure(throwable: Throwable?) {
+    Log.w(TAG, "Failed to render avatar.", throwable)
+    ThreadUtil.postToMain {
+      Toast.makeText(applicationContext, R.string.AvatarPickerRepository__failed_to_save_avatar, Toast.LENGTH_SHORT).show()
+    }
+  }
+
+  fun getDefaultAvatarForSelf(): Avatar {
+    val initials = NameUtil.getAbbreviation(Recipient.self().getDisplayName(applicationContext))
+
+    return if (initials.isNullOrBlank()) {
+      Avatar.getDefaultForSelf()
+    } else {
+      Avatar.Text(initials, Avatars.colors.random(), Avatar.DatabaseId.NotSet)
+    }
+  }
+
+  fun getDefaultAvatarForGroup(): Avatar {
+    return Avatar.getDefaultForGroup()
+  }
+
+  fun delete(avatar: Avatar, onDelete: () -> Unit) {
+    SignalExecutors.BOUNDED.execute {
+      if (avatar.databaseId is Avatar.DatabaseId.Saved) {
+        val avatarDatabase = DatabaseFactory.getAvatarPickerDatabase(applicationContext)
+        avatarDatabase.deleteAvatar(avatar)
+      }
+      onDelete()
+    }
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerState.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerState.kt
@@ -0,0 +1,10 @@
+package org.thoughtcrime.securesms.avatar.picker
+
+import org.thoughtcrime.securesms.avatar.Avatar
+
+data class AvatarPickerState(
+  val currentAvatar: Avatar? = null,
+  val selectableAvatars: List<Avatar> = listOf(),
+  val canSave: Boolean = false,
+  val canClear: Boolean = false
+)
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerViewModel.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/picker/AvatarPickerViewModel.kt
@@ -0,0 +1,193 @@
+package org.thoughtcrime.securesms.avatar.picker
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.ViewModelProvider
+import io.reactivex.rxjava3.core.Single
+import io.reactivex.rxjava3.disposables.CompositeDisposable
+import io.reactivex.rxjava3.schedulers.Schedulers
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.groups.GroupId
+import org.thoughtcrime.securesms.mediasend.Media
+import org.thoughtcrime.securesms.util.livedata.Store
+
+sealed class AvatarPickerViewModel(private val repository: AvatarPickerRepository) : ViewModel() {
+
+  private val disposables = CompositeDisposable()
+  private val store = Store(AvatarPickerState())
+
+  val state: LiveData<AvatarPickerState> = store.stateLiveData
+
+  protected abstract fun getAvatar(): Single<Avatar>
+  protected abstract fun getDefaultAvatarFromRepository(): Avatar
+  protected abstract fun getPersistedAvatars(): Single<List<Avatar>>
+  protected abstract fun getDefaultAvatars(): Single<List<Avatar>>
+  protected abstract fun persistAvatar(avatar: Avatar, onPersisted: (Avatar) -> Unit)
+  protected abstract fun persistAndCreateMedia(avatar: Avatar, onSaved: (Media) -> Unit)
+
+  fun delete(avatar: Avatar) {
+    repository.delete(avatar) {
+      refreshSelectableAvatars()
+    }
+  }
+
+  fun clear() {
+    store.update {
+      val avatar = getDefaultAvatarFromRepository()
+      it.copy(currentAvatar = avatar, canSave = isSaveable(avatar), canClear = false)
+    }
+  }
+
+  fun save(onSaved: (Media) -> Unit) {
+    val avatar = store.state.currentAvatar ?: throw AssertionError()
+    persistAndCreateMedia(avatar, onSaved)
+  }
+
+  fun onAvatarSelectedFromGrid(avatar: Avatar) {
+    store.update { it.copy(currentAvatar = avatar, canSave = isSaveable(avatar), canClear = true) }
+  }
+
+  fun onAvatarEditCompleted(avatar: Avatar) {
+    persistAvatar(avatar) { saved ->
+      store.update { it.copy(currentAvatar = saved, canSave = isSaveable(saved), canClear = true) }
+      refreshSelectableAvatars()
+    }
+  }
+
+  fun onAvatarPhotoSelectionCompleted(media: Media) {
+    repository.writeMediaToMultiSessionStorage(media) { multiSessionUri ->
+      persistAvatar(Avatar.Photo(multiSessionUri, media.size, Avatar.DatabaseId.NotSet)) { avatar ->
+        store.update { it.copy(currentAvatar = avatar, canSave = isSaveable(avatar), canClear = true) }
+        refreshSelectableAvatars()
+      }
+    }
+  }
+
+  protected fun refreshAvatar() {
+    disposables.add(
+      getAvatar().subscribeOn(Schedulers.io()).subscribe { avatar ->
+        store.update { it.copy(currentAvatar = avatar, canSave = isSaveable(avatar), canClear = !isSaveable(avatar)) }
+      }
+    )
+  }
+
+  protected fun refreshSelectableAvatars() {
+    disposables.add(
+      Single.zip(getPersistedAvatars(), getDefaultAvatars()) { custom, def ->
+        val customKeys = custom.filterIsInstance(Avatar.Vector::class.java).map { it.key }
+        custom + def.filterNot {
+          it is Avatar.Vector && customKeys.contains(it.key)
+        }
+      }.subscribeOn(Schedulers.io()).subscribe { avatars ->
+        store.update { it.copy(selectableAvatars = avatars) }
+      }
+    )
+  }
+
+  private fun isSaveable(avatar: Avatar) = !(avatar is Avatar.Photo && avatar.databaseId == Avatar.DatabaseId.DoNotPersist)
+
+  override fun onCleared() {
+    disposables.dispose()
+  }
+
+  private class SelfAvatarPickerViewModel(private val repository: AvatarPickerRepository) : AvatarPickerViewModel(repository) {
+
+    init {
+      refreshAvatar()
+      refreshSelectableAvatars()
+    }
+
+    override fun getAvatar(): Single<Avatar> = repository.getAvatarForSelf()
+    override fun getDefaultAvatarFromRepository(): Avatar = repository.getDefaultAvatarForSelf()
+    override fun getPersistedAvatars(): Single<List<Avatar>> = repository.getPersistedAvatarsForSelf()
+    override fun getDefaultAvatars(): Single<List<Avatar>> = repository.getDefaultAvatarsForSelf()
+
+    override fun persistAvatar(avatar: Avatar, onPersisted: (Avatar) -> Unit) {
+      repository.persistAvatarForSelf(avatar, onPersisted)
+    }
+
+    override fun persistAndCreateMedia(avatar: Avatar, onSaved: (Media) -> Unit) {
+      repository.persistAndCreateMediaForSelf(avatar, onSaved)
+    }
+  }
+
+  private class GroupAvatarPickerViewModel(
+    private val groupId: GroupId,
+    private val repository: AvatarPickerRepository,
+    groupAvatarMedia: Media?
+  ) : AvatarPickerViewModel(repository) {
+
+    private val initialAvatar: Avatar? = groupAvatarMedia?.let { Avatar.Photo(it.uri, it.size, Avatar.DatabaseId.DoNotPersist) }
+
+    init {
+      refreshAvatar()
+      refreshSelectableAvatars()
+    }
+
+    override fun getAvatar(): Single<Avatar> {
+      return if (initialAvatar != null) {
+        Single.just(initialAvatar)
+      } else {
+        repository.getAvatarForGroup(groupId)
+      }
+    }
+
+    override fun getDefaultAvatarFromRepository(): Avatar = repository.getDefaultAvatarForGroup()
+    override fun getPersistedAvatars(): Single<List<Avatar>> = repository.getPersistedAvatarsForGroup(groupId)
+    override fun getDefaultAvatars(): Single<List<Avatar>> = repository.getDefaultAvatarsForGroup()
+
+    override fun persistAvatar(avatar: Avatar, onPersisted: (Avatar) -> Unit) {
+      repository.persistAvatarForGroup(avatar, groupId, onPersisted)
+    }
+
+    override fun persistAndCreateMedia(avatar: Avatar, onSaved: (Media) -> Unit) {
+      repository.persistAndCreateMediaForGroup(avatar, groupId, onSaved)
+    }
+  }
+
+  private class NewGroupAvatarPickerViewModel(
+    private val repository: AvatarPickerRepository,
+    initialMedia: Media?
+  ) : AvatarPickerViewModel(repository) {
+
+    private val initialAvatar: Avatar? = initialMedia?.let { Avatar.Photo(it.uri, it.size, Avatar.DatabaseId.DoNotPersist) }
+
+    init {
+      refreshAvatar()
+      refreshSelectableAvatars()
+    }
+
+    override fun getAvatar(): Single<Avatar> {
+      return if (initialAvatar != null) {
+        Single.just(initialAvatar)
+      } else {
+        Single.just(getDefaultAvatarFromRepository())
+      }
+    }
+
+    override fun getDefaultAvatarFromRepository(): Avatar = repository.getDefaultAvatarForGroup()
+    override fun getPersistedAvatars(): Single<List<Avatar>> = Single.just(listOf())
+    override fun getDefaultAvatars(): Single<List<Avatar>> = repository.getDefaultAvatarsForGroup()
+    override fun persistAvatar(avatar: Avatar, onPersisted: (Avatar) -> Unit) = onPersisted(avatar)
+    override fun persistAndCreateMedia(avatar: Avatar, onSaved: (Media) -> Unit) = repository.createMediaForNewGroup(avatar, onSaved)
+  }
+
+  class Factory(
+    private val repository: AvatarPickerRepository,
+    private val groupId: GroupId?,
+    private val isNewGroup: Boolean,
+    private val groupAvatarMedia: Media?
+  ) : ViewModelProvider.Factory {
+    override fun <T : ViewModel?> create(modelClass: Class<T>): T {
+      val viewModel = if (groupId == null && !isNewGroup) {
+        SelfAvatarPickerViewModel(repository)
+      } else if (groupId == null) {
+        NewGroupAvatarPickerViewModel(repository, groupAvatarMedia)
+      } else {
+        GroupAvatarPickerViewModel(groupId, repository, groupAvatarMedia)
+      }
+
+      return requireNotNull(modelClass.cast(viewModel))
+    }
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/text/TextAvatarCreationFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/text/TextAvatarCreationFragment.kt
@@ -0,0 +1,148 @@
+package org.thoughtcrime.securesms.avatar.text
+
+import android.os.Bundle
+import android.view.View
+import android.view.inputmethod.EditorInfo
+import android.widget.EditText
+import androidx.appcompat.widget.Toolbar
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.constraintlayout.widget.ConstraintSet
+import androidx.core.widget.doAfterTextChanged
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.setFragmentResult
+import androidx.fragment.app.viewModels
+import androidx.navigation.Navigation
+import androidx.recyclerview.widget.RecyclerView
+import androidx.transition.TransitionManager
+import com.google.android.material.tabs.TabLayout
+import org.signal.core.util.EditTextUtil
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.AvatarBundler
+import org.thoughtcrime.securesms.avatar.AvatarColorItem
+import org.thoughtcrime.securesms.avatar.Avatars
+import org.thoughtcrime.securesms.avatar.picker.AvatarPickerItem
+import org.thoughtcrime.securesms.components.BoldSelectionTabItem
+import org.thoughtcrime.securesms.components.ControllableTabLayout
+import org.thoughtcrime.securesms.components.recyclerview.GridDividerDecoration
+import org.thoughtcrime.securesms.util.MappingAdapter
+import org.thoughtcrime.securesms.util.ViewUtil
+
+/**
+ * Fragment to create an avatar based off of a Vector or Text (via a pager)
+ */
+class TextAvatarCreationFragment : Fragment(R.layout.text_avatar_creation_fragment_hidden_recycler) {
+
+  private val viewModel: TextAvatarCreationViewModel by viewModels(factoryProducer = this::createFactory)
+
+  private lateinit var textInput: EditText
+  private lateinit var recycler: RecyclerView
+
+  private val withRecyclerSet = ConstraintSet()
+  private val withoutRecyclerSet = ConstraintSet()
+
+  private fun createFactory(): TextAvatarCreationViewModel.Factory {
+    val args = TextAvatarCreationFragmentArgs.fromBundle(requireArguments())
+    val textBundle = args.textAvatar
+    val text = if (textBundle != null) {
+      AvatarBundler.extractText(textBundle)
+    } else {
+      Avatar.Text("", Avatars.colors.random(), Avatar.DatabaseId.NotSet)
+    }
+
+    return TextAvatarCreationViewModel.Factory(text)
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    val toolbar: Toolbar = view.findViewById(R.id.text_avatar_creation_toolbar)
+    val tabLayout: ControllableTabLayout = view.findViewById(R.id.text_avatar_creation_tabs)
+    val doneButton: View = view.findViewById(R.id.text_avatar_creation_done)
+
+    withRecyclerSet.load(requireContext(), R.layout.text_avatar_creation_fragment)
+    withoutRecyclerSet.load(requireContext(), R.layout.text_avatar_creation_fragment_hidden_recycler)
+
+    recycler = view.findViewById(R.id.text_avatar_creation_recycler)
+    textInput = view.findViewById(R.id.avatar_picker_item_text)
+
+    toolbar.setNavigationOnClickListener { Navigation.findNavController(it).popBackStack() }
+    BoldSelectionTabItem.registerListeners(tabLayout)
+
+    val onTabSelectedListener = OnTabSelectedListener()
+    tabLayout.addOnTabSelectedListener(onTabSelectedListener)
+    onTabSelectedListener.onTabSelected(requireNotNull(tabLayout.getTabAt(tabLayout.selectedTabPosition)))
+
+    val adapter = MappingAdapter()
+    recycler.addItemDecoration(GridDividerDecoration(4, ViewUtil.dpToPx(16)))
+    AvatarColorItem.registerViewHolder(adapter) {
+      viewModel.setColor(it)
+    }
+    recycler.adapter = adapter
+
+    val viewHolder = AvatarPickerItem.ViewHolder(view)
+    viewModel.state.observe(viewLifecycleOwner) { state ->
+      EditTextUtil.setCursorColor(textInput, state.currentAvatar.color.foregroundColor)
+
+      val hadText = textInput.length() > 0
+      viewHolder.bind(AvatarPickerItem.Model(state.currentAvatar, false))
+      if (!hadText) {
+        textInput.setSelection(textInput.length())
+      }
+
+      adapter.submitList(state.colors().map { AvatarColorItem.Model(it) })
+    }
+
+    EditTextUtil.addGraphemeClusterLimitFilter(textInput, 3)
+    textInput.doAfterTextChanged {
+      if (it != null) {
+        viewModel.setText(it.toString())
+      }
+    }
+
+    doneButton.setOnClickListener { v ->
+      setFragmentResult(REQUEST_KEY_TEXT, AvatarBundler.bundleText(viewModel.getCurrentAvatar()))
+      Navigation.findNavController(v).popBackStack()
+    }
+
+    textInput.setOnEditorActionListener { v, actionId, event ->
+      if (actionId == EditorInfo.IME_ACTION_DONE) {
+        doneButton.performClick()
+        true
+      } else {
+        false
+      }
+    }
+  }
+
+  private inner class OnTabSelectedListener : TabLayout.OnTabSelectedListener {
+    override fun onTabSelected(tab: TabLayout.Tab) {
+      when (tab.position) {
+        0 -> {
+          textInput.isEnabled = true
+          ViewUtil.focusAndShowKeyboard(textInput)
+
+          val constraintLayout = requireView() as ConstraintLayout
+          TransitionManager.endTransitions(constraintLayout)
+          withoutRecyclerSet.applyTo(constraintLayout)
+          TransitionManager.beginDelayedTransition(constraintLayout)
+          textInput.setSelection(textInput.length())
+        }
+        1 -> {
+          textInput.isEnabled = false
+          ViewUtil.hideKeyboard(requireContext(), textInput)
+
+          val constraintLayout = requireView() as ConstraintLayout
+          TransitionManager.endTransitions(constraintLayout)
+          withRecyclerSet.applyTo(constraintLayout)
+          TransitionManager.beginDelayedTransition(constraintLayout)
+        }
+      }
+    }
+
+    override fun onTabUnselected(tab: TabLayout.Tab?) = Unit
+    override fun onTabReselected(tab: TabLayout.Tab?) = Unit
+  }
+
+  companion object {
+    const val REQUEST_KEY_TEXT = "org.thoughtcrime.securesms.avatar.text.TEXT"
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/text/TextAvatarCreationState.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/text/TextAvatarCreationState.kt
@@ -0,0 +1,11 @@
+package org.thoughtcrime.securesms.avatar.text
+
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.AvatarColorItem
+import org.thoughtcrime.securesms.avatar.Avatars
+
+data class TextAvatarCreationState(
+  val currentAvatar: Avatar.Text,
+) {
+  fun colors(): List<AvatarColorItem> = Avatars.colors.map { AvatarColorItem(it, currentAvatar.color == it) }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/text/TextAvatarCreationViewModel.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/text/TextAvatarCreationViewModel.kt
@@ -0,0 +1,33 @@
+package org.thoughtcrime.securesms.avatar.text
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.ViewModelProvider
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.Avatars
+import org.thoughtcrime.securesms.util.livedata.Store
+
+class TextAvatarCreationViewModel(initialText: Avatar.Text) : ViewModel() {
+
+  private val store = Store(TextAvatarCreationState(initialText))
+
+  val state: LiveData<TextAvatarCreationState> = store.stateLiveData
+
+  fun setColor(colorPair: Avatars.ColorPair) {
+    store.update { it.copy(currentAvatar = it.currentAvatar.copy(color = colorPair)) }
+  }
+
+  fun setText(text: String) {
+    store.update { it.copy(currentAvatar = it.currentAvatar.copy(text = text)) }
+  }
+
+  fun getCurrentAvatar(): Avatar.Text {
+    return store.state.currentAvatar
+  }
+
+  class Factory(private val initialText: Avatar.Text) : ViewModelProvider.Factory {
+    override fun <T : ViewModel?> create(modelClass: Class<T>): T {
+      return requireNotNull(modelClass.cast(TextAvatarCreationViewModel(initialText)))
+    }
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/vector/VectorAvatarCreationFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/vector/VectorAvatarCreationFragment.kt
@@ -0,0 +1,64 @@
+package org.thoughtcrime.securesms.avatar.vector
+
+import android.os.Bundle
+import android.view.View
+import android.widget.ImageView
+import androidx.appcompat.widget.Toolbar
+import androidx.fragment.app.Fragment
+import androidx.fragment.app.setFragmentResult
+import androidx.fragment.app.viewModels
+import androidx.navigation.Navigation
+import androidx.recyclerview.widget.RecyclerView
+import com.airbnb.lottie.SimpleColorFilter
+import org.thoughtcrime.securesms.R
+import org.thoughtcrime.securesms.avatar.AvatarBundler
+import org.thoughtcrime.securesms.avatar.AvatarColorItem
+import org.thoughtcrime.securesms.avatar.Avatars
+import org.thoughtcrime.securesms.components.recyclerview.GridDividerDecoration
+import org.thoughtcrime.securesms.util.MappingAdapter
+import org.thoughtcrime.securesms.util.ViewUtil
+
+/**
+ * Fragment to create an avatar based off a default vector.
+ */
+class VectorAvatarCreationFragment : Fragment(R.layout.vector_avatar_creation_fragment) {
+
+  private val viewModel: VectorAvatarCreationViewModel by viewModels(factoryProducer = this::createFactory)
+
+  private fun createFactory(): VectorAvatarCreationViewModel.Factory {
+    val args = VectorAvatarCreationFragmentArgs.fromBundle(requireArguments())
+    val vectorBundle = args.vectorAvatar
+
+    return VectorAvatarCreationViewModel.Factory(AvatarBundler.extractVector(vectorBundle))
+  }
+
+  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+    val toolbar: Toolbar = view.findViewById(R.id.vector_avatar_creation_toolbar)
+    val recycler: RecyclerView = view.findViewById(R.id.vector_avatar_creation_recycler)
+    val doneButton: View = view.findViewById(R.id.vector_avatar_creation_done)
+    val preview: ImageView = view.findViewById(R.id.vector_avatar_creation_image)
+
+    val adapter = MappingAdapter()
+    recycler.adapter = adapter
+    recycler.addItemDecoration(GridDividerDecoration(4, ViewUtil.dpToPx(16)))
+    AvatarColorItem.registerViewHolder(adapter) {
+      viewModel.setColor(it)
+    }
+
+    viewModel.state.observe(viewLifecycleOwner) { state ->
+      preview.background.colorFilter = SimpleColorFilter(state.currentAvatar.color.backgroundColor)
+      preview.setImageResource(requireNotNull(Avatars.getDrawableResource(state.currentAvatar.key)))
+      adapter.submitList(state.colors().map { AvatarColorItem.Model(it) })
+    }
+
+    toolbar.setNavigationOnClickListener { Navigation.findNavController(view).popBackStack() }
+    doneButton.setOnClickListener {
+      setFragmentResult(REQUEST_KEY_VECTOR, AvatarBundler.bundleVector(viewModel.getCurrentAvatar()))
+      Navigation.findNavController(it).popBackStack()
+    }
+  }
+
+  companion object {
+    const val REQUEST_KEY_VECTOR = "org.thoughtcrime.securesms.avatar.text.VECTOR"
+  }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/vector/VectorAvatarCreationState.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/vector/VectorAvatarCreationState.kt
@@ -0,0 +1,11 @@
+package org.thoughtcrime.securesms.avatar.vector
+
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.AvatarColorItem
+import org.thoughtcrime.securesms.avatar.Avatars
+
+data class VectorAvatarCreationState(
+  val currentAvatar: Avatar.Vector,
+) {
+  fun colors(): List<AvatarColorItem> = Avatars.colors.map { AvatarColorItem(it, currentAvatar.color == it) }
+}
--- a/app/src/main/java/org/thoughtcrime/securesms/avatar/vector/VectorAvatarCreationViewModel.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/avatar/vector/VectorAvatarCreationViewModel.kt
@@ -0,0 +1,27 @@
+package org.thoughtcrime.securesms.avatar.vector
+
+import androidx.lifecycle.LiveData
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.ViewModelProvider
+import org.thoughtcrime.securesms.avatar.Avatar
+import org.thoughtcrime.securesms.avatar.Avatars
+import org.thoughtcrime.securesms.util.livedata.Store
+
+class VectorAvatarCreationViewModel(initialAvatar: Avatar.Vector) : ViewModel() {
+
+  private val store = Store(VectorAvatarCreationState(initialAvatar))
+
+  val state: LiveData<VectorAvatarCreationState> = store.stateLiveData
+
+  fun setColor(colorPair: Avatars.ColorPair) {
+    store.update { it.copy(currentAvatar = it.currentAvatar.copy(color = colorPair)) }
+  }
+
+  fun getCurrentAvatar() = store.state.currentAvatar
+
+  class Factory(private val initialAvatar: Avatar.Vector) : ViewModelProvider.Factory {
+    override fun <T : ViewModel?> create(modelClass: Class<T>): T {
+      return requireNotNull(modelClass.cast(VectorAvatarCreationViewModel(initialAvatar)))
+    }
+  }
+}