Circular text presentations like Google Messenger

Question

I would like to display the letters inside the circles exactly as Google Messenger does, for example:

I tried using this paintable 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 a background for a text view, but it went disastrous. Any ideas?

Answer 1

You answered almost closely.

Create a drawable file in a folder with the ability to select: circle_textview.xml

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

Set this drawing as the textView 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"/> 

What he

Answer 2

Here is what I came up with.

I used a TextView with a layer-list background. The background is the size of the loaded image, so in order to have a circle, you can force the TextView 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 hard text, size, width and height, but you can control them at runtime. fontFamily="sans-serif-thin" allows you to use, if possible, a thin font that can be better. List of layers:

 <?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> 

The first element is to display a fake shadow, but you can get rid of it. Alternatively, you can remove its offset android:top="1dp" . Thus, you will have a 1dp circular ring on the outside (while now the shadow fills only at the bottom and on both sides).

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

Answer 3

Try it like this. Path res / drawable / oval.xml:

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF" android:angle="45"/> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <corners android:radius="8dp" /> </shape> 

This code gets your textual representation and applies the form as a background for it:

 Resources res = getResources(); Drawable shape = res. getDrawable(R.drawable.gradient_box); TextView tv = (TextView)findViewByID(R.id.textview); tv.setBackground(shape); 

From: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Answer 4

Later, but no less. I would advise that I used Amul Hare in one of my projects.

https://github.com/amulyakhare/TextDrawable