Colored boxed with letters a la Gmail

Question

I wondered how they are generated and if they are generated everytime I open the app or are stored (cached).

It\'s just a canvas (programmatically) or they use XML?

Answer 1

are generated everytime I open the app or are stored (cached)

Little column A, little column B. There is a small cache used, but it's not what you're thinking. Each tile can be split into 4 pieces, the cache is used to retrieve a particular position. As far as the background goes, the colors are mapped using String.hashCode to ensure the same email address (or key) will always be mapped to the same color. But the actual letter is drawn using Canvas.drawText.

Here's an example:

/**
 * Used to create a {@link Bitmap} that contains a letter used in the English
 * alphabet or digit, if there is no letter or digit available, a default image
 * is shown instead
 */
public class LetterTileProvider {

    /** The number of available tile colors (see R.array.letter_tile_colors) */
    private static final int NUM_OF_TILE_COLORS = 8;

    /** The {@link TextPaint} used to draw the letter onto the tile */
    private final TextPaint mPaint = new TextPaint();
    /** The bounds that enclose the letter */
    private final Rect mBounds = new Rect();
    /** The {@link Canvas} to draw on */
    private final Canvas mCanvas = new Canvas();
    /** The first char of the name being displayed */
    private final char[] mFirstChar = new char[1];

    /** The background colors of the tile */
    private final TypedArray mColors;
    /** The font size used to display the letter */
    private final int mTileLetterFontSize;
    /** The default image to display */
    private final Bitmap mDefaultBitmap;

    /**
     * Constructor for <code>LetterTileProvider</code>
     * 
     * @param context The {@link Context} to use
     */
    public LetterTileProvider(Context context) {
        final Resources res = context.getResources();

        mPaint.setTypeface(Typeface.create("sans-serif-light", Typeface.NORMAL));
        mPaint.setColor(Color.WHITE);
        mPaint.setTextAlign(Align.CENTER);
        mPaint.setAntiAlias(true);

        mColors = res.obtainTypedArray(R.array.letter_tile_colors);
        mTileLetterFontSize = res.getDimensionPixelSize(R.dimen.tile_letter_font_size);

        mDefaultBitmap = BitmapFactory.decodeResource(res, android.R.drawable.sym_def_app_icon);
    }

    /**
     * @param displayName The name used to create the letter for the tile
     * @param key The key used to generate the background color for the tile
     * @param width The desired width of the tile
     * @param height The desired height of the tile
     * @return A {@link Bitmap} that contains a letter used in the English
     *         alphabet or digit, if there is no letter or digit available, a
     *         default image is shown instead
     */
    public Bitmap getLetterTile(String displayName, String key, int width, int height) {
        final Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        final char firstChar = displayName.charAt(0);

        final Canvas c = mCanvas;
        c.setBitmap(bitmap);
        c.drawColor(pickColor(key));

        if (isEnglishLetterOrDigit(firstChar)) {
            mFirstChar[0] = Character.toUpperCase(firstChar);
            mPaint.setTextSize(mTileLetterFontSize);
            mPaint.getTextBounds(mFirstChar, 0, 1, mBounds);
            c.drawText(mFirstChar, 0, 1, 0 + width / 2, 0 + height / 2
                    + (mBounds.bottom - mBounds.top) / 2, mPaint);
        } else {
            c.drawBitmap(mDefaultBitmap, 0, 0, null);
        }
        return bitmap;
    }

    /**
     * @param c The char to check
     * @return True if <code>c</code> is in the English alphabet or is a digit,
     *         false otherwise
     */
    private static boolean isEnglishLetterOrDigit(char c) {
        return 'A' <= c && c <= 'Z' || 'a' <= c && c <= 'z' || '0' <= c && c <= '9';
    }

    /**
     * @param key The key used to generate the tile color
     * @return A new or previously chosen color for <code>key</code> used as the
     *         tile background color
     */
    private int pickColor(String key) {
        // String.hashCode() is not supposed to change across java versions, so
        // this should guarantee the same key always maps to the same color
        final int color = Math.abs(key.hashCode()) % NUM_OF_TILE_COLORS;
        try {
            return mColors.getColor(color, Color.BLACK);
        } finally {
            mColors.recycle();
        }
    }

}

Here are the default colors and text size:

<!-- All of the possible tile background colors -->
<array name="letter_tile_colors">
    <item>#f16364</item>
    <item>#f58559</item>
    <item>#f9a43e</item>
    <item>#e4c62e</item>
    <item>#67bf74</item>
    <item>#59a2be</item>
    <item>#2093cd</item>
    <item>#ad62a7</item>
</array>

<!-- The default letter tile text size -->
<dimen name="tile_letter_font_size">33sp</dimen>
<!-- The deafult tile size -->
<dimen name="letter_tile_size">64dp</dimen>

Implementation

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    final Resources res = getResources();
    final int tileSize = res.getDimensionPixelSize(R.dimen.letter_tile_size);

    final LetterTileProvider tileProvider = new LetterTileProvider(this);
    final Bitmap letterTile = tileProvider.getLetterTile("name", "key", tileSize, tileSize);

    getActionBar().setIcon(new BitmapDrawable(getResources(), letterTile));
}

Results of "T", "E", "S", "T":

Answer 2

Building up on @adneal's response, if we want to generate circular icons we can modify the getLetterTile function as follows:

public Bitmap getLetterTile(String displayName, String key, int width, int height, boolean round) {
    final Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    final char firstChar = displayName.charAt(0);

    final Canvas c = mCanvas;
    c.setBitmap(bitmap);

    if (round) {
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(pickColor(key));
        c.drawCircle(width/2, height/2 , width/2, paint);
    } else {
        c.drawColor(pickColor(key));
    }

    if (isEnglishLetterOrDigit(firstChar)) {
        mFirstChar[0] = Character.toUpperCase(firstChar);
        mPaint.setTextSize(mTileLetterFontSize);
        mPaint.getTextBounds(mFirstChar, 0, 1, mBounds);
        c.drawText(mFirstChar, 0, 1, 0 + width / 2, 0 + height / 2
                + (mBounds.bottom - mBounds.top) / 2, mPaint);
    } else {
        c.drawBitmap(mDefaultBitmap, 0, 0, null);
    }
    return bitmap;
}