Android Creating a Circular TextView

Question

My current simple XML is below  however i would like the 3 TextViews within it to be circular  rather than rectangular   How can I change my code to do so    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android orientation  vertical   gt        lt TextView         android id    id tvSummary1          android layout width  270dp          android layout height  60dp   gt       lt  TextView gt        lt TextView         android id    id tvSummary2          android layout width  270dp          android layout height  60dp   gt       lt  TextView gt        lt TextView         android id    id tvSummary3          android layout width  270dp          android layout height  60dp   gt       lt  TextView gt    lt  LinearLayout gt    Note  I want an actual circle not the curved edge rectangle shown below     EDIT   current code    lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android orientation  vertical   gt        lt TextView         android id    id tvSummary1          android layout width  270dp          android layout height  60dp          android text              android gravity  left center vertical          android background   drawable circle   gt        lt TextView         android id    id tvSummary2          android layout width  270dp          android layout height  60dp          android background   drawable circle   gt       lt  TextView gt        lt TextView         android id    id tvSummary3          android layout width  270dp          android layout height  60dp          android background   drawable circle   gt       lt  TextView gt    lt  LinearLayout gt    Current output

User · Answer

The typical solution is to define the shape and use it as background but as the number of digits varies it's no more a perfect circle, it looks like a rectangle with round edges or Oval. So I have developed this solution, it's working great. Hope it will help someone.

Here is the code of custom TextView

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);

}
}

Then in your XML, give some padding and make sure its gravity is center

<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 you can set the stroke width

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

User · Answer

It s a rectangle that prevents oval shape background to get circular   Making view a square will fix everything   I found this solution to be clean and working for varying textsize and text length   public class EqualWidthHeightTextView extends TextView        public EqualWidthHeightTextView Context context            super context              public EqualWidthHeightTextView Context context  AttributeSet attrs            super context  attrs              public EqualWidthHeightTextView Context context  AttributeSet attrs  int defStyleAttr            super context  attrs  defStyleAttr               Override     protected void onMeasure int widthMeasureSpec  int heightMeasureSpec            super onMeasure widthMeasureSpec  heightMeasureSpec            int r   Math max getMeasuredWidth   getMeasuredHeight             setMeasuredDimension r  r              Usage   lt com commons custom ui EqualWidthHeightTextView     android id    id cluster count      android layout width  wrap content      android layout height  wrap content      android gravity  center      android text  10       android background   drawable oval light blue bg      android textColor   color white    gt    oval light blue bg xml   lt shape xmlns android  http   schemas android com apk res android  lt br gt         android shape  oval  gt      lt solid android color   color light blue   gt      lt stroke android color   color white  android width  1dp    gt   lt  shape gt

User · Answer

This my actually working solution   lt  xml version  1 0  encoding  utf-8   gt   lt shape     xmlns android  http   schemas android com apk res android      android shape  oval       gt       lt  -- The fill color -- gt       lt solid android color   ffff    gt       lt  -- Just to add a border -- gt       lt stroke         android color   8000          android width  2dp        gt   lt  shape gt    Make sure your TextView width and height match  be the same in dp   if you want a perfect  unstretched  circle   Make sure that the text fits into a circle  by either shortening your text OR enlarging your circle OR making your text size smaller OR reduce your padding s  if any  OR a combination of the above suggestions    EDIT   For what I can see in your pictures  you want to add too much text on a line  for pure circles  Consider that the text should have a square aspect  so you can either wrap it  use  n  or just put the numbers inside the circles and put the writings above or uder the corresponding circle

User · Answer

I was also looking for a solution to this problem and as easy and comfortable I found  was to convert the shape of a rectangular TextView to cirular  With this method will be perfect    Create a new XML file in the drawable folder called  circle xml   for example  and fill it with the following code    lt shape xmlns android  http   schemas android com apk res android      android shape  oval  gt        lt solid android color   9FE554    gt        lt size         android height  60dp          android width  60dp    gt    lt  shape gt     With this file you will create the new form of TextView  In this case  I created a circle of green  If you want to add a border  you would have to add the following code to the previous file        lt stroke         android width  2dp          android color   FFFFFF    gt     Create another XML file    rounded textview xml   in the drawable folder with the following code    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable circle    gt   lt  selector gt     This file will serve to change the way the TextView we eligamos    Finally  in the TextView properties we want to change the way section  we headed to the  background  and select the second XML file created    rounded textview xml      lt TextView     android layout width  wrap content      android layout height  wrap content      android text  H      android textSize  30sp      android background   drawable rounded textview      android textColor   android color white      android gravity  center      android id    id mark    gt     With these steps  instead of having a TextView TextView rectagular have a circular  Just change the shape  not the functionality of the TextView  The result would be the following     Also I have to say that these steps can be applied to any other component having the option to  background  in the properties   Luck

User · Answer

Much of the Answer here seems to be hacks to the shape drawable  while android in itself supports this with the shapes functionality  This is something that worked perfectly for me You can do this in two ways      Using a fixed height and width  that would stay the same   regardless of the text that you put it as shown below    lt shape xmlns android  http   schemas android com apk res android  android shape  oval  gt    lt solid android color   color alpha white    gt        lt size android width  25dp  android height  25dp   gt    lt stroke android color   color color primary  android width  1dp   gt    lt  shape gt       Using Padding which re-adjusts the shape regardless of the text in   the textview it as shown below       lt solid android color   color alpha white    gt    lt padding     android bottom   dimen semi standard margin      android left   dimen semi standard margin      android right   dimen semi standard margin      android top   dimen semi standard margin    gt    lt stroke android color   color color primary  android width  2dp   gt         semi standard margin   4dp

User · Answer

Create an texview design xml file and populate it with the following code  Put it in res drawable    lt shape xmlns android  http   schemas android com apk res android   gt            lt solid android color   98AFC7    gt            lt stroke             android width  2dp              android color   98AFC7    gt            lt corners             android bottomLeftRadius  20dp              android bottomRightRadius  20dp              android topLeftRadius  20dp              android topRightRadius  20dp    gt        lt  shape gt    Then in your main XML file just add the following line for each TextView     android background   drawable texview design      Second way  not recommended     Download this circle and place it in your drawable folder and then make it your TextView s background  and then set the gravity to center   Then it will look like this

User · Answer

You can try this in round tv xml in drawable folder    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt        lt stroke android color   22ff55  android width  3dip   gt        lt corners         android bottomLeftRadius  30dp          android bottomRightRadius  30dp          android topLeftRadius  30dp          android topRightRadius  30dp    gt        lt size         android height  60dp          android width  60dp    gt    lt  shape gt    Apply that drawable in your textviews as    lt TextView     android id    id tv      android layout width  wrap content      android layout height  wrap content      android background   drawable round tv      android gravity  center vertical center horizontal      android text  ddd      android textColor   000      android textSize  20sp    gt    Output     Hope this helps   Edit  If your text is too long  Oval shape is more preferred    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  oval  gt        lt stroke android color   55ff55  android width  3dip   gt        lt corners         android bottomLeftRadius  30dp          android bottomRightRadius  30dp          android topLeftRadius  30dp          android topRightRadius  30dp    gt        lt size         android height  60dp          android width  60dp    gt    lt  shape gt    Output     If you still need it a proper circle  then I guess you will need to set its height dynamically after setting text in it  new height should be as much as its new width so as to make a proper circle

User · Answer

Try out below drawable file  Create file named  circle  in your res drawable folder and copy below code       lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  oval   gt        lt solid android color   FFFFFF    gt        lt stroke         android width  1dp          android color   4a6176    gt        lt padding         android left  10dp          android right  10dp          android top  10dp          android bottom  10dp             gt        lt corners android radius  10dp    gt    lt  shape gt    Apply it in your TextView as below    lt TextView         android id    id tvSummary1          android layout width  270dp          android layout height  60dp          android text  Hello World           android gravity  left center vertical          android background   drawable round bg  gt        lt  TextView gt

User · Answer

I use   drawable circulo xml   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  oval  gt       lt solid android angle  270          android color   color your color    gt    lt  shape gt    And then I use it in my TextView as   android background   drawable circulo    no need to complicated it

User · Answer

use this in your drawable   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android       android shape  oval  gt         lt solid android color   55ff55   gt         lt size android height  60dp          android width  60dp   gt    lt  shape gt    Set background for the textview as this

User · Answer

1 Create an xml circle text bg xml in your res drawable folder with the code below   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt        lt solid android color   fff    gt        lt stroke         android width  1dp          android color   98AFC7    gt       lt corners          android bottomLeftRadius  50dp           android bottomRightRadius  50dp           android topLeftRadius  50dp           android topRightRadius  50dp    gt       lt size          android height  20dp           android width  20dp    gt   lt  shape gt    2 Use circle text bg as the background for your textview  NB  In order to get a perfect circle your textview height and width should be the same Preview of what your textview with text 1  2  3 with this background should look like this

[java] Android: Creating a Circular TextView?

Examples related to java

Examples related to android

Examples related to textview

Examples related to xml-layout