How to show QR code scan progress with the moving line indicator?

Question

I want to show a line moving through the screen while the camera is open in my android application. Similar to the line which is moving in a bar code scanner application. Like the white line which is shown in the image. The line can move from top to bottom and bottom to top continuously.

Answer 1

For this, you're gonna want to create your custom view and override the onDraw method as follow :

public class MyScanningView extends View {
private Paint paint = new Paint();
private int mPosY = 0;
private boolean runAnimation = true;
private boolean showLine = true;
private Handler handler;
private Runnable refreshRunnable;
private boolean isGoingDown = true;
private int mHeight;

public MyScanningView(Context context) {
    super(context);
    init();
}

public MyScanningView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public MyScanningView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    paint.setColor(Color.WHITE);
    //Add anything else you want to customize your line, like the stroke width
    handler = new Handler();
    runnable = new Runnable() {
                        @Override
                        public void run() {
                          refreshView();
                        }
                    }
}

@Override
public void onDraw(Canvas canvas) {
    mHeight = canvas.getHeight();
    if (showLine) {
      canvas.drawLine(0, mPosY, canvas.getWidth(), mPosY, paint);
    }
    if (runAnimation) {
      handler.postDelayed(refreshRunnable, DELAY);
    }
}

public void startAnimation() {
    runAnimation = true;
    showLine = true;
    this.invalidate();
}

public void stopAnimation() {
    runAnimation = false;
    showLine = false;
    reset();
    this.invalidate();
}

private void reset() {
  mPosY = 0;
  isGoingDown = true;
}

private void refreshView() {
  //Update new position of the line
  if (isGoingDown) {
    mPosY += 5;
    if (mPosY > mHeight) {
      //We invert the direction of the animation
      mPosY = mHeight;
      isGoingDown = false;
  } else {
    mPosY -= 5;
    if (mPosY < 0) {
      //We invert the direction of the animation
      mPosY = 0;
      isGoingDown = true;
    }
this.invalidate();
}

}

Then simply add this view to your activy_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
  <com.//wherever_is_your_view.MyScanningView
    android:id="@+id/scanningView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

And in your MainActivity :

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    MyScanningView scanningView = (MyScanningView) findViewById(R.id.scanningView);
}

Answer 2

Use the below code and create a view of it in xml, restrict limit for scanning on drawline method. Use ScanningIndicator's object.startAnimation() to start animation.

public class ScanningIndicator extends View {
private Paint paint = new Paint();
private int mPosY = 0;
private boolean runAnimation = true;
private boolean showLine = true;
private Handler handler;
private Runnable refreshRunnable;
private boolean isGoingDown = true;
private int mHeight;

public ScanningIndicator(Context context) {
    super(context);
    init();
}

public ScanningIndicator(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public ScanningIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    paint.setColor(Color.RED);
    paint.setStrokeWidth(5.0f);
    //Add anything else you want to customize your line, like the stroke width
    handler = new Handler();
    refreshRunnable = new Runnable() {
        @Override
        public void run() {
            refreshView();
        }
    };
}

@Override
public void onDraw(Canvas canvas) {
    mHeight = canvas.getHeight();
    if (showLine) {
         canvas.drawLine(0, mPosY, canvas.getWidth(), mPosY, paint);
    }
    if (runAnimation) {
        handler.postDelayed(refreshRunnable, 0);
    }
}

public void startAnimation() {
    runAnimation = true;
    showLine = true;
    this.invalidate();
}

public void stopAnimation() {
    runAnimation = false;
    showLine = false;
    reset();
    this.invalidate();
}

private void reset() {
    mPosY = 0;
    isGoingDown = true;
}

private void refreshView() {
    //Update new position of the line
    if (isGoingDown) {
        mPosY += 5;
        if (mPosY > mHeight) {            
            mPosY = mHeight;
            isGoingDown = false;
        }
    } else {
        //We invert the direction of the animation
        mPosY -= 5;
        if (mPosY < 0) {
            mPosY = 0;
            isGoingDown = true;
        }
    }
    this.invalidate();
}
}