Develop Reference

Android: Fade view in and out

I need to display an image button that fades in and out (and in and out and so on...)
The transparency can be set with setAlpha but how can I fade in and out? I mean I cannot do it on another thread because you need to do such things on the UI thread, right?
I guess it can be done with animations but I haven't found anything, because I don't have any experience with animations and don't really know what to search for...
Actually what I really want is to fade one image in and another one out but I guess the easiest way is to place the first image button below the second and just fade the second one. Or is there an easier way to do it?

Here is the solution I'm using now, that works on API level lower than 12:
AlphaAnimation anim = new AlphaAnimation(1.0f, 0.0f);
anim.setDuration(1000);
anim.setRepeatCount(NUM_REPEATS);
anim.setRepeatMode(Animation.REVERSE);
button.startAnimation(anim);

This is an animation we used in our project. Spinner is a view so you can change this with your imageview. So indeed 2 images on top of eachother, one visible one invisible. This is how we did it. Hope it helps.
spinner.setVisibility(View.VISIBLE);
spinner.setAlpha(0);
spinner.animate().setDuration(200).alpha(1).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
spinner.setVisibility(View.VISIBLE);
}
});
infoActivityContent.animate().setDuration(200).alpha(0).setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
infoActivityContent.setVisibility(View.GONE);
mainPresenter.logout();
}
});

You have to read Crossfading Two Views from Android developers. In this tutorial is explained how to do what you want.

in kotlin:
view.animate().alpha(1f).setDuration(1000)
.setInterpolator(AccelerateInterpolator()).start()
You can add an AnimatorListenerAdapter in setListener to handle other view states.

You can make several sequential frames of your first image morphing into your second image and back, then define them as animation-list and start animation in onCreate
button_frames.xml:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/frame1" android:duration="100" />
<item android:drawable="#drawable/frame2" android:duration="100" />
....
layout:
<ImageView android:id="#+id/button"
android:background="#drawable/button_frames"/>
OnCreate:
ImageView button= (ImageView)findViewById(R.id.button);
mAnimation = (AnimationDrawable) animationView.getBackground();
button.postDelayed(new Runnable() {
public void run() {
mAnimation.start();
}
}, 100);

Implement Animation Class ( You can load it thru XML Or create it dynamically).
Then you can set it thru API setAnimation(Animation animation).

Best way to implement custom view with animation at the center of the screen?

My GOAL is to implement custom toast in my application as follows:
MyCustomToastClass.makeText(context,View,anyDurationInMS);
I want to set the "Toast" gravity, Layout, duration(not just Length.SHORT/LONG)
Things i've tried so far:
Class with windowManager object
problem was it must implement android system animation in:
params.windowAnimations
and when I tried to implement my custom animation as followed:
windowManager.addView(mLayout);
Animation AlphaAnimation = new ...
it didn't implement my animation.
Class with the rootView element to add the Toast's layout to it:
In this way I succeeded to implement everything only when the root view was FrameLayout type (With other layout I couldn't set the "Toast" gravity to center).
I would appreciate if someone has implemented this feature, Or to guide me if i'm missing something in one of my ways.
thanks

Sorry for misunderstand your question
if you want to create an pop up like toast and the duration is up to you maybe you can try to create a custom view that will contain the content you want to be toasted after that you can place your main layout in the frame layout then everytime the user trigger your custom toast you can add the custom view to your frame layout so it'll be positioned in front of your main layout and for fade in fade out animation you can use this
Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new AccelerateInterpolator()); //and this
fadeOut.setStartOffset(1000);
fadeOut.setDuration(1000);
or if you want to use XML
FadeIn
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.0"
android:toAlpha= 1.0"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"
/>
FadeOut
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"
/>
and for the time you can use
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
// FADE OUT THE POP UP/TOAST HERE
}
}, /*SET THE TIME HERE*/);
I hope this answer is clear enough for you
and if you still have some question about my answer don't hesitate to ask in the comment :)

How to avoid blink of View when using animation?

I use translate and rotate animations to position View inside FrameLayout in onCreate event. I want animations to perform instantly so I set duration for both of them to 0. But when application starts there is a short blink of my View in top left corner of screen and then it becomes positioned according to animation parameters. How can I avoid this blink?

I spent whole day with that problem. fillAfter and fillBefore has nothing to do with that. Try this before animation start:
view.setVisibility(View.GONE); // view is our View we trying to animate
Then set animation listener for your animation:
animation.setAnimationListener(new AnimationListener(){
public void onAnimationEnd(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationStart(Animation animation) {
v.setVisibility(View.VISIBLE);
}

use animation.setFillAfter(true) or animation.setFillBefore(true), depending on your needs. This should resolve the blink

Having a tag inside the parent tag of your animation file will cause this, try it with only one tag and you will see the difference. I am working with this right now

Odaym's answer is the solution for the issue actually. If you have something like that:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true">
<set
android:duration="1000">
<translate
android:fromXDelta="100%"
android:toXDelta="0"
/>
</set>
</set>
Change it into this:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="true" android:duration="1000">
<translate
android:fromXDelta="100%"
android:toXDelta="0"
/>
</set>

Set the visibility after the animation execution code but not in "onAnimationEnd", also try to set the duration
view.setVisibility(View.VISIBLE); // view is our View we trying to animate

Android-Move content downwards

I'm very new regarding developing apps for android. Now what I want to do is to implement four buttons and as soon as a user clicks, let's say, on the topmost button, another two sub-buttons should appear underneath the clicked button and the other three remaining buttons should automatically move downwards.
I think my explanation is not hundred per cent clear, so I try to illustrate the problem with some images.
Now here are the four buttons:
http://advancedata.ad.funpic.de/First-AGApp.png
And as soon as the user pushes button one, two extra buttons should appear and the other three buttons should move downwards:
http://advancedata.ad.funpic.de/Second-AgApp.png
I would be very thankful for any advice how to implement this.
Thanks,
enne

Draw all your buttons in a LinearLayout with vertical orientation. Add the attribute
android:visibility="gone"
to the buttons that should appear when clicking the main buttons. Then you can show those buttons in the OnClickListener of the main buttons with the line:
button.setVisibility(View.VISIBLE);
where button is the reference to your layout in the code.
Button button = (Button) findViewById (R.id.your_button_id);
EDIT:
To add an animation to the process, you have to slide up/down the new buttons appearing and the buttons below. (Group the views into Layouts so it's easier to apply the animations).
Here you have the two XML files to create in your res/anim folder:
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="-50" android:toYDelta="0"
android:duration="300" />
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromYDelta="0" android:toYDelta="-50"
android:duration="300" />
Create the animations in your code with:
Animation slideDown = AnimationUtils.loadAnimation(this, R.anim.slide_down);
and apply it to the buttons with:
secondaryButton.startAnimation(slideDown);
When sliding up, you need to set the visibility to "gone" after the animation is finished, not before. In order to do that, you need to set the animation listener and hide the button in onAnimationEnd:
slideUp.setAnimationListener(new AnimationListener () {
#Override
public void onAnimationEnd(Animation animation) {
secondaryButton.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationStart(Animation animation) {}
});

Android slide down animation

I have a toolbar aligned at the bottom and a WebView above it, which fill remaining height. Now I want to slide down the toolbar in order to hide it, and while it's animating the webview height should expand. I've tried using TranslateAnimation but unfortunetely it's not adjusting toolbar's real position, only it's contents are moved. Here's what I tried:
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="700"
android:fillAfter="true" />
And the actual code:
final View v = findViewById(R.id.browseToolbar);
Animation animation = AnimationUtils.loadAnimation(someContext, R.anim.toolbar_hide);
v.startAnimation(animation);
How can I do it?

I wrote some code to do actual resize animations. Take a look:
http://www.touchlab.co/blog/resize-animation/
Also look at a presentation I did on Android animation
https://docs.google.com/present/view?id=djqv5kb_187c62jvbf7
Essentially, as mentioned above, the regular animation classes only affect what's in their parent view. The key to understanding them is they aren't "real". Think of the Android animation as a mirage. If you run the example app I created, say you do a scale animation and make a button smaller, if you click outside, where the button USED to be, it still registers as a button click. Android animations don't actually affect real boundaries and dimensions.
What the code in my blog post does, essentially, is implement a ViewGroup.OnHierarchyChangeListener. When stuff is added/removed from the hierarchy, the container animates a physical resize.

When you use android animation only the pixels of the view are shifted. To actually move the view, you will need to add an animation listener to the animation object and override the onAnimationEnd method. In that method you need to programatically move the view.
AnimationListener animListener = new AnimationListener() {
#Override
public void onAnimationStart(Animation arg0) {}
#Override
public void onAnimationRepeat(Animation arg0) {}
#Override
public void onAnimationEnd(Animation arg0) {
Move the view here
}
};
animation.setAnimationListener(animListener);