I have an ImageButton that I need aligned to the bottom of the screen, and when I click and drag it, it moves with my finger by a certain distance, beyond which it will not move further from the origin but continue following the direction my finger is from the origin.
When I let go, the button has to slide back to the origin.
What I have managed to do so far is to have the button follow my finger via this answer: Moving buttons via Touch
However, how should I get the origin of the button at initialization for it to bounce back after I release?
Originally I implemented the alignment of the button by having a android:layout_gravity="center|bottom" to place it at the bottom, but it somehow messes with the position of the button relative to my finger (It follows my finger movements but it's off center).
Hence, I used mButton.setY() and mButton.setX() to place it at the bottom of the screen, but it seemed hackish to use the screen dimensions to place it. Can't think of a better way.
You can set the width and height of your layout in XML using
layout_width and layout_height.
Then in your MainActivity, instantiate the layout (I will use LinearLayout as an example) and get its width and height.
LinearLayout l = (LinearLayout)findviewbyid(R.id.l1);
int height = l.getHeight();
int width = l.getWidth();
Now, whenever you release the button, you can set your its position in the following way:
mButton.setY(height - 50)
This will position the ImageButton 50 pixels above the bottom of your layout. You can also set the x position of the button as you want in the same way. Also, you should probably store height - 50 as a global variable (origin) that you can call from anywhere in your code.
Related
I am new to android animation and i've been playing with animation in android.
But one thing i just don't get it?
how to set position in tag.
My question is what 50%p means?
Suppose I have a button at some place 1/3 of the top. now i want to move it to bottom of the layout.then move to left bottom then at the center of the layout.
the doc says
Float or percentage. Starting X/Y offset. Expressed either: in pixels relative to the normal position (such as "5"), in percentage relative to the element width (such as "5%"), or in percentage relative to the parent width (such as "5%p").
once see this doc. This will help you to solve your issue.
Background
To learn animations, I'm creating a Towers of Hanoi type of game. My main goal is to animate the movement of the block from one tower to another. I've got the following layout
|------RelativeLayout------|
|-Linear-|-Linear-|-Linear-|
|-Block1-|-----------------|
|-Block2-|-----------------|
|-Block3-|-----------------|
|--------------------------|
ID| Tower1 | Tower2 | Tower3 |
I've set the XML attribute android:clipChildren="false" on every ViewGroup.
For example, if I tried to animate the movement of Block1 from Tower1 to Tower2 using Block1.animate().setDuration(3000).translationX(1000). As the layout is right now, Block1 will animate within Tower1, but Block1 gets clipped the second it leaves Tower1.
I've played with changing the z-order by adding the blocks last in the XML file. It doesn't reliably work, though.
To ensure animations don't get clipped, I've decided to add a copy of the Block1 (named copyBlock) to the root RelativeLayout, position copyBlock on top of Block1, and animate it to the destination Tower2 (defined in coordinates)
To get the destination coordinates, I was planning on adding an invisible copyBlock to Tower2, then get the coordinates. This way, I can take advantage of the LinearLayout's layout functions to account for matters such as padding, gravity, etc. Otherwise, I'll have to get the position of Tower2, calculate the topmost block, adjust the coordinates of Block1 so that it'll be on top of the topmost block and centered.
But, I'm pretty sure this way is hacky, and there's a better way
Questions
How can I get the above destination coordinates without having to add an invisible view to the destination tower? Is there a way to ask for a "prelayout" without having to add View to the layout?
Do you have any explanations for why the animation gets clipped? Is there a better way to approach this rather than adding a new view to the root RelativeLayout ViewGroup?
Ok,
1- You can't overcome the clipping issue, because you are trying to move the child beyond the parent dimensions, unless you are moving within the same parent.
2- Use FrameLayout instead of RelativeLayout so you can control views margins correctly;
3- You can get the destination coordinates by knowing the height of the root layout and width, its seems the towers width are equal, so the (total width/3) will give the cell width then get the X coordinate, and the (total height - cell height ) will give the Y coordinate of the tower ( assuming you have the tower hight)
is there a way to move the whole screen content outside the screen bounds, with titlebar and all, on the left for example, i tried
content = ((LinearLayout) act.findViewById(android.R.id.content)
.getParent());
to get the screen content and add a margin to it
FrameLayout.LayoutParams pr = (android.widget.FrameLayout.LayoutParams) content
.getLayoutParams();
pr.rightMargin = xOffset;
content.setLayoutParams(pr);
but it doesnt work, the margin appears but the content is not moved just resized to fit the screen, anyone know how to do this the simple way?
you can set the margin in negative(-) values.
for example if your want the layout to move upper use this:
android:marginTop = "-50dip or more u can put"
Are you trying to flip between views? As in, moving that layout off the screen to show another one? If so you should look at using a widget called ViewFlipper which will do exactly as you need. It can also be animated etc.
http://developer.android.com/reference/android/widget/ViewFlipper.html
I used to have an Activity that would use no ActionBar. The layout is a RelativeLayout with width and height simply matching the parent. It allowed users to drag around buttons using parts of this code in the onTouch event:
MarginLayoutParams marginParams = new MarginLayoutParams(v.getLayoutParams());
int left = (int) event.getRawX() - (v.getWidth() / 2);
int top = (int) event.getRawY() - (v.getHeight());
marginParams.setMargins(left, top, 0, 0);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
v.setLayoutParams(layoutParams);
All dandy—the button moves just below the finger and is placed correctly at the position on screen. Now, however, I enabled the ActionBar, and suddenly when clicked, the button moves ~30 pixels below the finger. To illustrate this behavior, here's what I used to have (on the left) and what happens right now (on the right):
I assume this is because the ActionBar now displaces everything by its own height. Of course, I do not want this to happen, or at least correct this, so:
How can I shift the placement in setMargins() according to the actual size of the ActionBar without using a hardcoded value?
How can I prevent the ActionBar from shifting everything in the first place? Put differently, how can I ensure my button is placed relative to the ActionBar's bottom line and directly where the finger points?
This is what I want:
(I used an approach is my code and it works. I am going to tell you the same here)
I think setMargin() is not such a clever thing to use here. Instead you can use setX() and setY() methods.
Whenever one switches over from a full screen activity to the one with Action Bar, one runs into such problem.
You will need to adjust for the Action Bar height. Instead of using getLayoutParams(), use getLocationInWindow() or getLocationOnScreen(). Since getRawX() and getRawY() work with screen positions of the view, these APIs should be used.
I Need to shift an ImageView, which is a direct child of a LinearLayout, a bit to the left.
What happens: The View is shifted (can see the "bounding box" is shifted, with android layout manager) but the drawable keeps in the same place.
Also the drawable is cut on the right side, if I set margin low enough.
Why is this? Any advice?
Clarification: I have to shift the Image to the left. That means a bit ouside of the bounds of the containing layout.
It seems elements are always clipped when they get outside of parent's bounds (also with clipChildren=false).
A solution is to create an additional container-layout for everything besides of the item to be shifted. And then shift the container-layout in the opposite direction.
For example, to shift -10dip:
<Original container ...>
<Item to be shifted/>
<New container with margin 10dip>
<Previous content of Original container ... />
</New container with margin 10dip>
</Original container>
If your container have enough padding you can set its clipToPadding to false and use negative margin!
Why are you using negative margin? use a positive a bit more to the opposite side of the ImageView to the direction you want to shift the image, i.e. if you want to shift the image to the left, use more positive margin to the right.