Android: Creating a Circular TextView?
JavaAndroidTextviewXml LayoutJava Problem Overview
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?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tvSummary1"
android:layout_width="270dp"
android:layout_height="60dp" >
</TextView>
<TextView
android:id="@+id/tvSummary2"
android:layout_width="270dp"
android:layout_height="60dp" >
</TextView>
<TextView
android:id="@+id/tvSummary3"
android:layout_width="270dp"
android:layout_height="60dp" >
</TextView>
</LinearLayout>
Note: I want an actual circle not the curved edge rectangle shown below:
EDIT:
current code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tvSummary1"
android:layout_width="270dp"
android:layout_height="60dp"
android:text=" "
android:gravity="left|center_vertical"
android:background="@drawable/circle"/>
<TextView
android:id="@+id/tvSummary2"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="@drawable/circle" >
</TextView>
<TextView
android:id="@+id/tvSummary3"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="@drawable/circle" >
</TextView>
</LinearLayout>
Current output:
Java Solutions
Solution 1 - Java
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:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#9FE554" /> <size android:height="60dp" android:width="60dp" /> </shape>
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:
<stroke
android:width="2dp"
android:color="#FFFFFF" />
2. Create another XML file ( "rounded_textview.xml") in the drawable folder with the following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/circle" />
</selector>
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").
<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" />
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!!
Solution 2 - Java
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");
Solution 3 - Java
Create an texview_design.xml file and populate it with the following code. Put it in res/drawable.
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#98AFC7" />
<stroke
android:width="2dp"
android:color="#98AFC7" />
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
</shape>
Then in your main XML file just add the following line for each TextView:
android:background="@drawable/texview_design"
Second way (not recommended):
![circle][1]
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:
![enter image description here][2] [1]: http://i.stack.imgur.com/LOhIq.png [2]: http://i.stack.imgur.com/OyvZ1.png
Solution 4 - Java
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
<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" />
oval_light_blue_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"<br>
android:shape="oval">
<solid android:color="@color/light_blue"/>
<stroke android:color="@color/white" android:width="1dp" />
</shape>
Solution 5 - Java
1.Create an xml circle_text_bg.xml in your res/drawable folder with the code below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#fff" />
<stroke
android:width="1dp"
android:color="#98AFC7" />
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"
android:topLeftRadius="50dp"
android:topRightRadius="50dp" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
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
Solution 6 - Java
This my actually working solution
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<!-- The fill color -->
<solid android:color="#ffff" />
<!-- Just to add a border -->
<stroke
android:color="#8000"
android:width="2dp"
/>
</shape>
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.
Solution 7 - Java
You can try this in round_tv.xml in drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:color="#22ff55" android:width="3dip"/>
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<size
android:height="60dp"
android:width="60dp" />
</shape>
Apply that drawable in your textviews as:
<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" />
Output:
Hope this helps.
Edit: If your text is too long, Oval shape is more preferred.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<stroke android:color="#55ff55" android:width="3dip"/>
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<size
android:height="60dp"
android:width="60dp" />
</shape>
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.
Solution 8 - Java
use this in your drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#55ff55"/>
<size android:height="60dp"
android:width="60dp"/>
</shape>
Set background for the textview as this
Solution 9 - Java
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
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/alpha_white" />
<size android:width="25dp" android:height="25dp"/>
<stroke android:color="@color/color_primary" android:width="1dp"/>
</shape>
> Using Padding which re-adjusts the shape regardless of the text in
> the textview it as shown below
<solid android:color="@color/alpha_white" />
<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" />
<stroke android:color="@color/color_primary" android:width="2dp"/>
> semi_standard_margin = 4dp
Solution 10 - Java
I use: /drawable/circulo.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:angle="270"
android:color="@color/your_color" />
</shape>
And then I use it in my TextView as:
android:background="@drawable/circulo"
no need to complicated it.
Solution 11 - Java
Try out below drawable file. Create file named "circle" in your res/drawable folder and copy below code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#4a6176" />
<padding
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp"
/>
<corners android:radius="10dp" />
</shape>
Apply it in your TextView as below:
<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">
</TextView>
