I'm building the design of an app I'm developing, and I'm trying to get an image to fade into the screen. However, the image remains invisible while it translates successfully. This is the code:
facebookLoginButton = (ImageView)findViewById(R.id.facebookLoginButton); // Start of facebookLoginButton code
facebookLoginButton.setTranslationY(250f);
facebookLoginButton.setImageAlpha(0);
facebookLoginButton.animate().translationYBy(-250f).alpha(1).setDuration(1500); // End of facebookLoginButton code
I know that the image moves successfully because when I remove the facebookLoginButton.setImageAlpha(0);, I see the image moving into the screen. How come the image stays invisible?
Note: There's no functionality to the app yet, which is why my button is an ImageView.
The ViewPropertyAnimator returned by View.animate() follows the builder pattern. Each of the methods return the pending ViewPropertyAnimator, you must call start() to activate the animation.
Edit: The alpha is also not animating because setImageAlpha() sets the alpha value for the image within the View, not the View itself. While ViewPropertyAnimator animates the alpha of the View, not the image within the View. Although ImageView.setAlpha(int alpha) is deprecated, View.setAlpha(float alpha) is not, and you must use this method to set the alpha for the View. Then ViewPropertyAnimator can animate that value:
facebookLoginButton.setTranslation(250F);
facebookLoginButton.setAlpha(0.0F);
facebookLoginButton.animate()
.translationYBy(-250F)
.alpha(1.0F)
.setDuration(1500)
.start();
Related
I'm new to Android and need advice. I have a GridLayout with multiple ImageViews. Each ImageView has a drawable and a background color. On button click, I want to animate two things, depending on user's input: 1) move the entire view to a new position (this part is clear and doesn't cause problems), and 2) move only the image's drawable to a new cell, leaving the view with the background color at the original position. I'm completely stuck on this second task. How do I move drawables using animation? Thanks for any help.
move only the image's drawable to a new cell, leaving the view with the background color at the original position
I think you can't "move a drawable". But you can do the following:
introduce a View - let's call it movingDrawableView - showing just the drawable but with a transparent background, this View is hidden at first
Set the position of this movingDrawableView to overlap the View with the drawable and the colored background and make it visible
Set the drawable of the View with the colored background to null
start the animation for movingDrawableView
as soon as the animation is finished, fill the underlying View with the drawable and show a background as required
hide movingDrawableView
Within Android, I'm trying to move a TextView from outside the parents bounds into view, but the contents never shows up, or remains clipped if it was partially within the bounds already.
Initial situation at start
Situation after animation
(Below this is another view, that was completely out of bounds and isn't drawn either)
I have 4 TextViews below each other in a custom Object extending RelativeLayout. Based on a percentage the top 2 should move outside it's bounds and the bottom 2 should move in (from the bottom).
I use the following code to update the properties of each TextView. In this class each variable **positionY* is filled with their initial position from the layout-xml. effect is percentage between 0 & 1. The animation works, but the views aren't drawn again.
public class ActionBarTitleView extends RelativeLayout {
public void updateTransition(float effect) {
float height = getHeight();
titleView1.setY(title1positionY - height*effect);
detailView1.setY(detail1positionY - height*effect);
titleView2.setY(title2positionY - height*effect);
detailView2.setY(detail2positionY - height*effect);
invalidate();
}
}
What I tried
After some researching I found a few hints what the issue might be, but so far none of the tried options had any effect. Below is a list of things I've found on SO and tried.
Calling invalidate() on the RelativeLayout - No effect.
Invalditing the TextViews - No effect.
clipChildren = false for the RelativeLayout - No effect.
setWillNotDraw = false for the RelativeLayout - No effect. (onDraw is being called)
I haven't tried to solve this with a ScrollView, but I don't want to really, cause that adds another layer in the hierachy for something pretty small.
I thought I understood the drawing logic, but perhaps I'm missing something, so I hope someone might be able to point me in the right direction.
What I ended up doing (September 3rd)
Since no real solution was offered, I tried again and came to the following "fix". I set both second labels to Visibility.GONE, but within the original bounds of the container view. Then when I start the animation, I set their correct values, then move them outside the bounds and finally setting Visiblity.VISIBLE. When the animation progresses the labels roll into view as supposed to. So a fix to the issue, but no real explanation why the TextViews aren't drawn again...
I'm trying to fade out an ImageView using an animation. The animation runs, fading out the ImageView, but then the image goes back to fully opaque. Why does this happen?
private void fadeOutImage() {
final ImageView imageView = (ImageView) activity.findViewById(R.id.imageView);
imageView.startAnimation(AnimationUtils.loadAnimation(activity, R.anim.fadeout));
}
I tried setting the alpha to zero as below, but then the image never showed up period. Why not?
private void fadeOutImage() {
final ImageView imageView = (ImageView) activity.findViewById(R.id.imageView);
imageView.setAlpha(0);
imageView.startAnimation(AnimationUtils.loadAnimation(activity, R.anim.fadeout));
}
To get this to work, I had to create an AnimationListener, overload the onAnimationEnd, and set the alpha to be zero there. Why?
final ImageView imageView = (ImageView) activity.findViewById(id);
Animation animation = AnimationUtils.loadAnimation(activity, R.anim.fadeout);
animation.setAnimationListener(new AnimationListener() {
#Override public void onAnimationStart(Animation animation) {
imageView.setAlpha(255);
}
#Override public void onAnimationRepeat(Animation animation) { }
#Override public void onAnimationEnd(Animation animation) {
imageView.setAlpha(0);
}
});
imageView.startAnimation(animation);
Animation XML:
<alpha
android:duration="1500"
android:fromAlpha="1.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
When you start an animation, it literally takes whatever the view currently looks like, animates it according to your supplied animation, but doesn't ever actually change the state of the view.
This can get confusing, but in your first case, after the animation ends, the ImageView just goes back to whatever it looked like before the animation - in your case, the normal opaque.
In your second example, you are setting the alpha to zero before the animation starts, and so when the animation begins playing, the image is already invisible, and so it animates this invisible ImageView - which you can't see.
Therefore, the required sequence is to start the animation before changing the ImageView at all, let it play out, and then the moment the animation ends, change the state of the ImageView so that it disappears before it gets redrawn in it's original state. This is what overriding onAnimationEnd() does.
So, to recap, in the proper implementation, there are two things that affect how the ImageView gets drawn:
The animation, which affects how the ImageView looks only while the animation is playing.
The imageView.setAlpha(0); method call, to keep the image invisible once the animation finishes.
Note: to possibly increase performance, I'd suggest using
imageView.setVisibility(View.INVISIBLE);
instead of imageView.setAlpha(0);
I'm trying to fade out an ImageView using an animation. The animation runs, fading out the ImageView, but then the image goes
back to fully opaque. Why does this happen?
The animation's effects are temporary. Once the animation has completed, the view returns to its state before the animation began.
I tried setting the alpha to zero as below, but then the image never
showed up period. Why not?
Though apparently undocumented, the fromAlpha and toAlpha parameters appear to act in a multiplicative fashion. 100% of zero is still zero. I verified this by starting the alpha to a very low value, and I could see that the animation caused the alpha to start at the low value and fade to transparent.
To get this to work, I had to create an AnimationListener, overload
the onAnimationEnd, and set the alpha to be zero there. Why?
Since the animation's effects are temporary, you need to set the object to be transparent after the animation. You also have to make sure you reset the object to be opaque before you start the animation.
It looks like you can use an ObjectAnimator starting in API 11 to set the alpha (or any other property's) values directly using rather than multiplicatively.
I am just planning to implement a view whose border color keeps on changing dynamically at run time based on a timer. For example initially the view's border will be in green color(timer=20sec) and every sec the green color disappears and once it goes of more than half(timer=10sec) of the view... the border color should change to orange and once it reaches the end(timer=5sec) of timer it should be in red color and phone should vibrate (easy can be done).... If somebody is familiar with zynga poker its the same that i want to implement.
Now one way of implementing it could be have a backend timer and based on that have "n" number of drawables and keep on changing the background of the view every sec. But this requires many images and i dont think this is the optimal way of implementing it.
just wondering if i can write a custom view and implement the surface view and do something around it so that this can be done. Anybody has any idea on how to achieve this? can this be done using any animations around customviews? Any ideas around this are greatly appreciated.
Thanks in advance
Run a timertask, and change the border of the view by setting the background value of the view to a style.
Like,
view.setBackground(R.drawable.border_style_green);
So in the timer task, keep checking the time, and change the border.
Note - border_style_green is a XML file which has the style where you can set the border, the rounded corner to a view, etc.
My suggestion is to make use of the animation framework from android. If your app targets versions below honeycomb use NineOldAndroids.
As already suggested set the border by assigning shapeDrawable to your view
view.setBackground(R.drawable.border_style_green);
you start the animator like this. (this code will animate from currentColor to red in 1000ms)
ObjectAnimator animator = ObjectAnimator.ofFloat(this, "color", currentColor,Color.RED);
animator.setEvaluator(new ArgbEvaluator());
animator.setDuration(1000);
animator.start();
Then in your activity implement:
public void setColor(int color){
currentColor = color;
view.getBackground().setColorFilter(color, PorterDuff.Mode.MULTIPLY);
}
if view is html page : Use Jquery for this implementation. by ajax you can call backend as well. Jquery delay function
Is there a way to force an android view to redraw it's background?
I have set a drawable shape with a gradient as background which works fine but after changing the view's height you can see those ugly gradient steps.
What can I do?
I tried view.invalidate() and view.refreshDrawableState() without any visible difference.
Thank you!
//EDIT:
Here are some more details and my code:
After your answers I think the banding is a result of my probably bad code. Here is what I'm doing:
Scaling a view
setting its new width and height because the scaled view does not accept user input in other areas then the "old" one (see android weird (at least for me) behaviour of control after scaling / doesn't accept input in it's whole area )
trying to set the background again (which contains a gradient and a rectangle with rounded corners)
Here is my code:
public void onAnimationEnd(Animation animation)
{
MyView view = (MyView) ((ExtendedScaleAnimation) animation).getView();
view.getLayoutParams().width = toWidth;
view.getLayoutParams().height = toHeight;
view.clearAnimation();
view.requestLayout();
view.refreshBackground(); // background will be changed
}
On the device you can see that the background drawable is changed but there is a flickering which seems to me like the backround change is applied before the animation is over. Programatically it should be over! Or am I wrong?
Thank you again!
Can you try after resize:
v.setBackgroundResource(null);
v.setBackgroundResource(...my drawable...);