|
| 1 | +--- |
| 2 | +layout: default-layout |
| 3 | +title: Customize the UI of BarcodeScanner - Dynamsoft Barcode Reader for Android |
| 4 | +description: Learn how to customize the BarcodeScanner UI on Android. |
| 5 | +keywords: BarcodeScanner, scanner, Android, scan region, torch button, close button, scan laser |
| 6 | +needAutoGenerateSidebar: true |
| 7 | +needGenerateH3Content: true |
| 8 | +noTitleIndex: true |
| 9 | +--- |
| 10 | + |
| 11 | +# Configure the UI Elements |
| 12 | + |
| 13 | +| Available UI Elements | |
| 14 | +| ------------------- | |
| 15 | +| Scan region | |
| 16 | +| Scan Laser | |
| 17 | +| Torch button | |
| 18 | +| Camera toggle button | |
| 19 | +| Close button (BarcodeScanner API only) | |
| 20 | + |
| 21 | +BarcodeScanner provides a set of UI elements that you can easily customize. |
| 22 | + |
| 23 | +<div align="center"> |
| 24 | + <p><img src="../../assets/barcode-scanner-ui.png" width="70%" alt="barcode-scanner"></p> |
| 25 | + <p>Barcode Scanner UI Components</p> |
| 26 | +</div> |
| 27 | + |
| 28 | +- Close button: Stops barcode scanning and returns to the previous activity. |
| 29 | +- Scan region: Sets a region of interest so the algorithm focuses only on that area. This can significantly improve processing speed. For special barcode types such as DotCode, the scan region can also improve the read rate. |
| 30 | +- Scan laser: A line that moves up and down. Its movement is limited to the scan region. |
| 31 | +- Torch button: A clickable button that turns the torch on or off. |
| 32 | + |
| 33 | +## Scan Region & Scan Laser |
| 34 | + |
| 35 | +### Configure with BarcodeScanner APIs |
| 36 | + |
| 37 | +<div class="sample-code-prefix"></div> |
| 38 | +>- Java |
| 39 | +>- Kotlin |
| 40 | +> |
| 41 | +>1. |
| 42 | +```java |
| 43 | +BarcodeScannerConfig config = new BarcodeScannerConfig(); |
| 44 | +// Margin left 15%, margin top 30%, margin right 85%, margin bottom 70% |
| 45 | +config.setScanRegion(new DSRect(0.15f, 0.25f, 0.85f, 0.65f, true)); |
| 46 | +config.setScanLaserVisible(true); |
| 47 | +``` |
| 48 | +2. |
| 49 | +```kotlin |
| 50 | +val config = BarcodeScannerConfig().apply { |
| 51 | + // Margin left 15%, margin top 30%, margin right 85%, margin bottom 70% |
| 52 | + scanRegion = DSRect(0.15f, 0.3f, 0.85f, 0.7f, true) |
| 53 | + scanLaserVisible = true |
| 54 | +} |
| 55 | +``` |
| 56 | + |
| 57 | +**Related APIs** |
| 58 | + |
| 59 | +- [`BarcodeScannerConfig`]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html) |
| 60 | + - [`setScanRegion`]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#setscanregion) |
| 61 | + - [`setScanLaserVisible`]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#setscanlaservisible) |
| 62 | + |
| 63 | +### Configure with Foundational APIs |
| 64 | + |
| 65 | +<div class="sample-code-prefix"></div> |
| 66 | +>- Java |
| 67 | +>- Kotlin |
| 68 | +> |
| 69 | +>1. |
| 70 | +```java |
| 71 | +CameraView cameraView = findViewById(R.id.camera_view); |
| 72 | +CameraEnhancer mCamera = new CameraEnhancer(cameraView, this); |
| 73 | +try { |
| 74 | + mCamera.setScanRegion(new DSRect(0.15f, 0.25f, 0.85f, 0.65f, true)); |
| 75 | +} catch (CameraEnhancerException e) { |
| 76 | + throw new RuntimeException(e); |
| 77 | +} |
| 78 | +cameraView.setScanLaserVisible(true); |
| 79 | +``` |
| 80 | +2. |
| 81 | +```kotlin |
| 82 | +val cameraView = findViewById<CameraView>(R.id.camera_view) |
| 83 | +val mCamera = CameraEnhancer(this) |
| 84 | +mCamera.scanRegion = DSRect(0.15f, 0.25f, 0.85f, 0.65f, true) |
| 85 | +cameraView.isScanLaserVisible = true |
| 86 | +``` |
| 87 | + |
| 88 | +**Related APIs** |
| 89 | + |
| 90 | +- [`CameraEnhancer`]({{ site.dbr_android_api }}camera-enhancer/camera-enhancer.html) |
| 91 | + - [`setScanRegion`]({{ site.dbr_android_api }}camera-enhancer/camera-enhancer.html#setscanregion) |
| 92 | +- [`CameraView`]({{ site.dce_android }}auxiliary-api/dcecameraview.html) |
| 93 | + - [`setScanLaserVisible`]({{ site.dce_android }}auxiliary-api/dcecameraview.html#setscanlaservisible) |
| 94 | + |
| 95 | +## Buttons |
| 96 | + |
| 97 | +### Add Buttons with BarcodeScanner APIs |
| 98 | + |
| 99 | +<div class="sample-code-prefix"></div> |
| 100 | +>- Java |
| 101 | +>- Kotlin |
| 102 | +> |
| 103 | +>1. |
| 104 | +```java |
| 105 | +BarcodeScannerConfig config = new BarcodeScannerConfig(); |
| 106 | +config.setTorchButtonVisible(true); |
| 107 | +config.setCloseButtonVisible(true); |
| 108 | +config.setCameraToggleButtonVisible(true); |
| 109 | +``` |
| 110 | +2. |
| 111 | +```kotlin |
| 112 | +val config = BarcodeScannerConfig().apply { |
| 113 | + torchButtonVisible = true |
| 114 | + closeButtonVisible = true |
| 115 | + cameraToggleButtonVisible = true |
| 116 | +} |
| 117 | +``` |
| 118 | + |
| 119 | +**Related APIs** |
| 120 | + |
| 121 | +- [`BarcodeScannerConfig`]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html) |
| 122 | + - [setTorchButtonVisible]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#settorchbuttonvisible) |
| 123 | + - [setCloseButtonVisible]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#setclosebuttonvisible) |
| 124 | + - [setCameraToggleButtonVisible]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#setcameratogglebuttonvisible) |
| 125 | + |
| 126 | +### Add Buttons with Foundational APIs |
| 127 | + |
| 128 | +<div class="sample-code-prefix"></div> |
| 129 | +>- Java |
| 130 | +>- Kotlin |
| 131 | +> |
| 132 | +>1. |
| 133 | +```java |
| 134 | +CameraView cameraView = findViewById(R.id.camera_view); |
| 135 | +cameraView.setTorchButtonVisible(true); |
| 136 | +cameraView.setCameraToggleButtonVisible(true); |
| 137 | +``` |
| 138 | +2. |
| 139 | +```kotlin |
| 140 | +val cameraView = findViewById<CameraView>(R.id.camera_view) |
| 141 | +cameraView.torchButtonVisible = true |
| 142 | +cameraView.cameraToggleButtonVisible = true |
| 143 | +``` |
| 144 | + |
| 145 | +**Related APIs** |
| 146 | + |
| 147 | +- [`CameraView`]({{ site.dce_android }}auxiliary-api/dcecameraview.html) |
| 148 | + - [setTorchButtonVisible]({{ site.dce_android }}auxiliary-api/dcecameraview.html#settorchbuttonvisible) |
| 149 | + - [setCameraToggleButtonVisible]({{ site.dce_android }}auxiliary-api/dcecameraview.html#setcameratogglebuttonvisible) |
0 commit comments