Letter avatar like Gmail Android best practice

Question

What is the best way of generating (in code) a letter avatar like in Gmail? Here you have an example https://drive.google.com/folderview?id=0B0Fhz5fDg1njSmpUakhhZllEWHM&

Answer 1

Judging from the image you provided above, this can be done using a custom listview. The avatar you are looking for should be an imageview in your custom layout and inflated into the listview. I suggest you start here. The gravar can be an image drawable in your resource folder,

http://www.ezzylearning.com/tutorial.aspx?tid=1763429

Answer 2

This is what I've used once.. please try and modify according to your requirements.

    public class LetterAvatar extends ColorDrawable {
Paint               paint   = new Paint();
Rect                bounds  = new Rect();

String              pLetters;
private float       ONE_DP  = 0.0f;
private Resources   pResources;
private int         pPadding;
int                 pSize   = 0;
float               pMesuredTextWidth;

int                 pBoundsTextwidth;
int                 pBoundsTextHeight;

public LetterAvatar (Context context, int color, String letter, int paddingInDp) {
    super(color);
    this.pLetters = letter;
    this.pResources = context.getResources();
    ONE_DP = 1 * pResources.getDisplayMetrics().density;
    this.pPadding = Math.round(paddingInDp * ONE_DP);
}

@Override
public void draw(Canvas canvas) {
    super.draw(canvas);
    paint.setAntiAlias(true);



    do {
        paint.setTextSize(++pSize);
        paint.getTextBounds(pLetters, 0, pLetters.length(), bounds);

    } while ((bounds.height() < (canvas.getHeight() - pPadding)) && (paint.measureText(pLetters) < (canvas.getWidth() - pPadding)));

    paint.setTextSize(pSize); 
    pMesuredTextWidth = paint.measureText(pLetters);
    pBoundsTextHeight = bounds.height();

    float xOffset = ((canvas.getWidth() - pMesuredTextWidth) / 2);
    float yOffset = (int) (pBoundsTextHeight + (canvas.getHeight() - pBoundsTextHeight) / 2);
    paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
    paint.setColor(0xffffffff);
    canvas.drawText(pLetters, xOffset, yOffset, paint);
}
    }

then set new LetterAvatar(context, colorCode, letters, padding) in your imageview.setdrawable

Answer 3

Below is a class that generates an Image avatar both a circle and Square. Source is here

    class AvatarGenerator {
    companion object {
    lateinit var uiContext: Context
    var texSize = 0F

    fun avatarImage(context: Context, size: Int, shape: Int, name: String): BitmapDrawable {
      uiContext = context
      val width = size
      val hieght = size

      texSize = calTextSize(size)
      val label = firstCharacter(name)
      val textPaint = textPainter()
      val painter = painter()
      val areaRect = Rect(0, 0, width, width)

      if (shape == 0) {
        painter.color = RandomColors().getColor()
      } else {
        painter.color = Color.TRANSPARENT
      }

      val bitmap = Bitmap.createBitmap(width, width, ARGB_8888)
      val canvas = Canvas(bitmap)
      canvas.drawRect(areaRect, painter)

      //reset painter
      if (shape == 0) {
        painter.color = Color.TRANSPARENT
      } else {
        painter.color = RandomColors().getColor()
      }

      val bounds = RectF(areaRect)
      bounds.right = textPaint.measureText(label, 0, 1)
      bounds.bottom = textPaint.descent() - textPaint.ascent()

      bounds.left += (areaRect.width() - bounds.right) / 2.0f
      bounds.top += (areaRect.height() - bounds.bottom) / 2.0f

      canvas.drawCircle(width.toFloat() / 2, hieght.toFloat() / 2, width.toFloat() / 2, painter)
      canvas.drawText(label, bounds.left, bounds.top - textPaint.ascent(), textPaint)
      return BitmapDrawable(uiContext.resources, bitmap)

    }

    private fun firstCharacter(name: String): String {
      return name.first().toString().toUpperCase()
    }

    private fun textPainter(): TextPaint {
      val textPaint = TextPaint()
      textPaint.textSize = texSize * uiContext.resources.displayMetrics.scaledDensity
      textPaint.color = Color.WHITE
      return textPaint
    }

    private fun painter(): Paint {
      return Paint()
    }

    private fun calTextSize(size: Int): Float {
      return (size / 3.125).toFloat()
    }
  }
}

You can then pass context, a string, size, and the shape to generate 1/0

    imageView.setImageDrawable(
      AvatarGenerator.avatarImage(
        this,
        200,
        1,
        "Skyways"
      )

Answer 4

If you are asking only about avatar on the left in that ListView.

Use ImageView, and if you have user avatar - put it there, if you don't have avatar - use .drawText("R") function to draw canvas and put it in ImageView using setImageDrawable.