Let's say the following coordinates are relative to (0, 0) being the top left corner of the phone's screen with increasing positive x values going to the right and increasing positive y values going down as diagrammed here: http://t.cyol.com/cache/temp/img/2011/02/1000/119/img/img_1297675862_0.jpg
I'd like to do a "pan out" animation where there is a little box whose top left corner is at (x, y), and it has width w and height h where x, y, w, and h are greater than 0. Everywhere inside that box is some content. Everywhere outside that box is black.
Over 500 milliseconds, the box's top left corner should move to (0, 0) and its width and height will grow to fill the entire screen. That is, over half a second, the box pans out to fullscreen.
The content inside the box is a WebView.
How do I achieve this animation? I tried scaling, but that's not what I want to achieve, because the content inside the box shouldn't get squished. Translating only works if the box starts out in a corner.
In order to achieve this effect, the whole view must be relayouted at each frame of the animation. You'll need to change the layout params of the view and call requestLayout(). Check this link:
Android Animate Scale Image to fit screen width and height
Related
I have an image 3264x1836 and I display it in a custom AppCompatImageView having dimensions 1280x720. I want to preserve the image size so I use ScaleType.CENTER, but I also want that its top-left corner is positioned at the coordinates 0,0 of my custom view, so I set the padding left and top accordingly.
Now, to achieve that I had to use 3264-1280 (the difference between the widths) as left padding and 1836-720 (the difference between the heights) as top padding while, in my opinion, these values should be both divided by 2.
Can somebody explain why?
It is likely that you are breaking the AppCompatImageView code by asking it to do something that wasn't anticipated or tested.
While the above could still be true, the padding that you are applying is correct. Here are the calculations:
For simplicity, let's take a look at the left padding needed to shift the graphic. The same sort of calculations will work for the top padding.
The width of the graphic is greater than the width of the ImageView.
d = wgraphic - wimageview
If the graphic is centered in the ImageView, then the overhang on the left and right sides will be 1/2 the difference in widths.
s = d / 2
The graphic is centered within the padding of the ImageView. The amount of padding that has to be specified must be just enough to shift the center of the graphic by the amount s.
The initial center of the ImageView without padding is
ci = wimageview / 2
The shifted center with left padding ( p ) is
cs = p + (wimageview - p) / 2
So,
s = cs - ci = p + (wimageview - p) / 2 - (wimageview / 2)
Solving for the padding needed for a shift of s we get p = 2s = d. In other words, the padding we need is twice the shift required which is what you are seeing.
A fix that doesn't involve padding would be to specify
android:scaleType="matrix"
You should remove the padding. The new scale type will apply the identity matrix to the image and place it in the top/left corner without resizing.
I have a view that I want to animate- scale it to a bigger size and at the same time move to the very top of the screen, just below the notification bar. The problem is however, at least I think, that the translationY complies with initial view scale and moves it to the top of the screen, but as the view grows, it gets cut off at top.
This is the code I'm using
image.animate()
.alpha(1f)
.translationY(0)
.scaleX(6f)
.scaleY(6f)
.start()
Any simple solution to this? A way I could calculate the real value I should set translationY to (based on scale) in order to be positioned correctly? Any help appreciated!
I am confused with setbounds method of drawable in Android. I know it is used with drawable and it set where drawable and how large it is. Briefly, it defines, bounding rectangle for drawable. But I am confused: does it set border or padding or its width or height?
This is how we use setbounds
drawableInstance.setBounds(L,T,R,B);
First scenario
So in above case, If I set 5,5,5,5 for L,T,R,B respectively, L,T,R,B of drawable will be always from its parent respectively? I mean will it be like setting hidden 5px border to every side?Besides, if image is not large enough to meets that border width to its parent, will image be bigger?
Second scenario
I set 5,5,100,100 for L,T,R,B respectively. What I am confusing is, it will starts drawing from away from parent 5px to the top and 5px to the left. That will be the start point. Then image with will be 100px because I set 100 for right. So it goes to the right 100px. Same to bottom with right.
But I tested it. I think both is not as what I think. How does it work, especially in relation to each parameter of setBounds?
The bounds values are absolute, not relative. That is, width == right - left, and height == bottom - top.
Your first example will have the top left corner of the Drawable at (5, 5), but the width and height will both be 0.
The second example will also have the top left corner at (5, 5), and the width and height will both be 95.
The bounds are not dependent on the dimensions of the Canvas to which the Drawable is drawn. For instance, if you draw a Drawable with the bounds of your second example onto a View that is only 50 by 50, its left and top sides will be inset by 5, but it will get cut off at the right and bottom borders.
Say I have a background image as such.
http://i.imgur.com/rRCtzyl.png
I want to put a button or text right inside the white box. My text or button must scale and fit the box perfectly when the image is scaled according to device screen size. The image does not fit the screen vertically so it is scrollable. I know that I need to put them in a group if I want them both to scroll together.
But how do I place the button inside the box? Since its scrollable I dont know the exact x and y values of the box. Not to mention these values will change according to device screen size. And how do I make the buttons scale to fit the box with all screen sizes?
This image is only an example. Of course I wouldn't have a problem if I drew the box myself programmatically. I would know where to put the button. Assume I dont know the coordinates and the size of the box since I didn't d
If your box object is called box, set the button to the box.x and box.y like this:
object1.x = box.x
object1.y = box.y
The scroll aspect should not matter if you put the button and image in same group and scroll the group. Then all you need to do is position the button relative to the image once, the rest will be taken care of by corona.
What will matter is the screen resolution. One way of tackling this is to view the image at full resolution and compute at what x and y pixels the box is located. For instance,
image: 200 x 300 pixels
box top left: 100, 100 (pixels from top left of image)
box width height: 20, 60
Then you use ratios: top left of button box is at 0.5, 0.3333 of image size; the button box width is 0.1 and height 0.2 of image size. Then when you start app, you compute what will be the image scaling factor based on actual resolution and you apply that to box coordinates:
device 300 x 400:
image will be scaled 1.5x in width, 1.333x in height
so button box should be at (200*1.5*0.5, 300*1.333*0.333)
with width 20*1.5 and height 60*1.333
I have a RelativeLayout with a view inside. The view overtimes changes it's position so my question is I'm running into an issue where say the top and left coordinates are say max height and max width and the view is displayed partially on screen while the rest is cut off .
So my question is when translating the view is the view adjusting relative to the center pixel of the view or the bottom left top left bottom right or top right?
In the case of translateX and translateY it doesn't matter. No matter what anchor point you would use, the result would be the same. Scale and rotation however rely on the anchor point (or pivot) defined by setPivotX/PivotY.