How to put an edge on an Android Textview

Question

Hi, I’m having difficulty in setting an edge in Textview Android.

I tried so:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
   android:shape="oval" >
  <solid android:color="@color/primary" />
  <stroke android:width="1dip" android:color="@color/primary"/>
  <padding android:left="20dp" android:top="20dp" android:right="20dp" 
   android:bottom="20dp" />
</shape>

But to no avail...

I need it to look like the image below:

Answer 1

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;

public class CircularTextView extends TextView
{
private float strokeWidth;
int strokeColor,solidColor;

public CircularTextView(Context context) {
    super(context);
}

public CircularTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CircularTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}


@Override
public void draw(Canvas canvas) {

    Paint circlePaint = new Paint();
    circlePaint.setColor(solidColor);
    circlePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    Paint strokePaint = new Paint();
    strokePaint.setColor(strokeColor);
    strokePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    int  h = this.getHeight();
    int  w = this.getWidth();

    int diameter = ((h > w) ? h : w);
    int radius = diameter/2;

    this.setHeight(diameter);
    this.setWidth(diameter);

    canvas.drawCircle(diameter / 2 , diameter / 2, radius, strokePaint);

    canvas.drawCircle(diameter / 2, diameter / 2, radius-strokeWidth, circlePaint);

    super.draw(canvas);
}

public void setStrokeWidth(int dp)
{
    float scale = getContext().getResources().getDisplayMetrics().density;
    strokeWidth = dp*scale;

}

public void setStrokeColor(String color)
{
    strokeColor = Color.parseColor(color);
}

public void setSolidColor(String color)
{
    solidColor = Color.parseColor(color);

}
}

xml:

<com.app.tot.customtextview.CircularTextView
    android:id="@+id/circularTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="11"
    android:gravity="center"
    android:padding="3dp"/>

And to define the width of the stroke:

circularTextView.setStrokeWidth(1);
circularTextView.setStrokeColor("#ffffff");
circularTextView.setSolidColor("#000000");

You can see the question where this code was obtained as an answer and also some other options here:

https://stackoverflow.com/questions/25203501/android-creating-a-circular-textview

Answer 2

If you don’t need a solution as complete as @Mateus, you can set it to xml, but if the number of digits within the circle is variable (2 or +), you’d better create a class.

circulo_drawable.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="oval">
    <solid android:color="#A6ffffff"/>
    <stroke android:width="0dp" android:color="#fff" />
    <size android:width="28dp" android:height="28dp"/>
</shape>

TextView:

<TextView
    android:id="@+id/TextViewID"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:paddingTop="5dp"
    android:text="2"
    android:layout_marginTop="2dp"
    android:layout_marginBottom="2dp"
    android:gravity="center"
    android:visibility="gone"
    android:textColor="#ff2800"                
    android:background="@drawable/circulo_drawable"
    android:textSize="13sp" />