I have a custom view that extends ImageView and displays an image and a text header. The text is drawn via drawRect and drawText overriding onDraw.
The first image is the typical use case: The header is inside the canvas bounds.
I'd like to be able to draw the header outside the canvas bounds. If I just draw it outside the bounds, just like image 2, the result is correct, ie. the rectangle is drawn outside the canvas and the text too.
However, I wonder if this works by accident and what kind of problems I may expect. I suppose it's a bad thing to draw outside the canvas bounds, but it'd be very convenient for me because I won't need to further complicate this custom view, or wrap it inside a container, or create another view, etc... I've only tested it on a couple devices I own and it works...
Can anybody share some thoughts on why this is OK, it doesn't really matter, or is very wrong?
For those interested, I've found a legit way to do this:
set the bottom padding to the header size plus the blank space
draw normally, now everything's inside the canvas and the imageView is adjusted to the requested padding, leaving the bottom padding area free to draw my header :P
Related
How can I draw (bitmap, line, etc) outside the bounds of a view? From the view's onDraw(), I've read this is not possible as everything drawn will get clipped to the view's bounds.
I did come up with one solution but I'm hoping there's a better one. What does work is to create a transparent view that is at the top of the z order and includes the area I want to draw in (the entire app client area). Then, whenever I want to draw outside some child view, I can simply translate to the coordinates to the transparent view and draw there.
I also read about SurfaceView hoping that would do what I want. But I think it's main purpose is to provide drawing in a separate thread and doesn't solve the problem I'm discussing.
To be clear, it isn't sufficient to simply draw in the parent of the target view because other views in the parent will be higher in the z order and hide the drawing.
Intuition tells me there's a "right way" to do this. Anyone know?
I'm drawing the conclusion that the right way is to do what I proposed - create a transparent view that is at the top of the z-order for the space you need to draw in.
I come to this conclusion after learning how the Navigation Drawer drawing works - exactly in this way. So, if Google uses this technique, I conclude that it's the best way available.
is there any way to blur only part of an image in android?
searched a lot but dint find any help.
most of the examples use gaussian blur which blurs full imageview.
i want to allow user to dynamically draw rectangle on imageview & on action up
area within rectangle should be blured.
any help will be really appreciated.
Bluring images on the fly is not an easy task, ask Roman Nurik (The one behind Muzei app)
He gave useful tips on this Google+ post but it's for animated images, from focus to blur.
In your case, I would say that you need to (roughly):
Get the bounds of the drawn rectangle
Get the image part that corresponds to the previous bounds
Blur on the fly the previous image part
Draw, into the same canvas, the blurred image part on top of the original image
Set up a onDrag Listener to move the drawn rectangle and do again step 1
EDIT: After re-thinking about it, computing and draw a blurred area each time the drawn rectangle move it too heavy, it won't work. The solution is probably this:
Blur the entire image and keep it into memory
Get the bounds of the drawn rectangle
Get the part of the blurred image that corresponds to the previous bounds
Draw, into the same canvas, the blurred image part on top of the original image
Set up a onDrag Listener to move the drawn rectangle to do again step 2-3-4
put the image view in a relative layout.
you detect the touch events of the user.
for each rectangle that he is drawing, you add an image view of it is size superposed to the initial one (I mean in the same relative layout) and of course with your blur effect.
you will see your image view blured part by part ...
put another layout on the half part of the image and set a translucent type background to the layout.
Once you have drawn your rectangle set alpha = 0.5 or as per your need so that your dynamic view that you have drawn will look blurred.
This is code for blur:
http://shaikhhamadali.blogspot.in/2013/07/gaussian-blur-imagebitmap-in-imageview.html
In this code computeConvolution3x3 method is used for computing the blur.For computing blur it convert the bitmap in to pixel array then it apply on those pixel. So you have to just do is get pixels array of that part of the image that you want blur.
I am trying to build a simple game. I have a SurfaceView, on which I draw the background for the game:
Canvas canvas = surfaceHolder.lockCanvas();
//draw on canvas....
surfaceHolder.unlockCanvasAndPost(canvas);
I have a View that I want to 'layer' on top of the SurfaceView, but I still want to be able to see the background underneath it. How do I draw the view on top of the SurfaceView. The View has its own onDraw method, with an associated canvas, so I'm assuming that I need to place the View on top of the SurfaceView where I drew the background?
There may be a more efficient way to to do this, but when it comes to stacking views on top of one another, you could put the SurfaceView inside a FrameLayout, and then put the view you want on top after the SurfaceView in the XML, but still inside the FrameLayout (meaning it's drawn later, and thus on top). This will accomplish the stacking you desire.
If you wish to position the view that will go on top of the SurfaceView anywhere else than exactly matching it, or the top left, then you could use a RelativeLayout where you layout the SurfaceView with alightParentLeft, alightParentTop, alignParentBottom, and alightParentRight all set to true. Then again having the view you want drawn on top coming after the SurfaceView in xml will draw it on top, and you can position it wherever you want.
Now as for you wanting to the view on top of the SurfaceView to be see through, you can do that by setting it's alpha value. if you are aiming for 3.0+ you can just use a view's .setAlpha method, but if you are aiming for lower, you could set a zero millisecond AlphaAnimation to set the alpha of the view (There may be a better way to do this, but this is the only way I to set alpha on views pre honeycomb).
Hope this helps! Best of luck!
In my android application I am stuck in a problem and nothing seems to work for me.
I have an ImageView on the top of another ImageView inside a relative layout.
Now I need to resize the imageview on top when user touches one of its corners and drags.
Just like a cropping frame we generally see. When we drag any one corner, then the diagonally opposite corner must remain fixed and the resizing must be done across the corner which is being dragged.
What I am doing is setting OnTouchListener and getting new/dragged coordinates on Action.MOVE then I tried to resize using Bitmap's createScaledBitmap. This does resize the image view but not across the corner which is being dragged. I am totally confused .
How I can use the coordinates to draw an Image View just like we do it while drawing a rectangle using Canvas.
Please help.
I wouldn't do this in an ImageView. I would subclass View and override onTouchEvent and onDraw to handle the input and draw all the various components. You have to break this down into it's components and manage a number of objects in this view.
You have a Rect that represents the size of the crop area. This probably defaults to the size of the control. In onTouchEvent, you need to test for an area around each corner and then keep track of which corner is being dragged to resize your Rect appropriately.
You don't have to call createScaledBitmap each time you draw it, and you probably shouldn't because you are flirting with an OutOfMemoryException at that point (clean up your Bitmaps too slowly and you'll find out the hard way what this is). Just decode the Bitmap when the control gets created and draw it to the canvas using a destination Rect.
Lots of code to write, but it sounds like a fun project. There's no easy way to drop in a control like this (if I'm understanding you correctly). You have to manage the touches, drags, and the destination rectangle inside the custom View.
I want to crop my image which is being displayed on an ImageView. How I want to go about it is that I want a re-sizable rectangle to be displayed on the image. That rectangle will have moveable corners (which I can drag around with touch) to increase/decrease its size. The image below illustrates a demo of something I would like to develop.
P. S. I am not quite sure how to phrase my question.
What I want:
http://imageshack.us/photo/my-images/832/customcropbox.jpg/
The final solution I came up with after ample research was:
Extend ImageView to make my own custom view.
#Override onDraw method and do my custom drawing there in that method.
Implement onTouchListener on the view to get the touch events and process them according to their position.
e. g.
I checked whether the touch was in the radius of the anchor point circle I drew around the movable rectangle that I was drawing in my overriden onDraw method.
Edit:
I am sorry guys I don't have that piece of code anymore, I came here after a very long time otherwise would have loved to help you out.
Heartache.