Android: Creating a Circular TextView?
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:
Solution 1:
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" />
-
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:
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:
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):
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: