# Configure the UI Elements

| Available UI Element|
| ------------------- |
| Scan region |
| Scan Laser |
| Torch button |
| Camera toggle button |
| Close button (BarcodeScanner API only) |

BarcodeScanner provides a set of UI elements that can be easily customized.

<div align="center">
    <p><img src="../../assets/barcode-scanner-ui.png" width="70%" alt="barcode-scanner"></p>
    <p>Barcode Scanner UI Components</p>
</div>

- Close button: Stop barcode scanning and go back to the previous activity.
- Scan Region: Set a region of interest so that the algorithm focus on this region only. It can sharpenly improve the processing speed. For some special barcode types like DotCode the scan region improves the read-rate as well.
- Scan Laser: A line that moving up and down. Its moving area is limited in the scan region.
- Torch button: A clickable button that can turn on/off the torch.

## Scan Region & Scan Laser

### Configure with BarcodeScanner APIs

<div class="sample-code-prefix"></div>
>- Java
>- Kotlin
>
>1. 
```java
BarcodeScannerConfig config = new BarcodeScannerConfig();
// Margin left 15%, margin top 30%, margin right 85%, margin bottom 70%
config.setScanRegion(new DSRect(0.15f, 0.25f, 0.85f, 0.65f, true));
config.setScanLaserVisible(true);
```
2. 
```kotlin
val config = BarcodeScannerConfig().apply {
   // Margin left 15%, margin top 30%, margin right 85%, margin bottom 70%
   scanRegion = DSRect(0.15f, 0.3f, 0.85f, 0.7f, true)
   scanLaserVisible = true
}
```

**Related APIs**

- [`BarcodeScannerConfig`](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/barcode-scanner/barcode-scanner-config.md)
  - [`setScanRegion`](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/barcode-scanner/barcode-scanner-config.md#setscanregion)
  - [`setScanLaserVisible`](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/barcode-scanner/barcode-scanner-config.md#setscanlaservisible)

### Configure with Foundational APIs

<div class="sample-code-prefix"></div>
>- Java
>- Kotlin
>
>1. 
```java
CameraView cameraView = findViewById(R.id.camera_view);
CameraEnhancer mCamera = new CameraEnhancer(cameraView, this);
try {
    mCamera.setScanRegion(new DSRect(0.15f, 0.25f, 0.85f, 0.65f, true));
} catch (CameraEnhancerException e) {
    throw new RuntimeException(e);
}
cameraView.setScanLaserVisible(true);
```
2. 
```kotlin
val cameraView = findViewById<CameraView>(R.id.camera_view)
val mCamera = CameraEnhancer(this)
mCamera.scanRegion = DSRect(0.15f, 0.25f, 0.85f, 0.65f, true)
cameraView.isScanLaserVisible = true
```

**Related APIs**

- [`CameraEnhancer`](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/camera-enhancer/camera-enhancer.html)
  - [`setScanRegion`](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/camera-enhancer/camera-enhancer.html#setscanregion)
- [`CameraView`](https://www.dynamsoft.com/camera-enhancer/docs/mobile/programming/android/auxiliary-api/dcecameraview.md)
  - [`setScanLaserVisible`](https://www.dynamsoft.com/camera-enhancer/docs/mobile/programming/android/auxiliary-api/dcecameraview.md#setscanlaservisible)

## Buttons

### Add Buttons with BarcodeScanner APIs

<div class="sample-code-prefix"></div>
>- Java
>- Kotlin
>
>1. 
```java
BarcodeScannerConfig config = new BarcodeScannerConfig();
config.setTorchButtonVisible(true);
config.setCloseButtonVisible(true);
config.setCameraToggleButtonVisible(true);
```
2. 
```kotlin
val config = BarcodeScannerConfig().apply {
   torchButtonVisible = true
   closeButtonVisible = true
   cameraToggleButtonVisible = true
}
```

**Related APIs**

- [`BarcodeScannerConfig`](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/barcode-scanner/barcode-scanner-config.md)
  - [setTorchButtonVisible](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/barcode-scanner/barcode-scanner-config.md#settorchbuttonvisible)
  - [setCloseButtonVisible](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/barcode-scanner/barcode-scanner-config.md#setclosebuttonvisible)
  - [setCameraToggleButtonVisible](https://www.dynamsoft.com/barcode-reader/docs/mobile/programming/android/api-reference/barcode-scanner/barcode-scanner-config.md#setcameratogglebuttonvisible)

### Add Buttons with Foundational APIs

<div class="sample-code-prefix"></div>
>- Java
>- Kotlin
>
>1. 
```java
CameraView cameraView = findViewById(R.id.camera_view);
cameraView.setTorchButtonVisible(true);
cameraView.setCameraToggleButtonVisible(true);
```
2. 
```kotlin
val cameraView = findViewById<CameraView>(R.id.camera_view)
cameraView.torchButtonVisible = true
cameraView.cameraToggleButtonVisible = true
```

**Related APIs**

- [`cameraView`](https://www.dynamsoft.com/camera-enhancer/docs/mobile/programming/android/auxiliary-api/dcecameraview.md)
  - [setTorchButtonVisible](https://www.dynamsoft.com/camera-enhancer/docs/mobile/programming/android/auxiliary-api/dcecameraview.md#settorchbuttonvisible)
  - [setCameraToggleButtonVisible](https://www.dynamsoft.com/camera-enhancer/docs/mobile/programming/android/auxiliary-api/dcecameraview.md#setcameratogglebuttonvisible)