Flip card transition between two activities Android - android

I am trying to implement the Flip card transition effect between two activities in my app by taking help from :
http://blog.robert-heim.de/karriere/android-startactivity-rotate-3d-animation-activityswitcher/.But I couldn't understand what areActivitySwitcher.java and Roatate3dAnimation.java in the above mentioned site. I have two activities in my app between whom I want to show this transition effect. They are MainActivity.java and About_us.java.Please explain the code with reference to my activities. I also searched on http://developer.android.com/training/animation/cardflip.html but in vain as it not for activities.
Thanks!

Disclaimer: This is not a an actual 3D Animation Flip. This merely imitates it, though some don't agree. Give it a try and if you like it, great! If you don't, my apologies.
In my early days of learning to code, I was having issues implementing a proper 3D Animation flip, so I went with this, it simulated it enough to satisfy my needs, but to each her/his own. To do what I did, first make sure that you have a folder called anim under your res folder for your project. Then you will need to create two xml files (I have mine called from_middle and to_middle). Below is the code for each of those:
from_middle.xml:
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.0" android:toXScale="1.0"
android:pivotX="50%"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotY="50%"
android:duration="500" />
to_middle.xml:
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0" android:toXScale="0.0"
android:pivotX="50%"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotY="50%"
android:duration="500" />
After those are created, all you need is one line of code to run this animation, which you should be placed after you start your next activity:
overridePendingTransition(R.anim.from_middle, R.anim.to_middle);
Done! Now run it!

Based on user1672053's answer, you need to add a start offset to the from_middle.xml resource which is equal to the duration of the to_middle.xml animation resource.

Related

How to animate button in android with flip effect?

I want to animate a button in android just like flip a board, one side is black and another side is green.
I can see some answer just like a rotate effect but it's not like a flip effect. I don't want to do such simple take with OpenGL.
Below shake.xml doesn't work for me:
<?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" />
You can use like view.animate()...(here set your animation).setDuration(100).start();
But it need api larger than 13.

how to create FAB reveal animation like Google keep and Inbox by gmail

I am trying to create FAB animations like shown in Google design guidelines such as circular reveal, morph animations (google keep and inbox) in API Level 15. I used google design support library to add FAB icon to my app.
I would appreciate your help in this regard. Thanks.
The FAB animation is actually a simple scale animation that you can write yourself, something like this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="250" />
</set>
That goes in an xml in the "anim" folder.
And then you animate the button in the java code:
final Animation mAnimation = AnimationUtils.loadAnimation(context, R.anim.animation_name);
yourFab.setVisibility(View.VISIBLE); //It has to be invisible before here
yourFab.startAnimation(mAnimation);

Is it possible to inherit an anim xml resource from another and overwrite attributes?

I have these two files in res/anim folder:
my_anim.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<rotate
android:duration="3000"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
my_anim_faster.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<rotate
android:duration="1000"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toDegrees="360" />
</set>
Both are the same animation, only the speed (android:duration) changes. Is there a way to make this code shorter? For instance, by my_anim_faster inheriting from my_anim and overwrite android:duration attribute or something similar.
Thanks.
A little briefing: XML resource cannot be inherited. The xml approach gives you the ability to create easy and fast resources like drawables, animations and layouts, but there is no way to inherit them. Google added fragments that allows you to extend and reuse layout functionality in some way but this is not an inheritance. In drawable/animation resources you can reuse other resources but you cannot extend them. So if you want to reuse some logic try to design your resources such a way that you can reuse them in another ones.
Now to your case: No, there is no way to do this via xml. Using xml you can only describe your resource. You can change the duration using java code programmatically.
Animation myAnimation = ...;
...
myAnimation.setDuration(1000);
As far as i'm aware you can't inherit other animations when creating an animation in xml like how you can "include" a layout when creating a layout.
Your best bet would to create the animation programmatically (in an AnimationUtils class for example) and when you call it supply the duration as an argument. e.g.
MyAnim myAnim = new MyAnim(1000);

How to change XML properties in running time?

I am trying to implementing an pending transition animation for my app.
I have over rided the pending transition with function
overridePendingTransition(R.anim.incomming, R.anim.outgoing);
and in the outgoing.xml file, it is like:
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="0"
android:toXScale="1.0"
android:toYScale="1.0"
android:startOffset="300"
android:duration="300" />
</set>
and I want to change android:pivotY in running time, so how can I change this value in the java code?
I know some thing about SharedPreference, but the variables in the xml files are different from SharedPreference. So what I should do?
In this case, it seems to be impossible to change the value of the attribute at run time in the xml file. Maybe the straightforward way is to create other xml files and decide which to use as animation resources at run time.

android animation starting new activities or dismissing an Activity

Is there a tutorial or a code example of various kinds of View Animations available in Android. Basically what I am trying to do is say if start a new Activity, I am trying to get that activity start out like zoom in till it fills the screen or Fade out when I am going to finish the activity. Is there a way i can do this ?
Any help will be greatly appreciated.
Thanks
-Chandu
So you need to use OverridePendingTransition from the activity: http://developer.android.com/reference/android/app/Activity.html
Some examples with Fade in/out can be found here: http://www.anddev.org/novice-tutorials-f8/splash-fade-activity-animations-overridependingtransition-t9464.html
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator"
android:zAdjustment="top"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000" />
Zoom:
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale=".1"
android:fromYScale=".1"
android:toXScale="1.0"
android:toYScale="1.0"
android:duration="2000" />

Categories

Resources