Changing X and Y position of button/ changing margin of button dynamically - android

I would like to change margin of my buttons in d applcn...
suppose I have 5 buttons like this in a linear layout, one below d other...
When I focus on a button, its width should increase (which I know how to handle) and at the same time, width should increase linearly towards both left and right.
i.e. If the current width of the button is 250 with x co-ordinate as 50 (that means button's left is 50 and button's right is 300), when I focus on the button I should get x co-ordinate as 75 (left = 25 and right = 325). How to change the margin/x co-ordinate of the button?

Check out the Animation and ScaleAnimation classes at http://developer.android.com/reference/android/view/animation/Animation.html and http://developer.android.com/reference/android/view/animation/ScaleAnimation.html.
One way to do it is to define two XML files in your res/anim directory, one to make the button larger, and the other to make it smaller. So for makeLarger.xml
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1"
android:toXScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:duration="200"
android:fillAfter="true" />
Here, you're increasing the width by 10%, from 1.0 to 1.1. For the makeSmaller.xml file, swap the values of android:fromXScale and android:toXScale, or just set them as you like. To apply the animation to your button,
Button myButton = (Button)findViewById(R.id.myButton);
myButton.setAnimation(AnimationUtils.loadAnimation(this, R.anim.makeLarger));
Of course, the makeLarger and makeSmaller animations should be set when you touch the button.
I hope this helps!

Related

Smooth slider with two (or more) images

How I can reach such behavior with a smooth slider?
I want that first ImageView to increase his width and cover over second ImageView.
I tried three different approaches to this purpose.
First I drew bitmap (two bitmaps combined inside one canvas) inside the canvas of one ImageView. New position generated with ValueAnimation but it gives values with not equals intervals. During rendering the transition do jumps noticeably enough. On a good phone especially.
Second I did my own method for generating sequence numbers without intervals and but occurs another problem: phone cant render new bitmaps a few hundred times per second. If to do intervals jumps occur again.
Then I tried another way: to create two ImageView and first must smooth roll out over the second. But I can't reach the proper effect than the first picture must not stretch (image inside ImageView increased width together) but need a roll-out like on GIF.
Code of my third the attempt:
In fragment
val animation: Animation = AnimationUtils.loadAnimation(ctx, R.anim.scale_right)
imageView.startAnimation(animation)
imageView.visibility = View.VISIBLE
scale_right.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="6000"
android:fromXScale="0"
android:fromYScale="1.0"
android:pivotX="0%"
android:pivotY="0%"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
What do I need to do?

How to I prevent squeeze of item inside layout during scale animation?

I am using scale animation in Android relative layout , where I have a button and need to scale it to small size at one end .
I have used scale animation and it works fine , but it does have an icon which gets squeezed and its shape gets altered .
I want to prevent it and let the button take its shape without affecting the icon shape when it scales from left to right.
How can I achieve this?.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="0.1"
android:fromYScale="1.0"
android:toYScale="1.0"
android:duration="100"
android:pivotX="100%"
>
</scale>
It sounds like you don't really want a scale animation, you want a resize animation instead. A scale animation will act like you are resizing an image. A resize animation should just affect the layout parameters of the view without altering the size of the contents (just the positioning).
You can do this in XML with a property animator:
https://developer.android.com/guide/topics/resources/animation-resource#Property
Alternatively, here is an example of a resize animation in code:
https://stackoverflow.com/a/8162779/342745

Rotate an object in a circular way using buttons in android studio

I want to make a game which requires several objects to rotate around the center of the screen when you press a button ( go left or right ), however they need to orbit the center periodically as you press the button, not move when you press it once. I can make them move in that way but they do a 360 spin or go back to their original position. Can someone give me an example of how to do this? Its the same functionality as in the circle pong app.
Thank you!
There are multiple ways to do this. If you want to do it using your own Custom View. In computer graphics coordinate system (0,0) start from left top corner. For that first translate your view to center.
canvas.translate(getWidth()/2,getHeight()/2);
then in order to move an object you have to use a mathematical formula.
x = R * cos#
y = R * sin# where range of cos and sin is between 1 and -1.
R is radius . you can simply draw your view to x,y location . So it will display as it is moving.
and there are other simpler ways. See here
And also see a Custom knob I created at Here
In your anim folder create an xml
<?xml version="1.0" encoding="UTF-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:duration="1200" />
in your code
view.startAnimation(
AnimationUtils.loadAnimation(activity, R.anim.rotate_indefinitely) );
Maybe this post will help you Move ImageView elliptically around a center in a RelativeView
Here instead of 200,400 put your own diameter based on which you want to rotate the objects

Android translate animation move to absolute position

is there a way to tell a translate animation to always move to a absolute position, instead to a position relative to the card. As far as I know, using android:toXDelta only moves it to a relative position. I want it to move to a absolute position (lets say width of the screen / 2 and height of the screen / 2) from every point on the screen.
My animation:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="-20%p"
android:toYDelta="-20%p" />
Judging from official Documentation it is not possible from XML.
However, you can do this in your Java code. Example:
view.animate().translationX(0f).translationY(0f).setInterpolator(new AccelerateDecelerateInterpolator()).start();
TranslationX and TranslationY animates to an absolute position. There is also TranslationXBy an TranslationYBy that animate relatively.

How to use scale animation to hide image in Android

Is it possible to hide image using scale animation in xml. What I mean is that I have an image on the screen and I want to hide it using scale animation in the direction from 0.0 -> 1.0. So the image is on the screen and I want to start scaling it from left to right until it disappear. Is it possible?
This is not what I want. You see my app is suporting devices below 3.0. And I don't want to move an image. I want to scale it, but in opposite direction. The scale animation works with the coords of the screen, so the image will be shown if you start from 0.0 to 1.0. But I want to hide it from 0.0 to 1.0. Is it possible?
First scaling means changing the size of the image which is not what you want! you want to change the position of an image. With property animation (supported in android 3.0+) you can animate any property of an object (even non visual properties).
use this code to animate any property
ValueAnimator move = ValueAnimator.ofFloat(0,100); //start and ending value
scaleUp.setDuration(300);
scaleUp.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
Float newValue = (Float) valueAnimator.getAnimatedValue();
myObject.setX(newValue); //in pixcels
}
});
move.start();
This code changes the value of "x" property from 0 to 100 over the period of 300ms. x and y are position of your view in pixels. of course you need to first calculate start and ending point in pixels.
findout more about "x" property here http://developer.android.com/reference/android/view/View.html#setX(float)
you can also animate setTranslationX istead http://developer.android.com/reference/android/view/View.html#setTranslationX(float)
As i said earlier with property animation you can animate any property you want and it's really easy to work with, to learn more about it read this http://developer.android.com/guide/topics/graphics/prop-animation.html
I managed to do what I wanted. I used scale animation with the tag pivotX. With pivotX or pivotY you can set from what point of the image to start the animation and in what direction. You have to play a little bit with it until you recive your desired animation. Here is my code:
<scale
android:duration="4000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="450"
android:interpolator="#android:anim/linear_interpolator"
android:startOffset="300"
android:toXScale="0.0"
android:toYScale="1.0" />

Categories

Resources