How to make TextView shape circle and set different background color based on condition

Question

I have a TextView, what I want is to make the TextView shape circle and then set different background colors based on different conditions I have used. I am able to set Background color based on different conditions but not able to make the TextView shape circle. So how that can be done. Please help me to solve this out.

Code I have used:

TextView txt_stage_display = (TextView)findViewById(R.id.txt_stage_display);

if(m_enStage[position] == enSTAGE_START)
{
    txt_stage_display.setBackgroundColor(Color.parseColor("#D48393"));
}
else if(m_enStage[position] == enSTAGE_FLOW)
{
    txt_stage_display.setBackgroundColor(Color.parseColor("#D48393"));
}
    else if(m_enStage[position] == enSTAGE_SAFE)
{
    txt_stage_display.setBackgroundColor(Color.parseColor("#66B0CC"));
}
else if(m_enStage[position] == enSTAGE_UNSAFE)
{
    txt_stage_display.setBackgroundColor(Color.parseColor("#D8C627"));
}
else if(m_enStage[position] == enSTAGE_FERTILE)
{
    txt_stage_display.setBackgroundColor(Color.parseColor("#67A05E"));
}
else
{
    txt_stage_display.setBackgroundColor(Color.parseColor("#808080"));
}

Here is the solution for your question: [Here][1] [1]: http://stackoverflow.com/questions/10150642/draw-text-in-circular-view/10150970#10150970 — Shreyash Mahajan, Apr 25 '12 at 13:17
I mean to say, i want textView look oval and at the same time want to set the background color of the textView based on condition which i alreday do in my code. — AndroidDev, Apr 25 '12 at 13:17

score 47 · Accepted Answer · answered Apr 25 '12 at 13:47

47

If you have a relatively small amout of colors, you can create a drawable file for each color, for example create a file bg_red.xml:

<?xml version="1.0" encoding="utf-8"?>
<item xmlns:android="http://schemas.android.com/apk/res/android">
  <shape>
      <solid android:color="#f00" />
      <corners
          android:topLeftRadius="30dp"
          android:topRightRadius="30dp"
          android:bottomLeftRadius="30dp"
          android:bottomRightRadius="30dp"
          />
  </shape>
</item>

Then assign define the TextView:

<TextView 
    android:id="@+id/tv"
    android:layout_height="60dp"
    android:layout_width="60dp" 
    android:text="X" 
    android:textColor="#fff"
    android:textSize="20sp"
    android:background="@drawable/bg_red"
    android:gravity="center_vertical|center_horizontal" 
    />

Note that the width is twice the radius of the background corner radius.

To change the color from code:

TextView v = (TextView) findViewById(R.id.my_text_view);
v.setBackgroundResource(R.drawable.bg_blue);

answered Apr 25 '12 at 13:47

yoah

7,180
2
30
30

7

actually I needed to remove item because was not valid and I changed to: ` ` PS! If you setted background to resource or color and then you want to set shape - it wont work. You mustn't set any background If you want use shape. Use color in shape xml file instead! – deadfish Jan 09 '14 at 20:40
But how about my text is longer one character? It'll scale to oval :( – Justin May 28 '14 at 11:02
How would you change the code, so that it would be possible to change the color at runtime? – android developer Dec 23 '14 at 15:36
2

@androiddeveloper A simple way it so define a class that extends Drawable, in in the draw method call canvas.drawCircle. Then you can add a method like setColor – yoah Dec 23 '14 at 16:16
@yoah Interesting. Thank you. – android developer Dec 23 '14 at 20:21
thanks for this ans yoah :) btw i have one question.how to fill white color inside this ?? – Nevaeh Apr 01 '15 at 06:40
you can add this one:: – Mahmudur Rahman Jul 17 '16 at 05:43
I think tag is not required. – Pratik Butani Jul 15 '19 at 09:40

score 24 · Answer 2 · answered Jul 16 '14 at 10:33

To add up to the accepted answer, adding size tag inside shape and making sure height and width is large enough will make sure the background is circle even if textView has many characters!

<shape>
 <solid android:color="#f00" />
 <corners
    android:topLeftRadius="30dp"
   android:topRightRadius="30dp"
     android:bottomLeftRadius="30dp"
     android:bottomRightRadius="30dp"
     />
 <size 
  android:height="25dp"
   android:width="25dp"/>
</shape>

score 6 · Answer 3 · answered Jan 15 '17 at 14:12

6

TextView textView = (TextView) findViewById(R.id.my_text_view);             
Drawable drawable = textView.getBackground();
drawable.setColorFilter(getResources().getColor(color), PorterDuff.Mode.SRC_IN);

works for me

answered Jan 15 '17 at 14:12

iftach barshem

91
1
4

1

Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K Jan 15 '17 at 14:32

score 1 · Answer 4 · answered Jan 20 '16 at 14:51

Add circular_hired.xml file into 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="@color/map_hide_bg"/>
            <stroke android:width="1dip" android:color="@color/map_hide_bg" />

    </shape>

but in you layout design xml file , you have to fix the width and height of textview. it will give the circular form.

<TextView
            android:id="@+id/tvMessages"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:background="@drawable/circular_message"
            android:padding="4dp"
            android:text="5"
            android:textColor="@color/white_color"
            android:textSize="@dimen/txt12"
            android:visibility="visible"
             />

i sure it will help you,

score 0 · Answer 5 · answered Dec 27 '17 at 22:26

0

You can also achieve this by setting color to background drawable like this

TextView textView = (TextView) findViewById(R.id.my_text_view);
((GradientDrawable)textView.getBackground()).setColor(R.color.my_color);

answered Dec 27 '17 at 22:26

Anton Donov

51
5

How to make TextView shape circle and set different background color based on condition

5 Answers5

Linked