I'd like to apply 2 alternate rotation animations to a View. Each rotation should start after the click on the same View.
The result I'm looking for is:
the user clicks on the View and it rotates from 0° to 135°
the user clicks again on the View and it rotates from 135° to 0° (to the initial state)
The problem is that, when the user performs the second click, the Button resets to the initial aspect before starting the animation correctly.
I'm targeting Android APIs<11 so I'm using the startAnimation() method. The animations are applied to a Button view defined as follows:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
The animations are the following
rotate_cw.xml (0° to 135° rotation):
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<rotate
android:duration="300"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="135" />
</set>
rotate_ccw.xml (135° to 0° rotation):
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="300"
android:fromDegrees="135"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="0"/>
</set>
The animations are then applied in this way, where flag is a boolean global variable:
Button b = (Button) findViewById(R.id.button);
b.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (flag) {
Animation a = AnimationUtils.loadAnimation(this, R.anim.rotate_cw);
b.startAnimation(a);
} else {
Animation a = AnimationUtils.loadAnimation(this, R.anim.rotate_ccw);
b.startAnimation(a);
}
flag = !flag;
}
});
Am I missing anything?
Thanks in advance for your help.
Related
I need to locate a click on one ImageView (image1) and then to set my second ImageView (image2) to the same position, and start a rotate animation on image2.
My animatiom works fine when i don't change image2 position.
When I want to change the position and start the animation together image2 is moving all over the screen.
My XML code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="-50"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
/>
</set>
My java code is:
image1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
image2.setX(image1.getX());
image2.setY(image1.getY());
Animation animation =
AnimationUtils.loadAnimation(MainActivity.this, R.anim.myanim);
image2.startAnimation(animation);
}
});
I need to rotate the drawable resource of ImageButton. I've succeeded rotating functionality to my Button but rotating functionality affect whole button. All I want to do is rotate only drawable inside ImageButton.
How to handle this situation ?
PS: I accessed drawable inside ImageButton but I wasn't able give any animation functionality.
Thanks in helpings
Here my ImageButton xml;
<ImageButton
android:id="#+id/button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:layout_marginTop="-40dp"
android:background="#color/titlebackground_color"
android:src="#drawable/open" />
Rotate first xml;
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<rotate
android:fromDegrees="-180"
android:toDegrees="-360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500"
android:startOffset="0"
/>
</set>
Rotate Second xml;
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<rotate
android:fromDegrees="-180"
android:toDegrees="-0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="500"
android:startOffset="0"
/>
</set>
Animation functionality;
public class LayerInfoFragment extends Fragment {
int count = 0;
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.layer_info_main, container, false);
btnClose = (ImageButton) v.findViewById(R.id.button);
btnClose.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation rotate = AnimationUtils.loadAnimation(getActivity(), R.anim.rotate_first);
Animation rotatex = AnimationUtils.loadAnimation(getActivity(), R.anim.rotate_last);
if (count % 2 == 0) {
v.setRotation(180);
v.setAnimation(rotate);
} else {
v.setRotation(0);
v.setAnimation(rotatex);
}
count++;
}
});
}
}
There are 2 things to try I think.
1) Add code v.startAnimation(rotate); after v.setAnimation(). I suspect your animation never got started. I was thinking before that android:startOffset in the settings would trigger a start but that is not clear to me.
2) Try RotateAnimation, a direct subclass of Animation, instead of Animation objects. It seems many used RotateAnimation more than anything else. Besides that, the other issue I suspect is in the layout file.
Example:
RotateAnimation rotate = (RotateAnimation) AnimationUtils.loadAnimation...
Tell us what happens.
I am making an android app, and I have a button which leads to a messaging place. On the activity with the button, I check if there is any unread messages, and if so I want to do something to the button to let the user know that there is something unread.
I was thinking of having the button sorta vibrate horizontally like 3 shakes every 2 or 3 seconds.
I know how to run a thread in the background which does something every x milliseconds. But what I don't know what to do is shake it horizontally 3 times.
Can anyone help with this?
I was thinking of using the sin function, for the animation, I can use output from a sin function to get values that go up and down, which I can set the horizontal position of the button... But this seems too extreme, is there a better way?
I can't comment on #omega's comment because I don't have enough reputation but the answer to that question should be something like:
shake.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100" <!-- how long the animation lasts -->
android:fromDegrees="-5" <!-- how far to swing left -->
android:pivotX="50%" <!-- pivot from horizontal center -->
android:pivotY="50%" <!-- pivot from vertical center -->
android:repeatCount="10" <!-- how many times to swing back and forth -->
android:repeatMode="reverse" <!-- to make the animation go the other way -->
android:toDegrees="5" /> <!-- how far to swing right -->
Class.java
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
view.startAnimation(shake);
This is just one way of doing what you want, there may be better methods out there.
create shake.xml in anim folder
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="10"
android:duration="1000"
android:interpolator="#anim/cycle" />
and cycle.xml in anim folder
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="4" />
now add animation on your code
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
anyview.startAnimation(shake);
If you want vertical animation, change fromXdelta and toXdelta value to fromYdelta and toYdelta value
Class.Java
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_with_the_button);
final Animation myAnim = AnimationUtils.loadAnimation(this, R.anim.milkshake);
Button myButton = (Button) findViewById(R.id.new_game_btn);
myButton.setAnimation(myAnim);
}
For onClick of the Button
myButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
v.startAnimation(myAnim);
}
});
Create the anim folder in res directory
Right click on, res -> New -> Directory
Name the new Directory anim
create a new xml file name it milkshake
milkshake.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="10"
android:repeatMode="reverse"
android:toDegrees="5" />
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class HeightAnimation extends Animation {
protected final int originalHeight;
protected final View view;
protected float perValue;
public HeightAnimation(View view, int fromHeight, int toHeight) {
this.view = view;
this.originalHeight = fromHeight;
this.perValue = (toHeight - fromHeight);
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
view.getLayoutParams().height = (int) (originalHeight + perValue * interpolatedTime);
view.requestLayout();
}
#Override
public boolean willChangeBounds() {
return true;
}
}
uss to:
HeightAnimation heightAnim = new HeightAnimation(view, view.getHeight(), viewPager.getHeight() - otherView.getHeight());
heightAnim.setDuration(1000);
view.startAnimation(heightAnim);
Dependency
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}}
and then add dependency
dependencies {
compile 'com.github.varunest:sparkbutton:1.0.5'
}
Usage
XML
<com.varunest.sparkbutton.SparkButton
android:id="#+id/spark_button"
android:layout_width="40dp"
android:layout_height="40dp"
app:sparkbutton_activeImage="#drawable/active_image"
app:sparkbutton_inActiveImage="#drawable/inactive_image"
app:sparkbutton_iconSize="40dp"
app:sparkbutton_primaryColor="#color/primary_color"
app:sparkbutton_secondaryColor="#color/secondary_color" />
Java (Optional)
SparkButton button = new SparkButtonBuilder(context)
.setActiveImage(R.drawable.active_image)
.setInActiveImage(R.drawable.inactive_image)
.setDisabledImage(R.drawable.disabled_image)
.setImageSizePx(getResources().getDimensionPixelOffset(R.dimen.button_size))
.setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
.setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
.build();
In Kotlin, this way after XML:
Define a View:
val playDel = findViewById<ImageView>(R.id.player_del)
Find a Animation: Here from Android Lib
val imgAnim = AnimationUtils.loadAnimation(this, android.R.anim.fade_out)
Connect to the View
playDel.animation=imgAnim
First create shake.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="10"
android:repeatMode="reverse"
android:toDegrees="5" />
Class.java
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
view.startAnimation(shake);
here is xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="150dp"
android:layout_height="match_parent">
<Button
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
here is java code
private Button text;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
text = (Button)findViewById(R.id.textview);
text.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
text.startAnimation(getScaleAnimation());
}
});
}
private ScaleAnimation getScaleAnimation(){
ScaleAnimation animation = new ScaleAnimation(1f,1.2f,1f,1.2f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
animation.setDuration(1000);
animation.setFillAfter(true);
return animation;
}
I am performing a simple ScaleAnimation on a Button.Is there any way I can get the animated view?
Just open anim folder inside res folder. Create an xml file. Then you need to create set tag. Inside of it, you can create scale tag.
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator">
<scale
android:fromXScale="0.5"
android:toXScale="2"
android:fromYScale="0.5"
android:toYScale="2"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
</set>
Note: do not forget to include xmlns:android declaration.
Now, inside of onCreate method or wherever you want, just put following. I am animating(scaling) a button itself when it is clicked:
Button but = (Button) findViewById(R.id.button1);
but.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Animation anim = AnimationUtils.loadAnimation(AnimationActivity.this, R.anim.animation);
but.startAnimation(anim);
}
});
EDIT:
in case you want to rotate it while scaling, you can put following inside of the xml file:
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
/>
Hope this helps.
Use this way
Create an xml inside /res/anim folder and put the below code into it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale android:fromXScale="0.0" android:fromYScale="0.0"
android:toXScale="1.0" android:toYScale="1.0"
android:duration="700" android:fillBefore="false" />
</set>
Place the below code inside the java file:
Animation scaleAnimation
= AnimationUtils.loadAnimation(this, R.anim.logoanimation);
Btn.startAnimation(scaleAnimation);
logoanimation is the name of my animation xml file.
for more refer this tutorial
I'm trying to do a rotating image animation.
I need to rotate an icon around itself just like they do in a progressbar, but what I'm getting is an image rotating around a circle.
Here is my animation code
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2500"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
Where am I going wrong in here?
Thanks
This is the source code for the layout main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/testButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="animationText"
android:onClick="AnimClick"/>
<ImageView
android:id="#+id/testImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="image_desc"
android:scaleType="fitCenter"
android:src="#drawable/cat2" />
</RelativeLayout>
To implement the rotation animation, we can define the animation by XML or Java code. If we want to write the animation in the xml, we need to create an animation xml file under /res/anim folder. Here, we create a xml file named rotate_around_center_point.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<rotate
android:duration="2500"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
and this is my Activity:
public class MainActivity extends Activity implements OnClickListener {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btn = (Button) findViewById(R.id.testButton);
btn.setOnClickListener(this);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
ImageView animationTarget = (ImageView) this.findViewById(R.id.testImage);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_around_center_point);
animationTarget.startAnimation(animation);
}
}
You could try with the following code, rather than doing it in XML:
RotateAnimation rotate = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
rotate.setDuration(4000);
rotate.setRepeatCount(Animation.INFINITE);
yourView.setAnimation(rotate);
Well I got where I was wrong. I gave padding to my image which caused it to move aside a little every time it rotated.
Anyhow I removed the padding and now it's working just fine.
Add the following xml in the animation folder
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
android:duration="4000"
android:fromdegrees="0"
android:pivotx="50%"
android:pivoty="50%"
android:todegrees="360"
android:toyscale="0.0">
</set>
Hope this will help you..
for more information http://www.blazin.in/2013/09/simple-rotate-animation-in-android.html