I've the following code below.
public class CompassActivity extends Activity {
public class OuterCircle extends View {
Paint paint = new Paint();
Path path = new Path();
private static final String s = "Hello world example";
public OuterCircle(Context context) {
super(context);
init();
}
private void init() {
paint.setColor(Color.WHITE);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(2);
paint.setAntiAlias(true);
}
private void drawDegreesOnCircle(Canvas c) {
path.addCircle(getWidth()/2, getHeight()/2, 180, Direction.CW);
c.drawTextOnPath(s, path, 0, 10, paint);
}
public void onDraw(Canvas c) {
int cx = getWidth()/2;
int cy = getHeight()/2;
c.drawCircle(cx, cy, 170, paint);
drawDegreesOnCircle(c);
}
}
}
The circle is drawn successfully. However, the string I've specified is not displayed. There is no error or warning in the code. Am I missing anything in my code? I'm trying to display the string around the circle. I got stuck here. :D
I've fixed the above issue by adding
setLayerType(View.LAYER_TYPE_SOFTWARE, null)
It is required to use the above method along with the
Canvas.drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)
for Android API level 11 or higher. The string is now displayed successfully around the circle. Here is the correct code.
public class CompassActivity extends Activity {
public class OuterCircle extends View {
Paint paint = new Paint();
Path path = new Path();
private static final String s = "Hello world example";
public OuterCircle(Context context) {
super(context);
init();
}
private void init() {
paint.setColor(Color.WHITE);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(2);
paint.setAntiAlias(true);
}
private void drawDegreesOnCircle(Canvas c) {
path.addCircle(getWidth()/2, getHeight()/2, 180, Direction.CW);
c.drawTextOnPath(s, path, 0, 10, paint);
setLayerType(View.LAYER_TYPE_SOFTWARE, null); // Required for API level 11 or higher.
}
public void onDraw(Canvas c) {
int cx = getWidth()/2;
int cy = getHeight()/2;
c.drawCircle(cx, cy, 170, paint);
drawDegreesOnCircle(c);
}
}
}
You're missing a call to drawPath()
private void drawDegreesOnCircle(Canvas c) {
path.addCircle(getWidth()/2, getHeight()/2, 180, Direction.CW);
c.drawPath(path, paint);
c.drawTextOnPath(s, path, 0, 10, paint);
}
A very simple example just to get text in an angle on the center of the display.
public class DrawSomeText extends View {
Paint mPaint;
public DrawSomeText(Context context) {
super(context);
mPaint = new Paint();
mPaint.setColor(Color.BLACK);
}
#Override
public void onDraw(Canvas canvas) {
Path path = new Path();
path.moveTo(getWidth()/2, getHeight()/2);
path.lineTo(getWidth(), getHeight());
path.close();
canvas.drawPath(path, mPaint);
canvas.drawTextOnPath("Hello World", path, 0, 0, mPaint);
}
}
Related
I've setted up a simple application that once I have structured a Canvas puts an Rectangle inside it. I was asking myself if there's a method that allows me to fill that rettangle with an image.
This is my Canvas Class code:
public class MioCanvas extends View {
Paint paint;
Rect rect;
public MioCanvas(Context context) {
super(context);
paint = new Paint();
rect = new Rect();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(Color.GRAY);
paint.setStrokeWidth(3);
canvas.drawRect(0, 1999999, canvas.getWidth() / 2, canvas.getHeight() / 2, paint);
}
}
This is my activity code:
public class MainActivity extends AppCompatActivity {
MioCanvas mioCanvas;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mioCanvas = new MioCanvas(this);
mioCanvas.setBackgroundColor(Color.GREEN);
setContentView(mioCanvas);
}
}
You can use a Bitmap with your custom rect as input.
Rect rectangle = new Rect(0,0,100,100);
canvas.drawBitmap(bitmap, null, rectangle, null);
How to do this in android ? Is it possible using some selector designs? I have one option that I can use a icon for this and set it as drawableLeft but without using the icon how can I achieve this please guide me in good direction
You could achieve this with a custom Drawable. Something like:
public class BackgroundColorDrawable extends Drawable {
private Paint paint;
private RectF rectF;
private float cornerRadius = 20f;
private float borderThickness = 3.5f;
private int insetColour = Color.GREEN;
public BackgroundColorDrawable() {
paint = new Paint();
paint.setAntiAlias(true);
rectF = new RectF();
}
public void setInsetColour(int insetColour) {
this.insetColour = insetColour;
invalidateSelf();
}
public void setBorderThickness(float borderThickness) {
this.borderThickness = borderThickness;
invalidateSelf();
}
public void setCornerRadius(float cornerRadius) {
this.cornerRadius = cornerRadius;
invalidateSelf();
}
#Override
public void draw(Canvas canvas) {
paint.setColor(Color.GRAY);
rectF.set(0f, 0f, canvas.getWidth(), canvas.getHeight());
canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);
paint.setColor(Color.WHITE);
rectF.set(borderThickness, borderThickness, canvas.getWidth() - borderThickness, canvas.getHeight() - borderThickness);
canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);
paint.setColor(insetColour);
rectF.set(borderThickness, borderThickness, 60f, canvas.getHeight() - borderThickness);
canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);
paint.setColor(Color.WHITE);
rectF.set(30f, borderThickness, 60f, canvas.getHeight() - borderThickness);
canvas.drawRect(rectF, paint);
}
#Override
public void setAlpha(int alpha) { /* to implement */ }
#Override
public void setColorFilter(ColorFilter colorFilter) { /* to implement */}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
Then wherever you are using your EditText you just have to set the background drawable in code:
BackgroundColorDrawable drawable = new BackgroundColorDrawable();
editText.setBackground(drawable);
Note there's quite a bit of overdraw in this example (the same pixel gets drawn several times) which you could optimise for.
You'll also have to set some left padding on your EditText for the cursor to line up properly.
You can use a background-image on the EditText
editText.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.pic_name, 0);
How to make a rounded view like this? It is slightly larger than a quarter of a circle
Here is my code, but not succeed get the same result:
sorry my English, I'm from Brazil
public class Circle extends View {
private Context context;
private final Paint paint;
private final RectF rectF;
private final Rect rect;
private int w = 200;
private int h = 200;
private final float roundPx = 100 ;
public Circle(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.BLUE);
rect = new Rect(0, 0, w,h);
rectF = new RectF(rect);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
canvas.drawRect(0, 0, w, h, paint);
canvas.drawRect(w/2, h/2, w, h, paint);
}}
I want to draw a line on the Main Activity using Canvas. The problem is, it is not drawing anything. I have the following code:
Bitmap bitmap = Bitmap.createBitmap(1920, 1080, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(10);
float left = 20;
float top = 20;
float right = 50;
float bottom = 100;
canvas.drawLine(left, top, right, bottom, paint);
you can display the bitmap like that:
canvas.drawBitmap(bmp, positionX, positionY, paint);
in your case you can try somthing like this:
canvas.drawBitmap(bitmap, 0, 0, null);
but you need to use a diffrent canvas for it. The canvas wich let you draw stuff on your screen will be passed to your onDraw() method in your View. So you need to make a View class first and add it in your MainActivity.
You can do that like this:
First you create a class called MyView and add this code to it:
public class MyView extends View {
Bitmap bitmap;
public MyView(Context context) {
bitmap = Bitmap.createBitmap(1920, 1080, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(10);
float left = 20;
float top = 20;
float right = 50;
float bottom = 100;
canvas.drawLine(left, top, right, bottom, paint);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, 0, 0, null);
super.onDraw(canvas);
}
}
then you change the code in your onCreate() method in your MainActivity to this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
MyView myView = new MyView(this);
setContentView(myView);
}
Create a class like this
public class MyView extends View {
public MyView(Context context) {
super(context);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setStrokeWidth(10);
float left = 20;
float top = 20;
float right = 50;
float bottom = 100;
canvas.drawLine(left, top, right, bottom, paint);
}
}
I want to draw circle by canvas. Here is my code:
[MyActivity.java]:
public class MyActivity extends Activity
{
public void onCreate(Bundle savedInstanceState)
{
...
setContentView(new View(this,w,h));
}
}
[View.java]:
public class View extends SurfaceView
{
public View(Context context, int w, int h)
{
super(context);
Canvas grid = new Canvas(Bitmap.createBitmap(h,w, Bitmap.Config.ARGB_8888));
grid. drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
grid.drawCircle(w/2, h/2 , w/2, paint);
}
}
So I have just black screen without circle.
Why it does not work? How to fix it?
You can override the onDraw method of your view and draw the circle.
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(x, y, radius, paint);
}
For a better reference on drawing custom views check out the official Android documentation.
http://developer.android.com/training/custom-views/custom-drawing.html
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends Activity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public class MyView extends View
{
Paint paint = null;
public MyView(Context context)
{
super(context);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
int radius;
radius = 100;
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
// Use Color.parseColor to define HTML colors
paint.setColor(Color.parseColor("#CD5C5C"));
canvas.drawCircle(x / 2, y / 2, radius, paint);
}
}
}
Edit
if you want to draw circle at centre. You could also translate your entire canvas to center then draw circle at center.using
canvas.translate(getWidth()/2f,getHeight()/2f);
canvas.drawCircle(0,0, radius, paint);
These two link also help
http://www.compiletimeerror.com/2013/09/introduction-to-2d-drawing-in-android.html#.VIg_A5SSy9o
http://android-coding.blogspot.com/2012/04/draw-circle-on-canvas-canvasdrawcirclet.html
public class CircleView extends View {
private static final String COLOR_HEX = "#E74300";
private final Paint drawPaint;
private float size;
public CircleView(final Context context, final AttributeSet attrs) {
super(context, attrs);
drawPaint = new Paint();
drawPaint.setColor(Color.parseColor(COLOR_HEX));
drawPaint.setAntiAlias(true);
setOnMeasureCallback();
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(size, size, size, drawPaint);
}
private void setOnMeasureCallback() {
ViewTreeObserver vto = getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
removeOnGlobalLayoutListener(this);
size = getMeasuredWidth() / 2;
}
});
}
#TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void removeOnGlobalLayoutListener(ViewTreeObserver.OnGlobalLayoutListener listener) {
if (Build.VERSION.SDK_INT < 16) {
getViewTreeObserver().removeGlobalOnLayoutListener(listener);
} else {
getViewTreeObserver().removeOnGlobalLayoutListener(listener);
}
}
}
Xml example: will produce a circle of 5dp
<com.example.CircleView
android:layout_width="10dp"
android:layout_height="10dp"/>
If you are using your own CustomView extending View class, you need to call canvas.invalidate() method which will internally call onDraw method. You can use default API for canvas to draw a circle. The x, y cordinate define the center of the circle. You can also define color and styling in paint & pass the paint object.
public class CustomView extends View {
public CustomView(Context context, AttributeSet attrs) {
super(context, attrs);
setupPaint();
}
}
Define default paint settings and canvas (Initialise paint in constructor so that you can reuse the same object everywhere and change only specific settings wherever required)
private Paint drawPaint;
// Setup paint with color and stroke styles
private void setupPaint() {
drawPaint = new Paint();
drawPaint.setColor(Color.BLUE);
drawPaint.setAntiAlias(true);
drawPaint.setStrokeWidth(5);
drawPaint.setStyle(Paint.Style.FILL_AND_STROKE);
drawPaint.setStrokeJoin(Paint.Join.ROUND);
drawPaint.setStrokeCap(Paint.Cap.ROUND);
}
And initialise canvas object
private Canvas canvas;
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
canvas.drawCircle(xCordinate, yCordinate, RADIUS, drawPaint);
}
And finally, for every view refresh or new draw on the screen, you need to call invalidate method. Remember your entire view is redrawn, hence this is an expensive call. Make sure you do only the necessary operations in onDraw
canvas.invalidate();
For more details on canvas drawing refer https://medium.com/#mayuri.k18/android-canvas-for-drawing-and-custom-views-e1a3e90d468b
#Override
public void onDraw(Canvas canvas){
canvas.drawCircle(xPos, yPos,radius, paint);
}
Above is the code to render a circle. Tweak the parameters to your suiting.
Try this
The entire code for drawing a circle or download project source code and test it on your android studio. Draw circle on canvas programmatically.
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.widget.ImageView;
public class Shape {
private Bitmap bmp;
private ImageView img;
public Shape(Bitmap bmp, ImageView img) {
this.bmp=bmp;
this.img=img;
onDraw();
}
private void onDraw(){
Canvas canvas=new Canvas();
if (bmp.getWidth() == 0 || bmp.getHeight() == 0) {
return;
}
int w = bmp.getWidth(), h = bmp.getHeight();
Bitmap roundBitmap = getRoundedCroppedBitmap(bmp, w);
img.setImageBitmap(roundBitmap);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f, finalBitmap.getHeight() / 2 + 0.7f, finalBitmap.getWidth() / 2 + 0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
Here is example to draw stroke circle canvas
val paint = Paint().apply {
color = Color.RED
style = Paint.Style.STROKE
strokeWidth = 10f
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.drawCircle(200f, 100f, 100f, paint)
}
Result
Example to draw solid circle canvas
val paint = Paint().apply {
color = Color.RED
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
canvas?.drawCircle(200f, 100f, 100f, paint)
}
Result
Hope it help
private Paint green = new Paint();
private int greenx , greeny;
green.setColor(Color.GREEN);
green.setAntiAlias(false);
canvas.drawCircle(greenx,greeny,20,green);