Create scanning animation using android studio

Question

i'm having troubles creating a scanning animation on my android application.For instance, i have come across this application 'Fingerprint love scanner prank' which has the scanning animation and i would like to implement the same on my android app. I have tried to implement the same on my android application but in vain. This is my android code snippet.

Animation.Java Activity

          scan.setOnTouchListener(new View.OnTouchListener() {                 @Override                 public boolean onTouch(View view, MotionEvent motionEvent) {                       final CountDownTimer start = new CountDownTimer(4000, 1000) {                          public void onTick(long millisUntilFinished) {                             scanner.setVisibility(View.VISIBLE);                             anim1 = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.progress);                             scanner.startAnimation(anim1);                           }                          public void onFinish() {                              scanner.setVisibility(View.INVISIBLE);                          }                     }.start();                     return false;                 }               }); 

Animation.xml

Contains the scanner image defined by the imageView as shown below

<LinearLayout             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_marginTop="40dp"             android:id="@+id/scan"             android:background="@drawable/bgscanner">              <ImageView                 android:layout_width="100dp"                 android:layout_height="wrap_content"                 android:src="@drawable/scanner"                 android:id="@+id/scanner1"                 android:layout_marginTop="20dp"                 android:visibility="invisible"                 />         </LinearLayout> 

My Animation drawable

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/linear_interpolator"     android:fillAfter="true">      <translate         android:fromYDelta="0%p"         android:toYDelta="75%p"         android:duration="800"         /> </set> 

My big issue is, on touch event, the animation does not execute. That is, the image bar does not oscillate along the vertical axis. I kindly request any assistance from stackoverflow

Answer 1

Edited

This problem can be solved with a very small code.

First, change your XML animation code to this:

<set xmlns:android="http://schemas.android.com/apk/res/android"     android:interpolator="@android:anim/accelerate_decelerate_interpolator"     android:fillAfter="false">      <translate         android:fromYDelta="0%p"         android:toYDelta="100%p"         android:duration="1000"         android:repeatCount="infinite"         android:repeatMode="restart"         /> </set> 

Your layout should be something like this:

<LinearLayout         android:id="@+id/image"         android:layout_width="200dp"         android:layout_height="200dp"         android:background="@mipmap/ic_launcher">          <View             android:id="@+id/bar"             android:layout_width="200dp"             android:layout_height="6dp"             android:visibility="gone"             android:background="@android:color/black"             android:src="@mipmap/ic_launcher"/>     </LinearLayout> 

And in your activity, the code can be like this:

LinearLayout imageView = (LinearLayout) findViewById(R.id.image);         final View bar = findViewById(R.id.bar);         final Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.anim);         animation.setAnimationListener(new Animation.AnimationListener() {             @Override             public void onAnimationStart(Animation animation) {}              @Override             public void onAnimationEnd(Animation animation) {                 bar.setVisibility(View.GONE);             }              @Override             public void onAnimationRepeat(Animation animation) {}         });          imageView.setOnTouchListener(new View.OnTouchListener() {             @Override             public boolean onTouch(View view, MotionEvent motionEvent) {                 bar.setVisibility(View.VISIBLE);                 bar.startAnimation(animation);                 return false;             }         }); 

And this way you are going to have this result:

I used a View instead of a ImageView to make the scan bar, but you can change the code to your needs.

I hope it helps!

EDIT 2:

If you want the animation to happen only if your image is pressed, change the code to this:

imageView.setOnTouchListener(new View.OnTouchListener() {         @Override         public boolean onTouch(View view, MotionEvent motionEvent) {             if(motionEvent.getAction() == MotionEvent.ACTION_DOWN){                 bar.setVisibility(View.VISIBLE);                 bar.startAnimation(animation);             } else if(motionEvent.getAction() == MotionEvent.ACTION_UP){                 bar.setVisibility(View.GONE);                 animation.cancel();             }              return false;         }     }); 

It you trigger the animation when the image is pressed (MotionEvent.ACTION_DOWN) and it is going to stop the animation when the image is released (MotionEvent.ACTION_UP)

Answer 2

Instead of countDownTimer use value animator for the animation in onTouch listner.

scan.setOnTouchListener(new View.OnTouchListener() {   @Override   public boolean onTouch(View view, MotionEvent motionEvent) {    if(motionEvent.getAction==MotionEvent.ACTION_DOWN){       ValueAnimator valueAnimator=ValueAnimator.ofFloat(0,75);      valueAnimator.setDuration(4000);      valueAnimator.setInterpolator(new DecelerateInterpolator());      valueAnimator.addListener(new Animator.AnimatorListener() {         @Override         public void onAnimationStart(Animator animation) {            scanner.setVisibilty(View.VISIBLE);         }         @Override         public void onAnimationEnd(Animator animation) {             scanner.setVisibilty(View.INVISIBLE);         }         @Override         public void onAnimationCancel(Animator animation) {              scanner.setVisibilty(View.INVISIBLE);         }         @Override         public void onAnimationRepeat(Animator animation) {          }         });      valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()      {            @Override            public void onAnimationUpdate(ValueAnimator animation) {               float translate= (float) animation.getAnimatedValue();               scanner.setTranslationY(translate);//translate scanner in Y direction            }        });     valueAnimator.start();    }  return true; }