Draw a Semicircle in The Background of a View

Draw a semicircle in the background of a View

You can implement you own Drawable. But that cannot be inflated from XML. You need to set the drawable from code using View.setBackgroundDrawable();

See my sample implementation to draw a semi circle using drawable.

public class SemiCircleDrawable extends Drawable {

private Paint paint;
private RectF rectF;
private int color;
private Direction angle;

public enum Direction
{
LEFT,
RIGHT,
TOP,
BOTTOM
}

public SemiCircleDrawable() {
this(Color.BLUE, Direction.LEFT);
}

public SemiCircleDrawable(int color, Direction angle) {
this.color = color;
this.angle = angle;

paint = new Paint();
paint.setColor(color);
paint.setStyle(Style.FILL);
paint.setAntiAlias(true);

rectF = new RectF();
}

public int getColor() {
return color;
}

/**
* A 32bit color not a color resources.
* @param color
*/
public void setColor(int color) {
this.color = color;
paint.setColor(color);
}

@Override
public void draw(Canvas canvas) {
canvas.save();

Rect bounds = getBounds();

if(angle == Direction.LEFT || angle == Direction.RIGHT)
{
canvas.scale(2, 1);
if(angle == Direction.RIGHT)
{
canvas.translate(-(bounds.right / 2), 0);
}
}
else
{
canvas.scale(1, 2);
if(angle == Direction.BOTTOM)
{
canvas.translate(0, -(bounds.bottom / 2));
}
}

rectF.set(bounds);

if(angle == Direction.LEFT)
canvas.drawArc(rectF, 90, 180, true, paint);
else if(angle == Direction.TOP)
canvas.drawArc(rectF, -180, 180, true, paint);
else if(angle == Direction.RIGHT)
canvas.drawArc(rectF, 270, 180, true, paint);
else if(angle == Direction.BOTTOM)
canvas.drawArc(rectF, 0, 180, true, paint);

canvas.restore()
}

@Override
public void setAlpha(int alpha) {
// Has no effect
}

@Override
public void setColorFilter(ColorFilter cf) {
// Has no effect
}

@Override
public int getOpacity() {
// Not Implemented
return PixelFormat.UNKNOWN;
}

}

Half circle shape not work

You cannot create a semicircle from xml. but you could achieve what you are looking for using a circle with appropriate margin & padding.

You can use a circle shape .xml file.
Create a fixed sized circle like this:

Example:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false" >
<solid android:color="#006AC5" />
<size
android:height="50dp"
android:width="50dp" />
</shape>

Sample Image

how to draw a half circle in android

I would suggest to draw it through code.

1- Create class MyView and put below code.

public class MyView extends View {

public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

@Override
protected void onDraw(Canvas canvas) {

// TODO Auto-generated method stub
super.onDraw(canvas);
float width = (float) getWidth();
float height = (float) getHeight();
float radius;

if (width > height) {
radius = height / 4;
} else {
radius = width / 4;
}

Path path = new Path();
path.addCircle(width / 2,
height / 2, radius,
Path.Direction.CW);

Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL);

float center_x, center_y;
final RectF oval = new RectF();
paint.setStyle(Paint.Style.STROKE);

center_x = width / 2;
center_y = height / 2;

oval.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
canvas.drawArc(oval, 90, 180, false, paint);
}
}

2-Initialize this class inside you activity or fragment:-

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}

Is there any way how to create half circle as shape?

Create half_circle.xml file under drawable with this line

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#8C9AEE"/>
<size
android:width="120dp"
android:height="60dp"/>
<corners
android:topLeftRadius="60dp"
android:topRightRadius="60dp"/>
</shape>

set half_circle.xml as background of layout

output will be look like :

Sample Image



Related Topics



Leave a reply



Submit