Develop Reference

CircularReveal animation doesn't work on first attempt

In android 5.0 i am trying to work with circular reveal animation
Problem
When i click on button to start reveal animation, on first click animation doesn't start
Second Click onwards it works normally
My Code
public class MainActivity extends ActionBarActivity {
Animator a;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final View cardType = findViewById(R.id.cardtype);
cardType.setVisibility(View.GONE);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
a = ViewAnimationUtils.createCircularReveal(cardType,
cardType.getWidth(),
cardType.getHeight(),
0,
cardType.getHeight() * 2)
.setDuration(2500);
a.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
cardType.setVisibility(View.VISIBLE);
}
});
a.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
cardType.setVisibility(View.GONE);
}
});
findViewById(R.id.icon_first_activity).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
a.start();
}
});
}
}}

I haven't tried your code, but I think you have a small ordering problem. I think you just need to set the cardType visible before you start the animation.
Edited to add:
... and you should be setting your button View.INVISIBLE, not View.GONE.
Here: This code works.
Edited once more to add:
Yes. Your problem is that you set the view GONE initially. That means it has 0 size. Then you use cardType.getHeight and cardType.getWidth as reveal coordinates. They are 0. You are going to want to set the view INVISIBLE, initially, and then use width/2 and height/2 as the center of the reveal.

Basically what others answers say, it's correct, but the problem is if you want visibility GONE (because your layout requires it GONE!) you have to set visibility INVISIBLE in the xml with height 0dp (and/or width 0dp as well) and programmatically set the correct LayoutParams even inside the click event it will work. For example my code:
...
expandButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//To not have empty scroll, the container is INVISIBLE with 0dp height.
//Otherwise the Reveal effect will not work at the first click.
//Here I set the parameters programmatically.
viewContainer.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT));
if (viewContainer.getVisibility() == View.VISIBLE) {
expandButton.animate().rotation(0f).setDuration(duration).start();
Utils.unReveal(viewContainer, 0, 0);
} else {
expandButton.animate().rotation(180f).setDuration(duration).start();
Utils.reveal(viewContainer, viewContainer.getWidth(), 0);
}
}
});
...
#TargetApi(VERSION_CODES.LOLLIPOP)
public static void reveal(final View view, int cx, int cy) {
if (!hasLollipop()) {
view.setVisibility(View.VISIBLE);
return;
}
//Get the final radius for the clipping circle
int finalRadius = Math.max(view.getWidth(), view.getHeight());
//Create the animator for this view (the start radius is zero)
Animator animator =
ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius);
//Make the view VISIBLE and start the animation
view.setVisibility(View.VISIBLE);
animator.start();
}
#TargetApi(VERSION_CODES.LOLLIPOP)
public static void unReveal(final View view, int cx, int cy) {
if (!hasLollipop()) {
view.setVisibility(View.GONE);
return;
}
//Get the initial radius for the clipping circle
int initialRadius = view.getWidth();
//Create the animation (the final radius is zero)
Animator animator =
ViewAnimationUtils.createCircularReveal(view, cx, cy, initialRadius, 0);
//Make the view GONE when the animation is done
animator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
view.setVisibility(View.GONE);
}
});
//Start the animation
animator.start();
}
If you set only GONE in the xml, the first time will never work because height/width/x/y/etc.. are 0. Also, if you just set INVISIBLE before the call to the animation it will not work as well, but if you start with visibility INVISIBLE it will initialize the layout params.

what i did is, Like i have two view with same height,As we now visibility gone returns 0 {height and width} than i am giving visible view height every time and its work for me.

The solution is don't get values directly into code
Either put the animation code on click and the values outside onclick
or get the values from other activity
By values i mean cardType.getWidth() and cardType.getHeight()

Translation animation for hiding View

I need my listview to hide and show using alternative touches. Hence for hiding the listview on the left side of the screen am using animation
Animation animation = new TranslateAnimation(-100, 0,0, 0);
animation.setDuration(100);
animation.setFillAfter(true);
lv.startAnimation(animation);
lv.setVisibility(0);
and for displaying am using
lv.setVisibility(View.VISIBLE);
My problem is list view is not getting hide. It will go leftside and coming back again. I don't know how to hide listview to the left edge completely on touch. Please help in achieving this

// To animate view slide out from left to right
public void slideToRight(View view){
TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);
}
// To animate view slide out from right to left
public void slideToLeft(View view){
TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);
}
// To animate view slide out from top to bottom
public void slideToBottom(View view){
TranslateAnimation animate = new TranslateAnimation(0,0,0,view.getHeight());
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);
}
// To animate view slide out from bottom to top
public void slideToTop(View view){
TranslateAnimation animate = new TranslateAnimation(0,0,0,-view.getHeight());
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);
}

Finally i find the answer and it is very simple modification in co-ordinate values. And the code is
Animation animation = new TranslateAnimation(0,-200,0, 0);
animation.setDuration(2000);
animation.setFillAfter(true);
listView1.startAnimation(animation);
listView1.setVisibility(0);
Here am setting negative value at second co-ordinate cause from o it is moving twowards negative side which means the view is moving twowards inner left side.

If you want to hide your View, use
View.INVISIBLE // constant value 4
or
View.GONE // constant value 8
You are currently using the value 0 which is the constant value of View.VISIBLE.
I suppose you want to hide the ListView after animating it?
But you are showing the ListView directly after starting the animation. Take a look at AnimationListener and hide the ListView
onAnimationEnd(...)
For example:
// assuming the listview is currently visible
Animation animation = new TranslateAnimation(-100, 0,0, 0);
animation.setDuration(100);
animation.setFillAfter(true);
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
lv.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
lv.startAnimation(animation);

for the general understanding of what you don't know, i found you another post that explains it very good!! The View and its animation work a bit different as it might be expected!
https://stackoverflow.com/a/5888969/2074990

Button not responding to Click Event after Translation animation

I have performed a Translation animation on button ,everything work as i excepted ,but only the problem is after the animation the button not responding to click event please correct me
Button b=(Button)findViewById(R.id.button1);
TranslateAnimation slide=new TranslateAnimation(0, 30, 0,-40);
slide.setDuration(500);
slide.setZAdjustment(TranslateAnimation.ZORDER_TOP);
slide.setFillAfter(true);
b.startAnimation(slide);

This will translate the object in y direction:
ObjectAnimator mover = ObjectAnimator.ofFloat(v, "translationY", 0, 400);
mover.start();

If you are handling animations at lower level API (below HoneyComb) your animation actually does not moves the button but only its images.Its click will be at same place where you have placed it in your layout.

I faced this issue and I did fix it just some second ago. So, I think that I should share my solution with you guys.
In animation xml file,I removed android:fillAfter="true" when keep android:fillEnabled="true".
Register Animation listener, then in onAnimationEnd() method, I call View#Layout() to change the position of the view.
int newLeft = (int) (layoutContent.getLeft() + layoutContent.getWidth() * 0.8);
layoutContent.layout(newLeft,
layoutContent.getTop(),
newLeft + layoutContent.getMeasuredWidth(),
layoutContent.getTop() + layoutContent.getMeasuredHeight());
In my case, what the animation do is that slides the layoutContent to leftside 80% of width.
It works fine. Hope this helps.
#Update: Today, you can use ObjectAnimator on android 3.0 +. If you are developing for android under 3.0, you can find it at support library v.4. ObjectAnimator is bester for animation.
#Update#2: You can use ViewPropertyAnimator on android api higher 12 version.
It provides better performance, and fix problem with click events. Example:
mButton.animate()
.setDuration(TIME)
.translationY(VALUE)
.start();

I could achieve what you wanted but you will have manage co-ordinates manually.
See if it works for you.
public class AnimationTestActivity extends Activity {
private Button mButton;
private LinearLayout.LayoutParams params;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mButton = (Button) findViewById(R.id.button);
mButton.setOnClickListener(mClickListener);
params = (LayoutParams) mButton.getLayoutParams();
}
private android.view.View.OnClickListener mClickListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
TranslateAnimation animation = new TranslateAnimation(0, 0, 0, 400);
animation.setDuration(2000);
animation.setAnimationListener(mAnimationListener);
v.startAnimation(animation);
}
};
private AnimationListener mAnimationListener = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
params.topMargin = params.topMargin + 400;
mButton.setLayoutParams(params);
}
};
}

The animation do not change the View actually Position. even if you setfillAfter(true), The position it can accept click event is the original position.

I found an easy solution define the button final position in layout and start the animation from some position ,ie specify the fromX or fromY instead of putting as zero

Try to use this:
b.layout(0, -40, b.getWidth(), b.getHeight());

Using Animation to swipe views

I have a FrameLayout that recognize swipe gestures (up and down).
For example: if a swipe up are performed, I should animate the current view (that is MATCH_PARENT x MATCH_PARENT) to goes up at the same time a new view come from bottom.
I can achieve this with animations?

I solved this way:
private void swipeUp() {
current.currentPage++;
final View hidingView = currentView;
TranslateAnimation hide = new TranslateAnimation(0, 0, 0, -getHeight());
hide.setAnimationListener(new AnimationListenerAdapter() {
#Override
public void onAnimationEnd(Animation animation) {
hidingView.setVisibility(View.GONE);
}
});
hide.setDuration(1000);
hidingView.startAnimation(hide);
TranslateAnimation show = new TranslateAnimation(0, 0, getHeight(), 0);
show.setFillAfter(true);
show.setDuration(1000);
View nextView = getView();
addView(nextView, createLP());
nextView.startAnimation(show);
currentView = nextView;
}

If you want to actually switch views, you need to implement an AnimationListener that takes care of the animation. If you want more complex behavior like a "finger following" scroller between views, you will likely have to use something a bit more complex, but if you're just saying
if(I flicked upwards)
move view up
then AnimationListener is perfect for you. Just make sure you set the listener to the Animation in code.
Hope this helps!

Android Layout Animation won't work

I have a LinearLayout (LayoutContentView) which can contain one or two view (SubView1 and SubView2) (they are eitherTextView or ImageView).
This layout is in another LinearLayout (MyScreenLayout).
I want to make an animation on LayoutContentView so it can move and show just a part of it in MyScreenLayout.
Both of these layouts have setClipChildren(false); so it can let it's children draw outside it-self.
Depending on different parameters, I can change the size of the content, and the size of the content I will show.
Basically, I expend from top to bottom to show the two subviews and unexpend for bottom to top to show only the second subview. Before I expend, I increase the size of the LayoutContentView, so it can show the two subviews, and after I unexpend, I decrease the size of the LayoutContentView, so it can only show the second subview, and it let space on the screen for other elements.
Here is my method for expending and un-expending LayoutContentView :
mLayoutContentView.clearAnimation();
float yFrom = 0.0F;
float yTo = 0.0F;
float xFrom = 0.0F;
float xTo = 0.0F;
if (expend) { // if we expend
// I change the height of my LayoutContentView so it we can show it's two subviews
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView1H + subView2H;
setLayoutParams(lp);
invalidate();
// we start the animation so it shows only the second subview
yFrom = -subView1H;
// and we animate from top to bottom until it shows the two subviews
yTo = 0;
} else { // if we un-expend
// we animate from bottom to top starting by showing the two subviews
yFrom = 0;
// and progressively hiding the first subview and showing only the second subview
yTo = -subView1H;
}
Animation anim = new TranslateAnimation(xFrom, xTo, yFrom, yTo);
anim.setDuration(1000);
anim.setFillAfter(true);
anim.setFillEnabled(true);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (!expend) {
// if we un expend at the end of the animation we can set the size of LayoutContentView to the size of the second subview again
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView2H;
mLayoutContentView.setLayoutParams(lp);
invalidate();
}
}
});
mLayoutContentView.startAnimation(anim);
The way I made my animation I need it to apply on LayoutContentView, the layout which contain two subview, and with startAnimation() it doesn't do the animation.
I tried to use a LayoutAnimationController, but instead of doing the animation on the LayoutContentView, it does it on each of its children...
I also tried to do the animation on each children myself, but I don't know why, the second subview isn't shown.
Each time I've tried to use HierarchyViewer, but it's does see the change made by the animation.
Does anyone know a solution or have faced the same problem and found a good solution ?
EDIT :
Well it seems that if you set a background color to your TextView and move them with animation, the background move but even if you have set the fill after parameter to your animation, the background moves back to it's original position or something like that, and therefore as I set a background color to both of my SubViews, somewhat one of the SubView's background hide the background of the other...
And there also a problem if after the animation, one of the SubView is still outside the its layout, there is also a problem during the animation, so I add a limitation to what I intended to here too.