I'm new to android programming and what I'm trying to figure out is this;
In my layout i have a TextView, ImageView, and Button, all on a vertically oriented LinearLayout.
I want to be able to dynamically draw circles in the ImageView, without disturbing the rest of my layout(textview/button). I'm trying to create a canvas, and use the drawcircle function within canvas to set the location of the circle. And then draw that canvas to my imageview in some way. I cannot get this to work, is there a trick to this? Or is my method fundamentally wrong? How would i go about drawing circles to the ImageView without recreating my entire layout?
Thanks!
I had the same challenge and came to the conclusion that overwriting onDraw will at least in the general case not work. My blog explains the reasons. What worked very well for me is the following:
Create a new image bitmap and attach a brand new canvas to it.
Draw the image bitmap into the canvas.
Draw everything else you want into the canvas.
Attach the canvas to the ImageView.
Here is a code snippet for this:
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
ImageView myImageView = ...
Bitmap myBitmap = ...
Paint myRectPaint = ...
int x1 = ...
int y1 = ...
int x2 = ...
int y2 = ...
//Create a new image bitmap and attach a brand new canvas to it
Bitmap tempBitmap = Bitmap.createBitmap(myBitmap.getWidth(), myBitmap.getHeight(), Bitmap.Config.RGB_565);
Canvas tempCanvas = new Canvas(tempBitmap);
//Draw the image bitmap into the cavas
tempCanvas.drawBitmap(myBitmap, 0, 0, null);
//Draw everything else you want into the canvas, in this example a rectangle with rounded edges
tempCanvas.drawRoundRect(new RectF(x1,y1,x2,y2), 2, 2, myPaint);
//Attach the canvas to the ImageView
myImageView.setImageDrawable(new BitmapDrawable(getResources(), tempBitmap));
ImageView imageView=(ImageView) findViewById(R.id.image);
Bitmap bitmap = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.BLACK);
canvas.drawCircle(50, 50, 10, paint);
imageView.setImageBitmap(bitmap);
I think that a better approach would be to create a custom ImageView and Override the onDraw method. Something like:
public class CustomView extends ImageView {
public CustomView(Context context) {
super(context);
}
public CustomView(Context context, AttributeSet attrst) {
super(context, attrst);
}
public CustomView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
MyBitmapFactory bitMapFac = null;
public void setBitmapFactory(MyBitmapFactory bitMapFac)
{
this.bitMapFac = bitMapFac;
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawColor(Color.TRANSPARENT);
/*instantiate a bitmap and draw stuff here, it could well be another
class which you systematically update via a different thread so that you can get a fresh updated
bitmap from, that you desire to be updated onto the custom ImageView.
That will happen everytime onDraw has received a call i.e. something like:*/
Bitmap myBitmap = bitMapFac.update(); //where update returns the most up to date Bitmap
//here you set the rectangles in which you want to draw the bitmap and pass the bitmap
canvas.drawBitmap(myBitMap, new Rect(0,0,400,400), new Rect(0,0,240,135) , null);
super.onDraw(canvas);
//you need to call postInvalidate so that the system knows that it should redraw your custom ImageView
this.postInvalidate();
}
}
It would be a good idea to implement some logic that checks if there is a fresh bitmap to acquire via the update() method, so that the code inside onDraw won't execute every time and put overhead to the system.
And then use your custom view wherever you need it. The easiest way would be to declare it directly inside the activity_layout.xml as such:
<com.mycustomviews.CustomView
android:id="#+id/customView"
android:layout_centerInParent="true"
android:layout_height="135dp"
android:layout_width="240dp"
android:background="#android:color/transparent"/>
And then access is in your code like any other view by using:
customView = (CustomView) findViewById(R.id.customView);
If you have a xml with layout with all your elements arranged in vertical orienttion. You can achieve what you want by making a class in your package which extends Class View and override its onDraw method. draw circle in it as you want . then instead of adding imageView in the layout add this your own view in the xml layout.like the following
< LinearLayout >
< TextView> < /TextView>
< Button> < /Button>
<com.prac.MyView> </ com.prac.MyView>
< /LinearLayout>
Check the following link for 2D graphics. Its a great tutorial to read.
http://organicandroid.blogspot.com/2010/08/starting-to-play-with-graphics.html
Hope this help : )
There are a couple of ways to do what you want, but using an ImageView the way you describe isn't one of them. One possibility is to have the ImageView display an animated Drawable. You can then focus on having your Drawable implementation draw the circles. Another is to create a new Bitmap every time you want the image to change and set the ImageView to display the new Bitmap. The usual way of doing this, though, is to create a custom View subclass. The API Demos sample project has an example of a custom view, and you can find lots tutorials with Google.
Related
I am drawing lines on an ImageView by doing something like this:
Bitmap imageBitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();
Bitmap duplicateBitmap = Bitmap.createBitmap(imageBitmap.getWidth(),imageBitmap.getHeight(),Bitmap.Config.RGB_565);
Canvas targetCanvas = new Canvas(duplicateBitmap);
targetCanvas.drawBitmap(imageBitmap,0,0,null);
Paint paint = new Paint();
targetCanvas.drawLine(0f,100f, imageBitmap.getWidth(),100f,paint);
imageView.setImageDrawable(new BitmapDrawable(getResources(),duplicateBitmap));
This works fine when the Image has a decent or good resolution.
But it looks like this when the image has a low resolution. (Which is a bad experience)
Now, how do I draw sharp and crisp lines on a low res image?
For once I thought I should mask the image with a high res canvas. But then I was clueless about how to proceed with this idea. Also, this might be a memory inefficient implementation.
I finally figured out with #D. Karchnak's guidance...
Let's say your phone's screen is 1080x1920, you create a layout with a
fullscreen ImageView, therefore this ImageView is also 1080x1920. Now
you load a .png image as a BitmapDrawable. This PNG image has a
resolution of 400x400, therefore the bitmap inside BitmapDrawable is
also 400x400. If you draw this "small" bitmap to a fullscreen
ImageView, it will get blurred out, because of low resolution. If you
draw a line to this 400x400 bitmap, this line will also get blurred
out. That's also why it works with decent or good resolution.
All I need to do is, create a subclass of android's ImageView and then shift my drawing logic into the onDraw method (of course after overriding it). Like so:
public class FineLineImageView extends AppCompatImageView {
public FineLineImageView(Context context) {
this(context, null);
}
public FineLineImageView(Context context, #Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public FineLineImageView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
// logic for drawing goes here
}
}
If you really need a Bitmap with the result, make sure the duplicateBitmap is the same size as the ImageView you're drawing it with.
If all you need is to draw a grid over a ImageView, I'd create a custom class, extending ImageView. Override it's draw(Canvas) method and use provided Canvas to draw the grid.
Code for this would look something like this:
class GridImageView(context: Context....): ImageView(...) {
val gridPaint = Paint() //Set color, strokeWidth etc...
#Override
fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
//TODO - complex grid drawing here...
canvas.drawLine(x1, y1, x2, y2, paint)
}
}
I'm writing a custom view that displays signals. In order to shorten my onDraw() time I cache everything I've drawn so far in a Bitmap and just append to that in every onDraw() call. By doing this I can save huge amounts of time since I only need to draw a few fixels at a time instead of redoing the whole thing.
There is on thing bothering me though - it appears as drawing directly to the provided canvas provides a more "accurate" drawing than drawing on the bitmap first and then drawing the bitmap on the canvas. By looking at the lower part of the following picture you can see the difference:
I uploaded a demo project displaying the discrepancy at https://github.com/gardarh/android-uglybitmapdrawing/ but the relevant code is as follows:
#Override
public void onDraw(Canvas canvas) {
if(cachedBitmap == null) {
cachedBitmap = Bitmap.createBitmap(getWidth(), 200, Config.ARGB_8888);
cachedCanvas = new Canvas(cachedBitmap);
}
for(int i = 0; i < COORDS.length; i++) {
float[] curCoords = COORDS[i];
canvas.drawLine(curCoords[0], curCoords[1], curCoords[2], curCoords[3], linePaint);
cachedCanvas.drawLine(curCoords[0], curCoords[1], curCoords[2], curCoords[3], linePaint);
}
canvas.drawBitmap(cachedBitmap, 0, 120, null);
}
Why are the two traces not the same and more importantly, how can I make the lower trace look like the upper one?
The reason for the differences is that the canvas drawing is done by hardware acceleration (GPU), and the bitmap drawing is done by software (CPU). If you disable hardware acceleration, they become the exact same.
If you multiply the X coordinates by 10, you will see that the difference is in the way lines are joined. These are minor one pixel difference and I wouldn't bother with them. I am not sure which one is the more accurate, they seem like just slightly different implementations.
Android framework API provides 2D drawing APIs for simple animation that does not require major dynamic changes.
There are two ways of implementation using these API.
1. Drawing to a View
2. Drawing on a Canvas
1.Drawing a circle to View
Drawing to view is a better option when your UI does not require dynamic changes in the application.
This can be achieved simply by extending the View class and define an onDraw() callback method.
Use the Canvas given to you for all your drawing,
using various Canvas.draw...() methods (Ex: canvas.drawCircle(x / 2, y / 2, radius, paint);). onDraw() is a callback method invoked when the view is initially drawn.
Below is a simple example code to draw a circle:-
MainActivity.java
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
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);
int x = getWidth();
int y = getHeight();
int radius;
radius = 100;
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
// Use Color.parseColor to define HTML colors
paint.setColor(Color.parseColor("#FB9J2F"));
canvas.drawCircle(x / 2, y / 2, radius, paint);
}
} }
2. Drawing rectangle on a canvas
To draw dynamic 2D graphics where in your application needs to regularly re draw itself, drawing on a canvas is a better option. A Canvas works for you as an interface, to the actual surface upon which your graphics will be drawn.
If you need to create a new Canvas, then you must define the bitmap upon which drawing will actually be performed. The Bitmap is always required for a Canvas.
The below example explains to draw a rectangle:-
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mylayout"> </LinearLayout>
MainActivity.java
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Paint paint = new Paint();
paint.setColor(Color.parseColor("#DD4N5C"));
Bitmap bitmap = Bitmap.createBitmap(512, 800, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawRect(150, 150, 250, 250, paint);
LinearLayout layout = (LinearLayout) findViewById(R.id.mylayout);
layout.setBackgroundDrawable(new BitmapDrawable(bitmap));
}
}
I disagree that you are saving much by going the bitmap route. You might consider a data structure that stores the drawn signal and converting this to a JSON object that can be serialized/deserialized.
As for your question, this is an educated guess but it has more to do with rescaling of the drawn signal, since you are not using getHeight() when you create the bitmap.
So basicaly the theory is this: i want to create a class that holds a bitmap, which is loaded from a resource. then i want to create a new object of that class and add it to a layout.
So far i've managed to do everything except idk, how to add the bitmap to a layout.
And i want it to be displayed on an existing layout.
bitmap class:
class BitmapView extends View
{
public BitmapView(Context context)
{
super(context);
}
#Override
public void onDraw(Canvas canvas) {
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.wave);
// canvas.drawColor(Color.BLACK);
canvas.drawBitmap(bmp, 10, 10, null);
}
}
and i call it with setContentView(new BitmapView(this));
but this draws the picture over the whole screen. i want it to display the background that was set in a previous layout. Also is there any way i can set bitmap size?
Thanks
Use an Imageview for displaying bitmap
ImageView imgView=new ImageView(context);
imgView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
imgView.setBitmapImage(bitmap); //Your bitmap goes here.
setContentView(imgView);
use setImageBitmap(bmp). Put an ImageView inside your layout. Reference it with ImageView im = (ImageView) findViewById(R.id.myBitmapId);. When you create your bitmap simply do im.setImageBitmap(bmp);
I have created a class which extends View class.
public class SplashScreen extends View
and i use it by setting contentview
View splash = new SplashScreen(this);
setContentView(splash);
I need to set background image but I can't use layout. I think I need to do canvas drawing but I don't know how to do.
protected void onDraw(Canvas canvas) {
ballBounds.set(ballX-ballRadius, ballY-ballRadius, ballX+ballRadius, ballY+ballRadius);
paint.setColor(Color.LTGRAY);
// canvas.drawImage(R.drawable.background_image); (Ps: I know there is no function such as drawImage)"
canvas.drawOval(ballBounds, paint);}
If you want to just set the background you can do
public SplashScreen(Context context, AttributeSet attrs) {
super(context, attrs);
setBackgroundResource(R.drawable.background);
}
you can add image on canvas as:
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.pic180);
Matrix matrix=new Matrix();
matrix.postScale(0.8f, 0.8f);
matrix.postRotate(45);
Bitmap dstbmp=Bitmap.createBitmap(bmp,0,0,bmp.getWidth(),
bmp.getHeight(),matrix,true);
canvas.drawColor(Color.BLACK);
canvas.drawBitmap(dstbmp, 10, 10, null);
Don't you just want to change SplachScreen type to activity? Then setContentView change to whatever your layout is and if you want that splach screen appear before your application, make it first in Manifest and in splashscreen end, destroy activity and start your application menu activity. Then you won't need View class and less work finding where is problem
I have a code where I draw image:
class Panel extends View {
public Panel(Context context) {
super(context);
}
#Override
public void onDraw(Canvas canvas) {
Bitmap _scratch = BitmapFactory.decodeResource(getResources(), R.drawable.calvin_logo_small);
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(_scratch, x-point, y-point, null);
}
}
How can I draw this image in my activity, but I don't want to change may layout. I have layout: setContentView(R.layout.main); This is possible to draw in this lauout with canvas? I have this activity and this layout have a lot of components. I only want image in place where I click with canvas. This is idea. I start application where start activity with my setContentView(R.layout.main);. After that I click on the screen and canvas draw picture in place where I clicked. This is possible to do?
Your code should work. Just override the onTouchEvent() for the view, store the co-ordinates of the touch event in field variables and invalidate() the view so that onDraw() would be called. Use the co-ordinates in onDraw() to render the image as you've already done.
To improve performance, you can cache the bitmap if it's not going to change.