How to animate individual views on Activity transition? - android

How can I trigger animations on individual views when switching activities?
I.e. if the user clicks a button to go to the next page, I'd like some of my views to fly off screen, and have the background crossfade into the next screen, instead of having the whole screen be animated as one piece.
Is this possible? And if so, how should it be done? (I'm using the most recent API, 4.1, and it doesn't have to be backwards compatible)
EDIT: Currently, doing the transition-in animation is working fine by calling it in onResume(), but when I press back, the activity switches faster than any animations started in onPause() so that makes me think there's a better way/place to do this.

Overriding onResume() works fine, but onPause/onStop don't wait for
the animation to complete before moving to the next screen.
What ever starts the event ex. button click would need to start the animations before start activity is called.
button.setOnClickListener(new ViewOnClickListener() {
#Override
void onClick(... {
// start animations
// wait till they are finished
// start activity
}
});
Since every event that starts a new activity is going to have animation code I would also recommend moving it into some sort of helper class to avoid having duplicate code all over the place. ex.
button1.setOnClickListener(new ViewOnClickListener() {
#Override
void onClick(... {
helper.AnimateViews(/* probably pass activity or context */);
// start activity
}
});
button2.setOnClickListener(new ViewOnClickListener() {
#Override
void onClick(... {
helper.animateViews(/* probably pass activity or context */);
// start activity
}
});
public class ViewAnimiationHelper {
public void animateViews(Activity activity) {
// find all views if not found then don't animate them
View view1 = activity.findViewById(R.id.view1);
if(view1 != null) {
// animate view
}
View view2 = activity.findViewById(R.id.view1);
if(view2 != null) {
// animate view
}
}
}
This is all sudo java code but hopefully enough for you to get the idea. Good luck!

You can set up animations (like slide) when you switch between activities like this :
In the res folder, create an anim folder
For example, put two xml files for slide.
slide_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="200"/>
</set>
slie_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="200" />
</set>
Then on your java code just write this :
Intent i = new Intent(YourActivity.this, OtherActivity.class);
this.startActivity(i);
overridePendingTransition(R.anim.slide_in, R.anim.slide_out);
If you are testing that on a real device, don't forget to allow it to play animations (Settings -> Display -> Animations -> All Animation)
Hope it helps !:)

Related

Detect a click on an animated button

i'm making a program on android : the user has to push on an animated button to make the button invisible and increase score. But, while testing, the animated button is disabled during animation : the animation is perfectly done but we can't use animated button during animation. I've searched answers but i haven't found.
MainActivity :
Public int score = 0;
Public Button button1 = (Button) findViewById(R.id.button1);
Public Animation anim1 = AnimationUtils.loadAnimation(this, R.anim.translate_up);
button1.startAnimation(anim1);
button1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
score++;
button1.setVisibility(View.INVISIBLE);
}});
Translate_up, XML animation :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:shareInterpolator="false">
<translate
android:duration="1000"
android:fromXDelta="0"
android:fromYDelta="0"
android:interpolator="#android:anim/decelerate_interpolator"
android:startOffset="0"
android:toXDelta="0"
android:toYDelta="-900"
/>
Sorry for my bad English, i hope you understand me.
Thanks !
The button itself is actually working on it's original position. So although it looks like your button is sliding to the top, you can still click on the empty space in it's original position and trigger the onClick event.
I am afraid an animation won't work here. If it is a game then you should create a gameloop and update the position of your views (e.g. your button) in the gameloop method.

When using overridePendingTransition, modifying UI views in the called activity is very slow

a few days ago, I had a problem with updating an Action Bar menu icon based on the result of an AsyncTask: Updating Action Bar Menu Item due to AsyncTask result without delay
Now I realized that this problem is not at all related to an AsyncTask or an Action Bar. The problem occurs as well if I want to change a TextView or any other View.
After some time of trial and error I realized that the problem is caused by overridePendingTransition which I use in the Activity which calls the second Activity (where I want to change the icon):
First Activity (in an onItemClick method):
#Override
public void onItemClick(View view, int position) {
...
Intent intent = new Intent(getActivity(), SecondActivity.class);
...
startActivityForResult(intent, anyValue);
getActivity().overridePendingTransition(R.anim.slide_in_right, R.anim.no_animation);
}
The animation looks like that:
<?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="#android:integer/config_shortAnimTime"/>
</set>
And this is how the AsyncTask (onPostExecute) of the second Activity looks like:
#Override
public void onPostExecute(String result) {
super.onPostExecute(result);
if (mMenu != null) {
if (result.equals("no favorite")) {
...
mMenu.findItem(R.id.action_favorite).setVisible(false);
mMenu.findItem(R.id.action_no_favorite).setVisible(true);
} else {
...
mMenu.findItem(R.id.action_favorite).setVisible(true);
mMenu.findItem(R.id.action_no_favorite).setVisible(false);
}
}
As explained, instead of switching between two menu icons, you could also use one TextView and setting the text based on the result - the problem remains.
Do you know how I can change the animation without having this weird delay in my second Activity?
Check your integer.xml file
Make the value of config_shortAnimTime smaller according to your needs.
Its in milliseconds.
Prefer making it 1000 (1 sec).

How to set shared Preferences to show custom animation on first launch?

I'm a beginner to android programming. I'm not clear about the concept of shared preferences.
I need to set a particular animation on the first launch of the app(fragment from fragment activity) and for the consecutive launches of app(minimizing) another animation. So how can I utilize the shared preference to do so?
public class MyActivity extends FragmentActivity {
SharedPreferences prefs = null;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Perhaps set content view here
prefs = getSharedPreferences("key", MODE_PRIVATE);
}
#Override
protected void onResume() {
super.onResume();
if (prefs.getBoolean("firstrun", true)) {
prefs.edit().putBoolean("firstrun", false).commit();
// here comes your animation for first start
}
// here comes your animation for other starts
}
}
Check this documentation at developer.android.com
Have a look at these links:
http://examples.javacodegeeks.com/android/core/content/android-sharedpreferences-example/
http://www.vogella.com/articles/AndroidFileBasedPersistence/article.html
http://rajeshvijayakumar.blogspot.in/2013/03/shared-preferences-example-in-android.html
http://androiddeveloperspot.blogspot.in/2013/01/sharedpreference-in-android.html
http://alchemiaandroid.altervista.org/sharedPreferencesTutorial.html
http://www.androidhive.info/2012/08/android-session-management-using-shared-preferences/
http://www.edumobile.org/android/android-development/shared-preferences-example-in-android-programming/
http://viralpatel.net/blogs/android-preferences-activity-example/
For animations use this
overridePendingTransition(R.anim.no_anim, R.anim.slide_to_top);
to create animations create "anim" folder in "res" and create slide_left.xml like following
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="200"
android:fromXDelta="0%"
android:toXDelta="-100%" />
<alpha
android:duration="200"
android:fromAlpha="1"
android:toAlpha="0" />
</set>

Implementing slide transition after a option item selected android

I build a action bar.Which contain a item say setting (image).After clicking on the image the another activity is being started.
But I want the starting activity to show sliding transition effect.current activity slide left and hide and starting activity should slide from right to left.
here is code
code for selecting the item
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.setting:
goToSetting();
}
return super.onOptionsItemSelected(item);
}
gotoSetting function :
public void goToSetting() {
// Do something in response to button
Intent intent = new Intent(this, DisplayMessageSetting.class);
startActivity(intent);
}
which is calling activity named "DisplayMessageSetting"
please help
Edit the onCreate method in your DisplayMessageSetting activity like this :
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//specify the animation
overridePendingTransition(R.anim.slide_left_in, 0);
//...
}
Create a slide_left_in.xml file in your res/anim folder (create the folder if it doesn't exist) and paste the following :
<?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="400"/>
</set>
This way you just specified an animation set with one translate animation in it.
You have a lot more options to tweak that animation, you can learn a bit more about that here.

Animating a TextView each time it is changed

I have a button which basically changes the TextView every time it is clicked. Is it possible to associate an animation with this? I have looked at things such as a 3D flip but they seem a little too advanced for me. Any simpler suggestions?
final Button button1 = (Button) findViewById(R.id.button1);
final TextView textView = (TextView) findViewById(R.id.text_random_text);
button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
textView.setText(getNextRandomCuisine());
}
});
I suggest you to take a look at the Android webPage. http://developer.android.com/reference/android/view/animation/AnimationUtils.html
the class AnimationUtils helps you to load and Animation Pattern from your xml folder, you can for example make a "fadein" animation, you should dafür create an xml datei, name it for example "fadein.xml" it should be like this
<?xml version="1.0" encoding="utf-8"?>
<alpha
android:duration="200"
android:fromAlpha="0.0"
android:toAlpha="1.0" >
</alpha>
with this you are just telling your android device, that this animation should variates the alpha value (also the transparence) of your view, from 0 to 1, making your view visible, the "duration" parameter is just how any milliseconds will take to execute this animation.

Categories

Resources