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>

score 6 · Answer 1 · answered Jan 06 '18 at 12:26

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.

not worthy for me it i pass size it will not increae bubble size — Dens, May 23 '20 at 05:05

score 4 · Accepted Answer · edited Dec 26 '18 at 23:17

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

Instead of having two views (`TextView` + `ImageView`) you can just have one `TextView` and add the drawable shape as `background` to the textview. — Ahmad Melegy, Jul 05 '20 at 15:20

score 0 · Answer 3 · answered Jan 06 '18 at 12:29

0

You need to create a circle shape.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
<solid android:color="@color/base30"/>

For better effects(shadow and appearance) you can use TextDrawable.

answered Jan 06 '18 at 12:29

ADM

20,406
11
52
83

How to make initials icon like in Gmail?

3 Answers3