Change ViewFinder in zxing

Question

How can I change the viewfinder size, colors and other options when I'm using dependencies compile 'me.dm7.barcodescanner:zxing:1.9' without an access to the zxing files? I could not find a solution for this problem.

Answer 1

to change the color of the ViewFinder. add these to your project's colors.xml

<color name="viewfinder_mask">#3F51B5</color>
<color name="viewfinder_laser">#00FFFFFF</color>
<color name="viewfinder_border">#ffFF4081</color>

to make other changes like removing laser from ZXingScannerView's viewfinder create a class and extend ViewFinderView. Override methods to customize the UI like so.

public class CustomScannerView extends ZXingScannerView {

public CustomScannerView(Context context) {
    super(context);
}

@Override
protected IViewFinder createViewFinderView(Context context) {
    return new CustomViewFinderView(context);
}

//make changes in CustomViewFinderView to customise the Viewfinder
//Check ViewFinderView class for more modifications
//to change viewFinder's colours override appropriate values in Colors.xml
class CustomViewFinderView extends ViewFinderView {


    public CustomViewFinderView(Context context) {
        super(context);
        setSquareViewFinder(true);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        ((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        // DEFAULT SQUARE DIMENSION RATIO in ViewFinderView is 0.625
        // get appropriate Dimension ratio otherwise
        float width = displayMetrics.widthPixels * 0.625f;
        setBorderLineLength((int)width);
    }

    @Override
    public void drawLaser(Canvas canvas) {
        //do nothing for no laser, even remove super call
    }

 }
}

to set the viewfinder's rectangle use

super.getFramingRect().set(left, top, right, bottom);

Answer 2

If you want to remove the laser only, this can simply be done by disabling the alpha channel animation:

barcodeView = (DecoratedBarcodeView) findViewById(R.id.barcode_scanner);
barcodeView.decodeContinuous(callback);

ViewfinderView viewFinder = barcodeView.getViewFinder();
Field scannerAlphaField = null;
try {
    scannerAlphaField = viewFinder.getClass().getDeclaredField("SCANNER_ALPHA");
    scannerAlphaField.setAccessible(true);
    scannerAlphaField.set(viewFinder, new int[1]);
} catch (NoSuchFieldException e) {
    e.printStackTrace();
} catch (IllegalAccessException e) {
    e.printStackTrace();
}

Answer 3

You can do it via XML

<com.journeyapps.barcodescanner.BarcodeView
      android:id="@+id/zxing_barcode_surface"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:zxing_framing_rect_height="220dp"
      app:zxing_framing_rect_width="250dp" />

<com.journeyapps.barcodescanner.ViewfinderView
    android:id="@+id/zxing_viewfinder_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:zxing_possible_result_points="@color/zxing_custom_possible_result_points"
    app:zxing_result_view="@color/zxing_custom_result_view"
    app:zxing_viewfinder_laser="@color/zxing_custom_viewfinder_laser"
    app:zxing_viewfinder_mask="@color/zxing_custom_viewfinder_mask" />

Also check this post (possible duplicate this question), and another one, if you want to change behavior programmatically.

To access the library features, you need to add the following to your build.gradle file:

repositories {
    jcenter()
}

dependencies {
    compile 'me.dm7.barcodescanner:zxing:1.9.3'
}

And add camera permission to your AndroidManifest.xml file:

<uses-permission android:name="android.permission.CAMERA" />