How to Show Circular Text using TextView in Android

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


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.


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)


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.


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


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);