Friday 23 August 2013

Text on a curve

Create new Android Project
Project Name: PlayingwithBitmaps
Build Target: Android 2.3.3   //or greater than that
Application Name: PlayingwithBitmaps
Package Name: com.hamad.playingwithbitmaps
Create Activity: Main
Min SDK: 10 // or greater than that
  1. create main layout:
  • One image view to display the image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#000000"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/rlMain">
</RelativeLayout>
 2. code of main activity:
package com.shaikhhamadali.blogspot.playingwithbitmaps;


import android.os.Bundle;
import android.app.Activity;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.view.View;
import android.widget.RelativeLayout;
public class Main extends Activity {
 PaintView pV;
 RelativeLayout rlMain;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  pV=new PaintView(this);
  rlMain=(RelativeLayout)findViewById(R.id.rlMain);
  pV=new PaintView(this);
  rlMain.addView(pV);
 }
 public class PaintView extends View {
  private static final String Text = "Welcome To Hamad's Blog";
  private Path myArc;
  private Paint mPaintText;

  public PaintView(Context context) {
   super(context);
   //create Path object
   myArc = new Path();
   //create RectF Object
   RectF oval = new RectF(50,100,200,250);
   //add Arc in Path with start angle -180 and sweep angle 200
   myArc.addArc(oval, -180, 200);
   //create paint object
   mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
   //set style
   mPaintText.setStyle(Paint.Style.FILL_AND_STROKE);
   //set color
   mPaintText.setColor(Color.WHITE);
   //set text Size
   mPaintText.setTextSize(20f);

  }

  @Override
  protected void onDraw(Canvas canvas) {
   //Draw Text on Canvas
   canvas.drawTextOnPath(Text, myArc, 0, 20, mPaintText);
   invalidate();
  }
 }
}

  3. note that:
  • With the help of this,PaintView class  you can draw text on curve .
  4. conclusion:
  • Some information about RectF ,Path and Paint for Draw Text on Curve.
  • Know how to Draw text on curve.
  5. About the post:
  •  The code seems to explain itself due to comments, and is very easy to understand.
  •  Don’t mind to write a comment whatever you like to ask, to know,to suggest or recommend.
  •  Hope you enjoy it!

6. Source Code:
        you can download the source code here

Cheers,
Hamad Ali Shaikh