Circular Text Views like Google Messenger

Question

I would like to display letters inside of circles exactly the way Google Messenger does it, like this:

I tried using this drawable file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
android:shape="oval">
<corners android:radius="10dip"/>
<stroke android:color="@color/primary_color" android:width="2dip"/>
<solid android:color="@color/primary_color"/>

as the background for a text view, but that went disastrously wrong. Any ideas?

Answer 1

You was almost close to answer.

Create a drawable resources file under drawable folder: circular_textview.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#4286F5"/>

Set this drawable as your textView's background.

<TextView
    android:layout_width="55dp"
    android:layout_height="55dp"
    android:text="C"
    android:fontFamily="sans-serif-thin"
    android:textColor="#FFF"
    android:textSize="32sp"
    android:gravity="center"
    android:id="@+id/textView"
    android:background="@drawable/circular_textview"/>

That's it

Answer 2

This is what I came up with.

I used TextViews with a layer-list background. The background fits the size of the view it's loaded in, so in order to have a circle you can force the TextView to have the same width and height.

<TextView
    android:id="@+id/view"
    android:layout_width="65dp"
    android:layout_height="65dp"
    android:gravity="center"
    android:textSize="40dp"
    android:fontFamily="sans-serif-thin"
    android:background="@drawable/background"
    android:text="A"/>

I have hardcoded text, size, width and height, but you could manage them at runtime. fontFamily="sans-serif-thin" lets you use, if available, the thin typeface which might be better. The layer-list:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="1dp">
        <shape android:shape="oval" >
            <solid android:color="#321a1a1a"/>
        </shape>
    </item>
    <item
        android:top="1dp"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp">
        <shape android:shape="oval" >
            <solid android:color="@color/red_700"/>
        </shape>
    </item>
</layer-list>

First item is to get the fake shadow shown, but you can get rid of that. Also, you can remove its offset android:top="1dp". This way you will have a circular 1dp ring outside (while now shadow is cast only at the bottom and in both sides).

Again, I have hardcoded colors but you can change to what you want.