How to Show Circular Text using TextView in Android

Question

I want to show text with circular shape in my android application.I know it is done with custome textview but can some buddy give me proper code.I am also attaching image which type of look i want.

enter image description here

Take a look at http://stackoverflow.com/questions/10150642/draw-text-in-circular-view — Kartik Domadiya, Oct 31 '12 at 07:48
you need to understand it and change it according to your need. — Kartik Domadiya, Oct 31 '12 at 07:54

score 25 · Answer 1 · edited Sep 26 '19 at 15:38

you can try this tested and full working code :

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new GraphicsView(this));
    }

    static public class GraphicsView extends View {
        private static final String QUOTE = "This is a curved text";
        private Path circle;
        private Paint cPaint;
        private Paint tPaint;

        public GraphicsView(Context context) {
            super(context);

            int color = Color.argb(127, 255, 0, 255);

            circle = new Path();
            circle.addCircle(230, 350, 150, Direction.CW);

            cPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            cPaint.setStyle(Paint.Style.STROKE);
            cPaint.setColor(Color.LTGRAY);
            cPaint.setStrokeWidth(3);

            setBackgroundResource(R.drawable.heart);

            tPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            tPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            tPaint.setColor(Color.BLACK);
            tPaint.setTextSize(50);
        }
        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawTextOnPath(QUOTE, circle, 485, 20, tPaint);
        }
    }
}

the output will be:

enter image description here

Hope this help.

Simon · Answer 2 · 2012-10-31T08:08:14.953

6

Create a custom view and override the onDraw. In the onDraw, create a path and use drawTextOnPath. Something like this. textToDraw is the text you want to display. Paint is whatever paint you want.

@Override onDraw(Canvas canvas){
    Path path = new Path();
    path.addCircle(x, y, 200, Path.Direction.CW);
    canvas.drawTextOnPath(textToDraw, path, textX, textY, paint);
}

http://developer.android.com/training/custom-views/index.html http://developer.android.com/reference/android/graphics/Canvas.html#drawTextOnPath(java.lang.String, android.graphics.Path, float, float, android.graphics.Paint)

edited Oct 31 '12 at 08:08

answered Oct 31 '12 at 07:53

Simon

14,407
8
46
61

Also, For multi-res, use the underlying drawable's height to calculate the radius. – S.D. Oct 31 '12 at 08:22
http://www.networketiquette.net/do_not_use_all_caps.htm Now, to resume, what does "not working" mean? – Simon Oct 31 '12 at 09:35
I put this cod in doDraw() but nothing show in screen canvas.save(); Path path = new Path(); path.addCircle(-10, 10, 200, Path.Direction.CW); canvas.drawTextOnPath("Hello", path, -10, -10, null); super.onDraw(canvas); canvas.restore(); – Rishabh Agrawal Oct 31 '12 at 15:30
"I put this cod in doDraw()" doDraw, or onDraw? You also added the circle outside the view. x = -10 and the text outside the path. Please edit your question with your onDraw method. – Simon Oct 31 '12 at 16:38
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18876/discussion-between-rishabh-creatiosoft-and-simon) – Rishabh Agrawal Oct 31 '12 at 19:10

score 4 · Answer 3 · edited Nov 08 '12 at 05:47

You have to create your own object "View" like this

public class YourView extends View {
    private static final String YOUR_TEXT = "something cool";
    private Path _arc;

    private Paint _paintText;

    public YourView(Context context) {
      super(context);

      _arc = new Path();
      RectF oval = new RectF(50,100,200,250);;
      _arc.addArc(oval, -180, 200);
      _paintText = new Paint(Paint.ANTI_ALIAS_FLAG);
      _paintText.setStyle(Paint.Style.FILL_AND_STROKE);
      _paintText.setColor(Color.WHITE);
      _paintText.setTextSize(20f);

    }

    @Override
    protected void onDraw(Canvas canvas) {
      canvas.drawTextOnPath(YOUR_TEXT, _arc, 0, 20, _paintText);
      invalidate();
    }
}

and then use it as your TextView :) hope this help

score 4 · Answer 4 · edited Jun 20 '20 at 09:12

4

You can have a look to the APIDemo source code bundled with the android SDK in your SDK dir.

The example "Graphics/Text Align" (file TextAlign.java) show how to display a text along a path: Screen capture of the path

You can then tweak it to build your screen.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 07 '12 at 14:22

ol_v_er

27,094
6
48
61

1

Thanks for including the image from the API samples. It saves the time of having to create and run the project. – AndroidGuy Mar 25 '13 at 20:57
https://github.com/appium/android-apidemos/blob/master/src/io/appium/android/apis/graphics/TextAlign.java – azurh Dec 08 '16 at 15:24
Can you give me a brief description of it? – Prince Dholakiya May 31 '19 at 07:37
Hello sir, how can I do this kind of text in android? – Prince Dholakiya Jun 03 '19 at 11:15

score 3 · Answer 5 · answered Oct 31 '12 at 08:00

3

You have implement it using custom views like in your onDraw method:

Path path = new Path();
path.addCircle(x, y, radius, Path.Direction.CW);
myCanvas.drawTextOnPath(myText, path, offset, 0, myPaint);

answered Oct 31 '12 at 08:00

Khawar Raza

15,870
24
70
127

2

what is x,y and path,offset here? – Pinkesh Darji Dec 07 '17 at 08:39

score 1 · Answer 6 · answered Nov 03 '12 at 06:15

1

Try out following code..

onDraw(Canvas canvas){
 Path path = new Path();
 path.addArc(oval, startAngle, sweepAngle) 
 path.addArc(oval, 0, 180) 
 }

This may work....

answered Nov 03 '12 at 06:15

Varun Vishnoi

980
1
9
32

Yahor10 · Answer 7 · 2012-10-31T07:48:25.400

-11

You not need to do custom view. Find correct TypeFace,put into your project and set to your TextView

Or use microsoft office word art and copy images to your project

enter image description here

edited Oct 31 '12 at 07:48

answered Oct 31 '12 at 07:36

Yahor10

2,123
1
13
13

sorry dude this is not possible with type face,Because type face only gives you style of text not arc shape. – Rishabh Agrawal Oct 31 '12 at 07:40
dear i want to show this style on run time.I could also use this style with images.But i never want it. – Rishabh Agrawal Oct 31 '12 at 07:49
This is an android depending question, also the way how to make it in code, not with type face. – Kenny Seyffarth Mar 18 '16 at 11:49

How to Show Circular Text using TextView in Android

7 Answers7

Linked

Related