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?

Answer 1

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.

Answer 2

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:

1. 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.

3. 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!!

Answer 3

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>

Answer 4

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.

Answer 5

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: