How to make initials icon like in Gmail?

Question

What I want to do:

What I have:

I want to make a circular icon with initials in it. In my scenario initials can have one or two letters. Like you can see my solution work fine for two letters but not to one. How can I solve this for both cases?

There is my code from the XML file:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textSize="20dp"
    android:textAllCaps="true"
    android:textColor="@color/white"
    android:background="@drawable/shape_rounded_blue_button"
    android:layout_gravity="center_horizontal"
    android:gravity="center" 
    local:MvxBind="Text Initials"/>

And there is shape_rounded_blue_button:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/blue"/>
<corners android:radius="30dp" />
</shape>

Answer 1

As I wanted to implement the same thing, I made some research on GitHub and found this library: https://github.com/amulyakhare/TextDrawable

It does exactly what you want and has some neat features as auto-coloring. You can use it with an ImageView and create a drawable, e.g. like this:

val drawable = TextDrawable.builder()
        .beginConfig()
        .width(bubbleSize)
        .height(bubbleSize)
        .endConfig()
        .buildRound("FH", MATERIAL.getColor("FH"))
theImageView.setImageDrawable(drawable)

And that looks like this:

Your text will automatically be centered within the bubble, so it's no problem to have one or two characters.

Answer 2

You need to create a drawable resource file under res>drawable and save it as bg_circle.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"> 
        <solid android:color="#424242"/> 
        <size android:width="120dp" android:height="120dp"/>
</shape> 

Now make icon_container in your layout.xml file as:

<RelativeLayout
    android:id="@+id/icon_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="@dimen/icon_width_height"
        android:layout_height="@dimen/icon_width_height"
        android:src="@drawable/bg_circle" /> 
    <TextView 
        android:id="@+id/icon_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:textSize="@dimen/icon_text" />
</RelativeLayout>

For complete code implementation visit Implementing Gmail like icon with text and random colors