MainActivity.java
package com.example.androiddrawpath;
import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
public class MainActivity extends Activity {
SeekBar radiusBar;
MyView myView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
radiusBar = (SeekBar) findViewById(R.id.radiusbar);
myView = (MyView) findViewById(R.id.myview);
float defaultRatio = (float) (radiusBar.getProgress())
/ (float) (radiusBar.getMax());
myView.setShapeRadiusRatio(defaultRatio);
radiusBar.setOnSeekBarChangeListener(radiusBarOnSeekBarChangeListener);
};
OnSeekBarChangeListener radiusBarOnSeekBarChangeListener =
new OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
float defaultRatio = (float) (radiusBar.getProgress())
/ (float) (radiusBar.getMax());
myView.setShapeRadiusRatio(defaultRatio);
myView.invalidate();
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
};
}
MyView.java, our custom View.
package com.example.androiddrawpath;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path.Direction;
import android.util.AttributeSet;
import android.view.View;
public class MyView extends View {
MyShape myShape;
float ratioRadius;
public MyView(Context context) {
super(context);
initMyView();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
initMyView();
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initMyView();
}
public void initMyView(){
myShape = new MyShape();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int w = getWidth();
int h = getHeight();
if((w==0) || (h==0)){
return;
}
float x = (float)w/2.0f;
float y = (float)h/2.0f;
float radius;
if(w > h){
radius = h * ratioRadius;
}else{
radius = w * ratioRadius;
}
myShape.setCircle(x, y, radius, Direction.CCW);
canvas.drawPath(myShape.getPath(), myShape.getPaint());
}
public void setShapeRadiusRatio(float ratio){
ratioRadius = ratio;
}
}
MyShape.java, it is the object hold the Path and Paint to be drawn on our View.
package com.example.androiddrawpath;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
public class MyShape {
private Paint paint;
private Path path;
public MyShape() {
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(3);
paint.setStyle(Paint.Style.STROKE);
path = new Path();
}
public void setCircle(float x, float y, float radius, Path.Direction dir){
path.reset();
path.addCircle(x, y, radius, dir);
}
public Path getPath(){
return path;
}
public Paint getPaint(){
return paint;
}
}
Layout, /res/layout/activity_main.xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.androiddrawpath.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="radius(%)"/>
<SeekBar
android:id="@+id/radiusbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="50" />
<com.example.androiddrawpath.MyView
android:id="@+id/myview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Download the files.More example:
- Draw Path of polygon on canvas of custom View
- Controlling Hardware Acceleration of individual View by calling setLayerType() method
- Draw star on canvas
- Draw rounded corner star on canvas
- Fill path with color
- Rotate Path with Matrix
- Draw rotated path by rotating canvas
- DashPathEffect, apply dash effect on path
- Implement running dash path, using PathDashPathEffect
- Implement arrow-like PathDashPathEffect
- Animation of moving bitmap along path
- Smooth turning along path
- Animation follow touch path
- Know the performance, timing and speed of animation
- Change speed of Animation follow touch path
- Animation follow touch path forward and backward
