number counting animation in textview - android

I am developing a game application in android. I am struck at Scorecard implementation.
I want to display score in a textview as the numbers are continously counting for movement.
for example : suppose user crosses one obstacle and score for that obstacle is 200. Then numbers in scorecard should count from 0 to 200 smoothly and then will stop at 200.
I have seen this type of animation in score card of papiJump.
Please guide me.

ValueAnimator animator = ValueAnimator.ofInt(int start, int end);
animator.setDuration(2000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
textView.setText(animation.getAnimatedValue().toString());
}
});
animator.start();

public void animateTextView(int initialValue, int finalValue, final TextView textview)
{
DecelerateInterpolator decelerateInterpolator = new DecelerateInterpolator(0.8f);
int start = Math.min(initialValue, finalValue);
int end = Math.max(initialValue, finalValue);
int difference = Math.abs(finalValue - initialValue);
Handler handler = new Handler();
for (int count = start; count <= end; count++) {
int time = Math.round(decelerateInterpolator.getInterpolation((((float) count) / difference)) * 100) * count;
final int finalCount = ((initialValue > finalValue) ? initialValue - count : count);
handler.postDelayed(new Runnable() {
#Override
public void run() {
textview.setText(finalCount + "");
}
}, time);
}
}

Related

Object animator not removing update listener android

Good day.I have an scenario where this half normal object animator keeps firing over and over causing heap grow and ofcourse out of memory issue at some point.Here is how it go. I have made static method for rainbow animation like this.
public static ObjectAnimator startRainbowAnimation(Context context,
String textToShow,
final TextView textViewToAttach) {
AnimatedColorSpan span = new AnimatedColorSpan(context);
final SpannableString spannableString = new SpannableString(textToShow);
String substring = textToShow;
int start = textToShow.indexOf(substring);
int end = start + substring.length();
spannableString.setSpan(span, start, end, 0);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(
span, ANIMATED_COLOR_SPAN_FLOAT_PROPERTY, 0, 100);
objectAnimator.setEvaluator(new FloatEvaluator());
objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
System.gc();
Log.d("Fafasfasfas", "onAnimationUpdate: inside true");
textViewToAttach.setText(spannableString);
}
});
objectAnimator.setInterpolator(new LinearInterpolator());
objectAnimator.setDuration(DURATION);
objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
objectAnimator.start();
return objectAnimator;
}
private static final Property<AnimatedColorSpan, Float> ANIMATED_COLOR_SPAN_FLOAT_PROPERTY
= new Property<AnimatedColorSpan, Float>(Float.class, "ANIMATED_COLOR_SPAN_FLOAT_PROPERTY") {
#Override
public void set(AnimatedColorSpan span, Float value) {
span.setTranslateXPercentage(value);
}
#Override
public Float get(AnimatedColorSpan span) {
return span.getTranslateXPercentage();
}
};
I am calling this method like this inside an recycler view adapter
#Override
public void onBindViewHolder(final ViewHolder holder, int position) {
ChatModel chatModel = chatModelList.get(position);
System.gc();
String messageBody = chatModel.getMessage().replaceAll("userid=" + chatModel.getUserId() + ":" + Constants.TYPE_MESSAGE_ATTACHMENT, "").replaceAll("userid=" + chatModel.getOpponentId() + ":" + Constants.TYPE_MESSAGE_ATTACHMENT, "");
holder.message.setText(messageBody);
if (showAsRainbow) {
if (holder.message.getTag() == null) {
objectAnimator = RainbowAnimation.startRainbowAnimation(mContext, messageBody, holder.message);
holder.message.setTag(ANIMATED);
}
} else {
objectAnimator.removeAllUpdateListeners();
objectAnimator.removeAllListeners();
objectAnimator.end();
objectAnimator.cancel();
holder.message.setTag(null);
}
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) holder.chatViewBubble.getLayoutParams();
LinearLayout.LayoutParams deliveryStatusParams = (LinearLayout.LayoutParams) holder.deliveryStatus.getLayoutParams();
LinearLayout.LayoutParams gifChatViewLayoutParams = (LinearLayout.LayoutParams) holder.imageViewWrapper.getLayoutParams();
checkForGif(chatModel, holder);
if (mCurrentUserId.equals(chatModel.getUserId())) {
layoutParams.gravity = Gravity.RIGHT;
layoutParams.rightMargin = Dp.toDps(mContext, 16);
deliveryStatusParams.gravity = Gravity.RIGHT;
gifChatViewLayoutParams.gravity = Gravity.RIGHT;
holder.chatViewBubble.setLayoutParams(layoutParams);
holder.imageView.setLayoutParams(gifChatViewLayoutParams);
holder.chatViewBubble.setBackground(ContextCompat.getDrawable(mContext, R.drawable.outgoing_message_bg));
if (chatModel.getDeliveryStatus().equals(Constants.STATUS_DELIVERED)) {
if (position >= chatModelList.size() - 1) {
holder.deliveryStatus.setVisibility(View.VISIBLE);
} else {
holder.deliveryStatus.setVisibility(View.INVISIBLE);
}
holder.deliveryStatus.setText(mContext.getString(R.string.sentText));
} else if (chatModel.getDeliveryStatus().equals(Constants.STATUS_NOT_DELIVERED)) {
holder.deliveryStatus.setVisibility(View.VISIBLE);
if (updating) {
holder.deliveryStatus.setText(mContext.getString(R.string.sendingNowText) + percentage + " %");
} else {
holder.deliveryStatus.setText(mContext.getString(R.string.sendingNowText));
}
}
} else {
holder.chatViewBubble.setBackground(ContextCompat.getDrawable(mContext, R.drawable.incoming_message_bg));
layoutParams.gravity = Gravity.LEFT;
gifChatViewLayoutParams.gravity = Gravity.LEFT;
holder.chatViewBubble.setLayoutParams(layoutParams);
holder.imageView.setLayoutParams(gifChatViewLayoutParams);
holder.deliveryStatus.setVisibility(View.INVISIBLE);
}
}
Thi issue is that if you noticed the Log.d() keeps firing even after the cancle and end was called on the objectAnimator and yes i have checked that cancel and end is being called.So i have no clue what i have done wrong.Can anyone please help me?
I see lot's of guys been looking at the post,meaning they got this issue too so i got the solution somehow fixed...Issue is that this damned ObjectAnimator when done inside an loop even with static method,each time is being created new reference to it.So you have to do something like this.Have an array list of object animators,on each call add items to array list.Whenever you want to stop it just simply loop through array and stop all object animators.Here is the code
private ArrayList<ObjectAnimator> objectAnimators = new ArrayList<>();
public void startRainbowAnimation(Context context,
final String textToShow,
final TextView textViewToAttach) {
stopCalled = false;
AnimatedColorSpan span = new AnimatedColorSpan(context);
final SpannableString spannableString = new SpannableString(textToShow);
String substring = textToShow;
int start = textToShow.indexOf(substring);
int end = start + substring.length();
spannableString.setSpan(span, start, end, 0);
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(
span, animatedColorSpanFloatProperty, 0, 100);
objectAnimator.setEvaluator(new FloatEvaluator());
objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
System.gc();
if (!stopCalled) {
textViewToAttach.setText(spannableString);
}
}
});
objectAnimator.setInterpolator(new LinearInterpolator());
objectAnimator.setDuration(DateUtils.MINUTE_IN_MILLIS * 3);
objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
objectAnimator.start();
objectAnimators.add(objectAnimator);
}
objectAnimators here is an array list of object animators like this
And here is how you stop all of them to get ride of infinite update listener call firing.
public void stopRainbowAnimation() {
System.gc();
stopCalled = true;
if (!objectAnimators.isEmpty()) {
for (int i = 0; i < objectAnimators.size(); i++) {
ObjectAnimator eachAnimator = objectAnimators.get(i);
eachAnimator.setRepeatCount(0);
eachAnimator.end();
eachAnimator.cancel();
eachAnimator.removeAllListeners();
eachAnimator.removeAllUpdateListeners();
}
objectAnimators.clear();
}
}
Hope this will help someone

Android: Animating a TextView to Increase its Value (float) over Time in Android

I have a TextView in Android which will display float value. I want to show an animation in which its value increases from 0 to the given float value in a given time. I need the digits after the decimal place to be animated as well.
Also, I tried the following solution posted here by Pedro Oliveira but it works only for int values. I am more concerned about animating float values.
public void animateTextView(int initialValue, int finalValue, final TextView textview) {
DecelerateInterpolator decelerateInterpolator = new DecelerateInterpolator(0.8f);
int start = Math.min(initialValue, finalValue);
int end = Math.max(initialValue, finalValue);
int difference = Math.abs(finalValue - initialValue);
Handler handler = new Handler();
for (int count = start; count <= end; count++) {
int time = Math.round(decelerateInterpolator.getInterpolation((((float) count) / difference)) * 100) * count;
final int finalCount = ((initialValue > finalValue) ? initialValue - count : count);
handler.postDelayed(new Runnable() {
#Override
public void run() {
textview.setText(finalCount + "");
}
}, time);
}
I found the answer on this question. AhmedZah's answer worked perfectly for me, I just changed the code slightly.
public void animateTextView(float initialValue, float finalValue, final TextView textview) {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(initialValue, finalValue);
valueAnimator.setDuration(1500);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
textview.setText(valueAnimator.getAnimatedValue().toString());
}
});
valueAnimator.start();
}
I doubt that this question will get any more views owing to the number of downvotes, but I hope this will help someone in desperate need of an answer :).

Gradually fade out a custom, map marker

I'm trying to gradually fade out a custom Google map marker.
I've seen all the posts that say to just use the drop in code from the DevBytes video and replace the setPosition with setAlpha, which is what I have attempted to do.
The problem is that whatever I do, my icon just goes white for the duration of the handler and then transparent upon completion, instead of gradually fading to complete transparency.
gMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() {
#Override
public boolean onMarkerClick(final com.google.android.gms.maps.model.Marker marker) {
if (marker.equals(myLocationMarker)) {
final long duration = 1000;
final int alpha = 100;
final long start = SystemClock.uptimeMillis();
final Handler handler = new Handler();
final Interpolator interpolator = new LinearInterpolator();
handler.post(new Runnable() {
#Override
public void run() {
long elapsed = SystemClock.uptimeMillis() - start;
float t = interpolator.getInterpolation((float) elapsed / duration);
float newAlpha = alpha - (t*100);
if(newAlpha<0)
newAlpha = 0;
int finalAlpha = (int)Math.ceil(newAlpha);
System.out.println("time = "+t);
System.out.println("newAlpha = "+newAlpha);
System.out.println("finalAlpha = "+finalAlpha);
marker.setAlpha(finalAlpha);
if (t < 1.0)
handler.postDelayed(this, 10);
}
});
return true;
}
});
I tried using ValueAnimator and it worked:
ValueAnimator ani = ValueAnimator.ofFloat(1, 0); //change for (0,1) if you want a fade in
ani.setDuration(5000);
ani.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
marker.setAlpha((float) animation.getAnimatedValue());
}
});
ani.start();

Animate TextView to increase integer and stop at some point?

I have a TextView showing integer value. Integer value is transferred from previous activity, and I want to add nice animation. I want to if for example int value is 73, I want textView to increase shown number by 1 until 73, so it would be 1-2-3-4-5...etc etc.
How can I do this?
The best solution in my opinion is to use this method :
public void animateTextView(int initialValue, int finalValue, final TextView textview) {
ValueAnimator valueAnimator = ValueAnimator.ofInt(initialValue, finalValue);
valueAnimator.setDuration(1500);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
textview.setText(valueAnimator.getAnimatedValue().toString());
}
});
valueAnimator.start();
}
Here is a simple function to animate the text of a textView according to an initial and final value
public void animateTextView(int initialValue, int finalValue, final TextView textview) {
DecelerateInterpolator decelerateInterpolator = new DecelerateInterpolator(0.8f);
int start = Math.min(initialValue, finalValue);
int end = Math.max(initialValue, finalValue);
int difference = Math.abs(finalValue - initialValue);
Handler handler = new Handler();
for (int count = start; count <= end; count++) {
int time = Math.round(decelerateInterpolator.getInterpolation((((float) count) / difference)) * 100) * count;
final int finalCount = ((initialValue > finalValue) ? initialValue - count : count);
handler.postDelayed(new Runnable() {
#Override
public void run() {
textview.setText(String.valueOf(finalCount));
}
}, time);
}
}
I think this project in github is what you want: https://github.com/sd6352051/RiseNumber
The RiseNumberTextView extends TextView and use the ValueAnimator to implement the rising number effect.
This is a Kotlin code for incrementing from initial value to final value over a duration of time. Here I have used duration of 5 sec.
fun animateTextView(initialValue: Int, finalValue: Int, textView: TextView) {
val valueAnimator = ValueAnimator.ofInt(initialValue, finalValue)
valueAnimator.duration = 5000 // 5 sec
valueAnimator.addUpdateListener { valueAnimator -> textView.text = valueAnimator.animatedValue.toString() }
valueAnimator.start()
}
use this code in Utilities and call the method accordingly with required parameters.
try this code..showing increment value with animation
public class MainActivity extends Activity implements AnimationListener {
private TextView textView;
AlphaAnimation fadeIn, fadeOut;
private static int count = 0, finalValue = 20;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.demo);
textView = (TextView) findViewById(R.id.textView);
fadeIn = new AlphaAnimation(0.0f, 1.0f);
fadeOut = new AlphaAnimation(1.0f, 0.0f);
fadeIn.setDuration(1000);
fadeIn.setFillAfter(true);
fadeOut.setDuration(1000);
fadeOut.setFillAfter(true);
fadeIn.setAnimationListener(this);
fadeOut.setAnimationListener(this);
textView.startAnimation(fadeIn);
textView.startAnimation(fadeOut);
}
#Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
Log.i("mini", "Count:" + count);
runOnUiThread(new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
textView.setText("" + count);
}
});
if (count == finalValue) {
textView.setText("" + finalValue);
} else {
++count;
textView.startAnimation(fadeIn);
textView.startAnimation(fadeOut);
}
}
#Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
}

Displaying a sequence of images with a time delay

I wanted to display 9 images one after the other. I have included the 9 images as an array:
imageHolders = new ArrayList<ImageView>();
imageHolders.add((ImageView) view.findViewById(R.id.imgOne));
imageHolders.add((ImageView) view.findViewById(R.id.imgTwo));
imageHolders.add((ImageView) view.findViewById(R.id.imgThree));
imageHolders.add((ImageView) view.findViewById(R.id.imgFour));
imageHolders.add((ImageView) view.findViewById(R.id.imgFive));
imageHolders.add((ImageView) view.findViewById(R.id.imgSix));
imageHolders.add((ImageView) view.findViewById(R.id.imgSeven));
imageHolders.add((ImageView) view.findViewById(R.id.imgEight));
imageHolders.add((ImageView) view.findViewById(R.id.imgNine));
This is what I have tried:
public void handleMessage(Message msg) {
int currentImage = 0;
int nextImage = 0;
// Logic to change the images
for (final ImageView imageView : imageHolders) {
currentImage = Integer.parseInt(imageView.getTag().toString());
if (currentImage > 1) {
nextImage = currentImage - 1;
} else {
nextImage = 9;
}
imageView.setTag(""+nextImage);
new CountDownTimer(10000, 1000) {
public void onTick(long millisUntilFinished) {
}
public void onFinish() {
imageView.setVisibility(VISIBLE);
}
}.start();
}
super.handleMessage(msg);
}
}
There is a delay between the first and the second images. I am not able to introduce a delay between the rest. I have no clue about introducing the delay. Any suggestions would be appreciated.
you could just use AnimationDrawable which does this for you , and allows you to set a duration of time (in milliseconds) using android:duration attribute .
The AnimationDrawable is probably the best answer, but for another solution you can look at AsyncTask.
http://developer.android.com/reference/android/os/AsyncTask.html
Then, you can in the background just sleep for some set amount of time, then display the next image.
You may want an event though to handle when this task is done, and in the listener you call the next one.
If you want to make just a simple static animation (all images at the same position) you can use AnimationDrawable but you can't easly change it dynamically - like change speed or something.
I just wrote a simple class for this so I can set multiple animations for one ImageView and change speed.
public class ImageSequence extends ImageView {
ArrayList<Drawable> draws = new ArrayList<Drawable>();
ArrayList<Integer> bnds = new ArrayList<Integer>(); //bounds of sequences - index of first and last frame.
ArrayList<String> names = new ArrayList<String>(); //sequences names.
Timer timer = new Timer(true);
TimerTask task;
int p = -1; //current playback position.
int cS = -1; //current sequence.
public ImageSequence(Context context) {
super(context);
createTask();
}
public void addSequence(String name, int[] res){
names.add(name);
bnds.add(draws.size());
bnds.add(draws.size() + res.length - 1);
for (int i = 0; i < res.length; i++){
draws.add(getContext().getResources().getDrawable(res[i]));
}
}
public void play(String sequence, float speed){
cS = -1;
for(int i = 0; i < names.size(); i++){
if(names.get(i) == sequence){ cS = i; break;}
}
if(cS<0) return;
p = -1;
task.run();
task.cancel();
if(speed <= 0) return;
createTask();
timer.schedule(task, (long) (1000/speed), (long) (1000/speed));
}
public void stop(){
task.cancel();
}
public void cancelTimer(){
timer.cancel();
}
private void createTask() {
task = new TimerTask(){
public void run() {
p++;
mHandler.obtainMessage(1).sendToTarget();
}
};
}
public Handler mHandler = new Handler() {
public void handleMessage(Message msg) {
int l = p;
if(l > bnds.get(cS*2+1) || l < bnds.get(cS*2)) l = bnds.get(cS*2);
p = l;
ImageSequence.this.setImageDrawable(draws.get(l));
}
};
}
From outside you can use it like this:
seq.addSequence("orange", new int[]{R.drawable.ic_oval_diode_orange, R.drawable.ic_oval_diode_off});
seq.addSequence("green", new int[]{R.drawable.ic_oval_diode_green, R.drawable.ic_oval_diode_off});
seq.addSequence("red", new int[]{R.drawable.ic_oval_diode_red, R.drawable.ic_oval_diode_off});
seq.play("red", 4);
I'm not really experienced in Android and Java but it works and it do the job for me. Hope it will help someone.

Categories

Resources