I have a Tab (suing Fragments) and the Tab content is actually a View Flipper.
The first page of the Flipper shows list of images. When I click to some of the items I go to Flipper's page 2. Which will show the image in Full Screen. When I click Back it goes to the List View (with all images). Everything works as expected until I put in and out animations to the ViewFlipper. After I set in Animation to be some Translate animation, I see nothing, until I touch the screen. When I touch the screen I see the image, and if not, I see empty tab content.
I am using ViewFlipper and Fragments from the support package.
Is this some sort of expected behavior or an issue?
ADDED ANIMATIONS
left_to_right_in.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="700"
android:fromXDelta="-220%"
android:fromYDelta="0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toXDelta="0"
android:toYDelta="0" />
</set>
left_to_right_out.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="700"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toXDelta="220%"
android:toYDelta="0" />
</set>
right_to_left_in.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="700"
android:fromXDelta="220%"
android:fromYDelta="0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toXDelta="0"
android:toYDelta="0" />
</set>
right_to_left_out.xml:
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="700"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toXDelta="-220%"
android:toYDelta="0" />
</set>
And then I use them like this:
When I want to show the second child of the view flipper:
mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.left_to_right_in));
mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.left_to_right_out));
mViewFlipper.showPrevious();
When I want to go back to the first child:
mViewFlipper.setInAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.right_to_left_in));
mViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.right_to_left_out));
mViewFlipper.showNext();
Related
Why I am not able to slide text view in android from right to left continuously?
I am using below xml:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="-3%p"
android:toXDelta="3%p"
android:duration="1200" />
</set>
If you want your animation to play continuously, you need to add the following two attributes to "translate" tag.
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="-3%p"
android:toXDelta="3%p"
android:duration="1200"
android:repeatCount="infinite"
android:repeatMode="reverse"/>
</set>
Note that if “repeatCount" and "repeatMode" are added to "set" tag, things will not work as expected.
I want to know how to make this kind of animation in android ( The same in Battery Doctor app ).
I found a way to do this using two green images with an oppacity of 50% one behind the other and another one on the front to hide the unwanted content ( The circle ),I animate the first green image by XML using the code below
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="1850"
android:fromDegrees="-4"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:toDegrees="4" />
<translate
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="0"
android:toYDelta="1"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:duration="1500" />
</set>
And the second green one by using this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="1800"
android:fromDegrees="-1"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:toDegrees="1" />
<translate
android:fromXDelta="80"
android:toXDelta="-4"
android:fromYDelta="-1"
android:toYDelta="1"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:duration="1500" />
</set>
But how can I create the view programatically ?I want to set the level dynamically from code. for example myView.setLevel(45);
I have finally found a library: WaveView
https://github.com/john990/WaveView
Edit
This library https://github.com/gelitenight/WaveView also does the same thing with more features. You can :
Shift the wave horizontally.
Set water level.
Set vertical size of wave.
Set horizontal size of wave.
I'm having trouble figuring out how to slide activities in and out with a push of a button. What I want is for the user to push a button and then the screen slides. The way I want it is for the 1st activity (the one with the button) to slide out to the left while the new 2nd activity slides in from the right.
With the below code, when the button is clicked, the 1st activity slides out to the right when I want it to slide out to the left. Then when it is done sliding, all that is remaining is a black screen for a split second and then the 2nd activity just appears and does not slide in.
So the 1st activity is sliding out the incorrect direction and the next activity just appears instead of sliding. What am I doing wrong? I am having a hard time understanding the XML files so hear is the code for everything below.
1st activity
#Override
public void onCreate(Bundle savedInstanceState) {
playBtn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Intent intent = new Intent(MainMenu.this, Levels.class);
startActivity(intent);
overridePendingTransition(R.anim.enter_from_right, R.anim.exit_out_left);
}
});
2nd activity
#Override
public void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.levels);
overridePendingTransition(R.anim.enter_from_left, R.anim.exit_out_right);
So I am thinking that some of my XML files might be incorrect. Here they are.
enter_from_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="100%"
android:toXDelta="0%" >
</translate>
</set>
enter_from_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="-100%"
android:toXDelta="0%" >
</translate>
</set>
exit_out_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="0%"
android:toXDelta="-100%" >
</translate>
</set>
exit_out_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="600"
android:fromXDelta="0%"
android:toXDelta="100%" >
</translate>
</set>
EDIT
Removing the overridePendingTransition() from the 2nd activity made it so the 1st activity slides out to the left which is what I wanted. But, when the 1st activity slides away, it still is just revealing a black screen instead of having the 2nd activity slide in from the right.
Instead of overriding the animation in both startActivity() and the new activities onCreate(), you only need to override the animation just after the startActivity() call.
The two ints you provide for overridePendingTransition(int enterAnim, int exitAnim) correspond to the two animations - removing the old Activity and adding the new one.
For your second question, I believe you have the fromXDelta set wrong, -100% should be all the way off the left-hand side of the screen, not the right, so changing this to 100% should fix it.
look at my gist, it works perfectly:
1.Override CommonActivity's startActivity and finish
#Override
public void startActivity(Intent intent) {
super.startActivity(intent);
overridePendingTransition(R.anim.from_right_in, R.anim.from_left_out);
}
#Override
public void finish() {
super.finish();
overridePendingTransition(R.anim.from_left_in, R.anim.from_right_out);
}
2.from_left_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
3.from_right_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%p"
android:toXDelta="0" android:interpolator="#android:interpolator/accelerate_decelerate"
android:duration="300"/>
<alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="300" />
</set>
4.from_left_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0"
android:toXDelta="-100%p"
android:duration="300"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
5.from_right_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0"
android:toXDelta="100%p"
android:duration="300"/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="300" />
</set>
gist link: https://gist.github.com/JagieChen/f5cc44bf663f3722bd19097be47ccf9b
There's an error not only in the enter_from_right animation, that should have a fromXDelta of 100% instead of -100%, but even in the enter_from_left animation, that should fave a fromXDelta of -100% instead of 100%.
Cheers,
Change fromXDelta to -100% from enter_from_left and fromXDelta to 100% from enter_from_right in your code, this will give you a correct sliding animation.
Don't forget the pivot at this point!
fE. Move from up to down. pivotY is 100% that meen's bottom, so your 0% are on the bottom and -100% are up and you don't see it. Makes it more handy when you set the pivot to your border.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="false">
<translate
android:duration="800"
android:fromYDelta="-100%"
android:toYDelta="0%"
android:interpolator="#android:anim/bounce_interpolator"
android:pivotX="50%"
android:pivotY="100%"/>
</set>
i have some questions to the animations on android:
first of all, does someone have good links to sites where animations for android get explained? Only XML-Animations please, i dont want to use java-code for the animations..
The second question: I want to simply animate the activity from tight to left when it comes up and from left to right when it goes, but i can't achieve this simple animation.
My XML Files look like this:
push left in:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromXDelta="-100%p"
android:toXDelta="0" />
<alpha
android:duration="#android:integer/config_shortAnimTime"
android:fromAlpha="1.0"
android:toAlpha="1.0" />
</set>
push right out:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromXDelta="0"
android:toXDelta="100%p" />
<alpha
android:duration="#android:integer/config_shortAnimTime"
android:fromAlpha="1.0"
android:toAlpha="1.0" />
</set>
In my code i use: overridePendingTransition(R.anim.push_left_in,R.anim.push_right_out); and overridePendingTransition(R.anim.push_right_out,R.anim.push_left_in); after the super.finiah();
This is how I set up a simple fade in, fade out animation
Here's my incoming.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator" >
<alpha
android:duration="#android:integer/config_mediumAnimTime"
android:fromAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
Here's my outgoing.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator" >
<alpha
android:duration="#android:integer/config_mediumAnimTime"
android:fromAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
And here's how I call set the animation in my activity
Intent i = new Intent(this, ABCActivity.class);
startActivity(i);
ModeSelectActivity.this.overridePendingTransition(
R.anim.outgoing, R.anim.incoming);
Also, be sure to override onBackPressed() for the reverse animation
#Override
public void onBackPressed() {
// TODO Auto-generated method stub
super.onBackPressed();
ModeSelectActivity.this.overridePendingTransition(R.anim.outgoing,
R.anim.incoming);
}
You have many animations on this page:
http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.3.5_r1/frameworks/base/core/res/res/anim/
You can look at slide_in_left.xml,slide_in_right.xml, slide_out_left.xml and slide_out_right.xml.
You can use these transitions with overridePendingTransition().
I have Two Activities A and B
A is starting B like
Intent i = new Intent();
i.setClass(A.this, B.class);
startActivity(i);
overridePendingTransition(R.anim.right_slide_in, R.anim.down_slide_out);
finish();
where
R.anim.right_slide_in is
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:fromXDelta="+100%p"
android:toXDelta="0"
android:duration="700"
/>
</set>
and
R.anim.down_slide_out is
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
<translate
android:fromYDelta="0"
android:toYDelta="+100%p"
android:duration="700" />
</set>
This work great. B comes sliding from right and A goes out sliding down.
Problem is during this transition. A Blank Screen appears as background of whole app
How to avoid that ?
Any help would be appreciated
Try using an application theme (e.g., <application android:theme="#style/MyTheme">) that sets the android:windowBackground attribute to a drawable, such as:
<resources>
<style name="MyTheme" parent="android:Theme">
<item name="android:windowBackground">#drawable/app_background</item>
</style>
</resources>
Not Possible As far As Application Layer is Concerned.
Try this.
move_to_left.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/linear_interpolator" >
<translate
android:duration="800"
android:fromXDelta="100%p"
android:toXDelta="0%p" />
</set>
move_to_right.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/linear_interpolator" >
<translate
android:duration="800"
android:fromXDelta="0%p"
android:toXDelta="-100%p" />
</set>
startActivity(recipeCategoriesIntent);
overridePendingTransition(R.anim.move_to_left, R.anim.move_to_right);