So I start my activity and then
setContentView(R.layout.myxmllayoutfile);
All is well, but I want to make my imagebutton suddenly grow (scale) from nothing (ie 1%). However the layout is already displaying the button so it suddenly disappears then grows back rather than growing from nothing.
I have some alternatives but is there a real solution?:
1. flying the imagebutton animate in from offscreen? ; or
2. making it tiny in the xml and then growing it, then if necessary changing the clickable area?; or
3. is there a better solution?
UPDATE:
As suggested I tried:
<ImageButton
android:id="#+id/spinner"
android:scaleType="fitXY"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/clear"
android:orientation="horizontal"
android:visibility="invisible"
android:src="#drawable/spin"
/>
and in my java:
scaleView.startAnimation(scanimation);
ImageButton spinnerbutton=(ImageButton)findViewById(R.id.spinner);
spinnerbutton.setVisibility(View.VISIBLE);
but it is still visible before it shrinks to 1% then grows! Suggestions welcome.
UPDATE2:
Nothing has changed with the edited below code:
public void growit() {
final ImageView scaleView = (ImageView) findViewById(R.id.spinner);
Animation scanimation = AnimationUtils.loadAnimation(this, R.anim.throbbing2);
scanimation.setFillAfter(true);
scanimation.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation a) { Log.e("growit", "---- animation start listener called");
scaleView.setVisibility(View.VISIBLE);
}
public void onAnimationRepeat(Animation a) {
}
public void onAnimationEnd(Animation a) {
}
});
scaleView.startAnimation(scanimation);
}
Make imagebutton hidden.
Then in your animation set Animation listener and on start animation callback method set the button visible
UPDATE:
Animation animation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
animation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
mImageButton.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) { }
#Override
public void onAnimationEnd(Animation animation) { }
});
mImageButton.startAnimation(animation);
No permanent solution. Just used a workaround of making it tiny in the xml and then growing it as suggested in the question as a possible "solution"/workaround but not ideal.
Related
i am making an android app and i am a newbie in development.
I created a startup animation for the app, using the app icon that is scaled from O% size to 100% size and rotated at the same time. This works allright. But i have a problem with it. In xml, the view visibility is set to gone initially. In code, i call image.setVisibility(View.VISIBLE) and then image.startAnimation(iconAnimation) . But the result is that i can see a flash of the ImageView before it starts animating, for like half a second or so. You can see the gif.
Gif:
see the gif
Can you help me with this? Thanks in advance.
My code:
runOnUiThread(new Runnable() {
#Override
public void run() {
// here
image.setVisibility(View.VISIBLE);
image.startAnimation(imageAnim);
//also found this somewhere, didn't help.
image.invalidate();
}
});
Layout xml:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="35sp"
android:text="Kytky"
android:layout_centerInParent="true"
android:id="#+id/welcome_text"
android:visibility="gone"/>
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"
android:id="#+id/welcome_image"
android:visibility="gone"/>
You can use value animator instead, You can hack through the animation
imageView.setPivotX(viewCenterX);
imageView.setPivotY(viewCenterY);
imageView.setScaleX(0);
imageView.setScaleY(0);
final FloatEvaluator scaleEvaluator = new FloatEvaluator();
final FloatEvaluator rotationEvaluator = new FloatEvaluator();
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1f);
valueAnimator.setDuration(TimeUnit.SECONDS.toMillis(1));
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float fraction = animation.getAnimatedFraction();
float scale = scaleEvaluator.evaluate(fraction, 0f, 1f);
float rotation = rotationEvaluator.evaluate(fraction, 0f, 360f);
imageView.setScale(scale);
imageView.setRotation(rotation);
}
});
valueAnimator.start();
Start one more animator or use this same animator to slide the logo up. Using this animators you will have full control over your animation.
you can switch the view visibility when the animations starts
imageAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
image.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
image.startAnimation(imageAnim);
the blink happens because the view visibility far from starting the animations, so in the first frame it will have its real size, and after that starts the animation
You need to work with alpha as well...make it visible and set alpha to minimum value than set alpha gradually to maximum value with in handler.
This is a follow up to Animate ImageView from alpha 0 to 1.
I have an ImageButton that I want to animate into view when user does X and then animate out of view when user does Y. Animating into view is working fine. But animating out of view is kind of not working. In fact it is working, in that the animation happens. But after the button fades out of view, it pops back as VISIBLE. So I use this code
AlphaAnimation animation1 = new AlphaAnimation(0.9f, 0.0f);
animation1.setDuration(5000);
animation1.setStartOffset(1000);
animation1.setFillAfter(true);
animation1.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
GVLog.d(TAG,"MAKE INVISIBLE onAnimationStart: %s",tokenBtn.getVisibility());
}
#Override
public void onAnimationRepeat(Animation animation) {
GVLog.d(TAG,"MAKE INVISIBLE onAnimationRepeat: %s",tokenBtn.getVisibility());
}
#Override
public void onAnimationEnd(Animation animation) {
tokenBtn.setVisibility(View.INVISIBLE);
GVLog.d(TAG,"MAKE INVISIBLE onAnimationEnd: %s",tokenBtn.getVisibility());
}
});
tokenBtn.startAnimation(animation1);
but the call to make the ImageButton invisible is not taking effect. So how do I make it take effect so that the ImageButton remains invisible?
Try like this. These codes always work on my apps.
AlphaAnimation animation1 = new AlphaAnimation(1, 0);
animation1.setDuration(1000);
tokenBtn.startAnimation(animation1);
tokenBtn.setVisibility(View.INVISIBLE);
I'm reading up on Android property animation and getting stuck on the ground floor. I have an ImageView (and a TextView) that I am trying to animate but there appears to be no "animate" method. I type myImageView. and there are many methods that dropdown but no animate method.
I'm using Java in Eclipse and I have see other code examples where it works.
This is my ImageView...
<ImageView
android:id="#+id/molePic"
android:layout_width="36dip"
android:layout_height="36dip"
android:layout_marginTop="7dip"
android:layout_marginLeft="20dip"
android:src="#drawable/mutebeacon36x36" />
The View.animate() method was added in API level 12 (Android 3.1). What version of Android are you compiling against?
here is an example animation method. it will translate a view 500 pixels to the right in 1000 millisecs.
public void startMyAnimation(final View view) {
TranslateAnimation animation = new TranslateAnimation(0, 500, 0, 0);
animation.setDuration(1000);
view.startAnimation(animation);
animation.setAnimationListener(new TranslateAnimation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
isAnimating = true;
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
}
and you call it like so
startMyAnimation(findViewById(R.id.molePic));
I've wrote a small activity that is able to switch between two views. Now I am trying to add some animation (fade-in/fade-out effect). Can anybody explain me how to do that right?
My own attempt to do this works kinda buggy (if I will click buttons very fast, my application freezes). I use code listed below:
public class WelcomeActivity extends Activity {
private boolean isLogin = false;
private String KEY_IS_LOGIN = "KEY_IS_LOGIN";
private Animation anim_fadein;
private RelativeLayout welcome, login;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
welcome = (RelativeLayout)getLayoutInflater().inflate(R.layout.activity_welcome_menu, null);
login = (RelativeLayout)getLayoutInflater().inflate(R.layout.activity_welcome_login, null);
anim_fadein = AnimationUtils.loadAnimation(this, R.anim.anim_fadein);
if (savedInstanceState != null)
isLogin = savedInstanceState.getBoolean(KEY_IS_LOGIN, false);
if (isLogin)
setContentView(login);
else
setContentView(welcome);
}
#Override
public void onBackPressed() {
if (isLogin) {
setContentView(welcome);
welcome.startAnimation(anim_fadein);
isLogin = false;
} else {
super.onBackPressed();
}
}
#Override
public void onSaveInstanceState(Bundle outState) {
outState.putBoolean(KEY_IS_LOGIN, isLogin);
super.onSaveInstanceState(outState);
}
public void onButton1Click(View v) {
setContentView(login);
login.startAnimation(anim_fadein);
}
public void onButtonLoginClick(View v) {
Intent i = new Intent(getApplicationContext(), MainActivity.class);
startActivity(i);
}
public void onButtonBackClick(View v) {
setContentView(welcome);
welcome.startAnimation(anim_fadein);
}
Animation XML file:
<?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="800" />
Thanks in advance!
The way I have done this in the past is by using the ViewFlipper class and utilizing the built-in animation functions that the package provides.
Here is an example on how to do this; in my experience the transitions have been very smooth:
The XML File
<LinearLayout
//Ommitted...
<ViewFlipper
android:id="#+id/[your_id_here]"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
<!--Your first layout XML here...-->
</RelativeLayout>
<RelativeLayout
<!--Your second layout XML here...-->
</RelativeLayout>
</ViewFlipper>
</LinearLayout>
Please note that you do not have to use relative layouts, I simply used them for the sake of clarity.
Implementing The Animations
Get a reference to the ViewFlipper in your activity:
ViewFlipper v = (ViewFlipper) findViewById(R.id.[your_id]);
Set the animations as necessary:
v.setInAnimation(AnimationUtils.loadAnimation([your_activity_name].this, R.anim.[your_in_animation here]));
v.setOutAnimation(AnimationUtils.loadAnimation([your_activity_name].this, R.anim.[your_out_animation here]));
Please note that you can find some really good prebuilt animations in the Android class files located in the following directory:
[android-sdks]/samples/android-[VERSION_NUMBER_HERE]/ApiDemos/res/anim
I highly recommend using these if you can - it will save you much time.
Now, if you wish to switch between the views, use the following commands:
v.showNext();
v.showPrevious();
You might have to change the animation files slightly to make sure the animations transition properly (i.e. make a fade right and left animation).
Hope this helps!
I think there are 2 main solution to this problem
The first one is using a ViewFlipper as suggested.
The other one is to go with the solution described here.
I prefer the second one cause it doesn't need additional View object in your view hiearchy and second you can have your 2 view all across the view tree. Not only in a single place defined by the position of the ViewFlipper.
The following Method implements cross-fade between two views:
public void CrossFade(View v1, View v2)
{
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setInterpolator(new DecelerateInterpolator()); //add this
fadeOut.setDuration(1000);
Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setInterpolator(new DecelerateInterpolator()); //add this
fadeIn.setDuration(1000);
fadeIn.setStartOffset(500);
fadeIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
v2.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
v2.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
fadeOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
v1.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
v1.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
v1.startAnimation(fadeOut);
v2.startAnimation(fadeIn);
}
In the code above, v1 will fade-out and v2 will fade-in, you can change duration and offset according to your needs
I have an imageview that's included inside a RelativeLayout. When the imageview is clicked, I animate the entire RelativeLayout with a translate animation to move it down.
when I click the imageview again (in it's new location) it's supposed to move it back up, but it does not. However, if I click where the imageview started, it does move the entire "panel" back up. Why is the imageview not moving with the relativelayout...at least insofar as the clickability of it. The actual image is moving, but the spot where it's clickable is not.
here is my xml for the layout:
<RelativeLayout
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:layout_height="120px"
android:layout_marginTop="-106px"
android:id="#+id/chatbox"
android:visibility="invisible">
<TextView
android:layout_width="fill_parent"
android:layout_height="106px"
android:background="#000000"
android:id="#+id/chattext" />
<ImageView
android:layout_width="20px"
android:layout_height="14px"
android:id="#+id/chatbubble"
android:layout_below="#id/chattext"
android:src="#drawable/chatbubble" />
</RelativeLayout>
Edit: I should add that I'm using Animation.setFillAfter(true) to hold the panel in place after the animation completes.
This is because animations actually do not affect views positions, they just draw them. So to handle click at new place you have to place something there (i.e. invisible FrameLayout). Or you can change your views margins on animation complete, so the views actually will move to the place.
I had the same problem and the best solution I found is to add an AnimationListener to your animation and move the view yourself in that listener as Konstantin Burov said :
animation.setFillAfter(false);
AnimationListener animListener = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
RelativeLayout.LayoutParams relativeLayoutParams = (LayoutParams) yourView.getLayoutParams();
//To avoid the flicker
yourView.clearAnimation();
relativeLayoutParams.setMargins(0, 0, 0, Utils.dpToPx(activity, newPositionDp);
yourView.setLayoutParams(relativeLayoutParams);
}
};
animation.setAnimationListener(animListener);
The Utils.dpToPx may be useful too :
public final static int dpToPx(Context context, int dp) {
return ((int)((dp * context.getResources().getDisplayMetrics().density) + 0.5));
}