Skip to content

Commit d532d64

Browse files
Dynamsoft-HenryDynamsoft-Henry
committed
Updating side lists
1 parent 5f233ca commit d532d64

8 files changed

Lines changed: 162 additions & 157 deletions

File tree

‎_includes/sidelist-programming/programming-android.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
</ul>
77
</li>
88

9-
<li lang="android"><a href="{{ site.android }}user-guide/index.html" class="otherLinkColour">Core Concepts</a>
9+
<li lang="android"><a class="otherLinkColour">Core Concepts</a>
1010
<ul>
1111
<li><a href="{{ site.android }}user-guide/concept/barcode-format.html" class="otherLinkColour">Barcode Formats</a></li>
1212
<li><a href="{{ site.android }}user-guide/concept/parameters-and-templates.html" class="otherLinkColour">Settings, Parameters & Templates</a></li>
13-
<li><a href="{{ site.android }}user-guide/understand-barcode-results.html" class="otherLinkColour">Understanding Barcode Results</a></li>
13+
<li><a href="{{ site.android }}user-guide/concept/understand-barcode-results.html" class="otherLinkColour">Understanding Barcode Results</a></li>
1414
</ul>
1515
</li>
1616

17-
<li lang="android"><a href="{{ site.android }}user-guide/index.html" class="otherLinkColour">Capabilities</a>
17+
<li lang="android"><a class="otherLinkColour">Capabilities</a>
1818
<ul>
1919
<li lang="android"><a class="otherLinkColour">Input</a>
2020
<ul lang="android">
@@ -25,13 +25,14 @@
2525
<li lang="android"><a class="otherLinkColour">Working with Results</a>
2626
<ul lang="android">
2727
<li lang="android"><a href="{{ site.features }}get-detailed-info.html?lang=android" class="otherLinkColour">Get detailed barcode information</a></li>
28+
<li lang="android"><a class="otherLinkColour">Multi-Frame Cross Filter</a></li>
2829
<li lang="android"><a href="{{ site.features }}filter-and-sort.html?lang=android" class="otherLinkColour">Filter and sort decoding results</a></li>
2930
</ul>
3031
</li>
3132
<li lang="android"><a class="otherLinkColour">Control the Scanning Process</a>
3233
<ul lang="android">
3334
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/init-customized-template.html" class="otherLinkColour">Initialize Customized Template</a></li>
34-
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/configure-simplified-settings.html" class="otherLinkColour">Configure Simplified Settings</a></li>
35+
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/config-simplified-settings.html" class="otherLinkColour">Configure Simplified Settings</a></li>
3536
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/barcode-formats.html" class="otherLinkColour">Configure Barcode Format</a></li>
3637
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/feedback.html" class="otherLinkColour">Add Scan Feedback</a></li>
3738
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/read-specific-area.html" class="otherLinkColour">Read a specific area/region</a></li>
@@ -56,7 +57,12 @@
5657
<li lang="android"><a href="{{ site.features }}use-format-specific-configuration.html?lang=android" class="otherLinkColour">Use format specific configurations</a></li>
5758
</ul>
5859
</li>
59-
<li lang="android"><a href="{{ site.android }}ui-configurations.html" class="otherLinkColour">Customize the UI</a></li>
60+
<li lang="android"><a class="otherLinkColour">Customize the UI</a>
61+
<ul lang="android">
62+
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/add-functional-buttons.html" class="otherLinkColour">Add Functional Buttons</a></li>
63+
<li lang="android"><a href="{{ site.android }}user-guide/capabilities/add-graphics.html" class="otherLinkColour">Add Graphics</a></li>
64+
</ul>
65+
</li>
6066
</ul>
6167
</li>
6268

‎programming/android/user-guide.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ needGenerateH3Content: true
88
noTitleIndex: true
99
---
1010

11-
# BarcodeScanner Android User Guide
11+
# Quick Start with BarcodeScanner Component
1212

1313
This user guide will walk through the [ScanSingleBarcode](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/android/BarcodeScannerAPISamples/ScanSingleBarcode/) sample app. When creating your own project, please use this sample as a reference. This guide uses [`BarcodeScanner`](api-reference/barcode-scanner/index.md) API which aim to elevate the UI creation process with less code and offer a more pleasant and intuitive UI for your app.
1414

‎programming/android/user-guide/capabilities/add-functional-buttons.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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 Buttons |
14+
| ----------------- |
15+
| Torch button |
16+
| Camera toggle button |
17+
| Close button (BarcodeScanner API only) |
18+
19+
BarcodeScanner provides a set of UI elements that you can easily customize.
20+
21+
<div align="center">
22+
<p><img src="../../../assets/buttons.png" width="70%" alt="barcode-scanner"></p>
23+
<p>Barcode Scanner UI Components</p>
24+
</div>
25+
26+
- Torch button: A clickable button that turns the torch on or off.
27+
- Camera toggle button: A clickable button that switches the front/back-facing camera.
28+
- Close button: Stops barcode scanning and returns to the previous activity.
29+
30+
## Work with BarcodeScanner APIs
31+
32+
<div class="sample-code-prefix"></div>
33+
>- Java
34+
>- Kotlin
35+
>
36+
>1.
37+
```java
38+
BarcodeScannerConfig config = new BarcodeScannerConfig();
39+
config.setTorchButtonVisible(true);
40+
config.setCloseButtonVisible(true);
41+
config.setCameraToggleButtonVisible(true);
42+
```
43+
2.
44+
```kotlin
45+
val config = BarcodeScannerConfig().apply {
46+
torchButtonVisible = true
47+
closeButtonVisible = true
48+
cameraToggleButtonVisible = true
49+
}
50+
```
51+
52+
**Related APIs**
53+
54+
- [`BarcodeScannerConfig`]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html)
55+
- [setTorchButtonVisible]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#settorchbuttonvisible)
56+
- [setCloseButtonVisible]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#setclosebuttonvisible)
57+
- [setCameraToggleButtonVisible]({{ site.dbr_android_api }}barcode-scanner/barcode-scanner-config.html#setcameratogglebuttonvisible)
58+
59+
## Work with Foundational APIs
60+
61+
<div class="sample-code-prefix"></div>
62+
>- Java
63+
>- Kotlin
64+
>
65+
>1.
66+
```java
67+
CameraView cameraView = findViewById(R.id.camera_view);
68+
cameraView.setTorchButtonVisible(true);
69+
cameraView.setCameraToggleButtonVisible(true);
70+
```
71+
2.
72+
```kotlin
73+
val cameraView = findViewById<CameraView>(R.id.camera_view)
74+
cameraView.torchButtonVisible = true
75+
cameraView.cameraToggleButtonVisible = true
76+
```
77+
78+
**Related APIs**
79+
80+
- [`CameraView`]({{ site.dce_android }}auxiliary-api/dcecameraview.html)
81+
- [setTorchButtonVisible]({{ site.dce_android }}auxiliary-api/dcecameraview.html#settorchbuttonvisible)
82+
- [setCameraToggleButtonVisible]({{ site.dce_android }}auxiliary-api/dcecameraview.html#setcameratogglebuttonvisible)

‎programming/android/user-guide/capabilities/add-graphics.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
layout: default-layout
3+
title: UI Configurations - Dynamsoft Barcode Reader for Android
4+
description: Learn how to add basic UI elements on the DCECameraView for Android edition.
5+
keywords: UI Configurations, Android
6+
needAutoGenerateSidebar: true
7+
needGenerateH3Content: true
8+
noTitleIndex: true
9+
---
10+
11+
# UI Configurations
12+
13+
> [!Important]
14+
> Features on this page are only available for the **Foundational APIs**.
15+
16+
`CameraView` allows you to define your own graphics diplaying rules with the `Drawing` APIs.
17+
18+
- `DrawingItem`: Graphics or other UI elements.
19+
- `DrawingLayer`: The layer for displaying the `DrawingItems`.
20+
- `DrawingStyle`: The style for the `DrawingItem`.
21+
22+
## How to Hide Default Barcode Highlight Overlay
23+
24+
Barcode highlight overlay is displayed by default. You can set the layer invisible to disable it:
25+
26+
```java
27+
// Get the layer first.
28+
DrawingLayer layer = cameraView.getDrawingLayer(DrawingLayer.DBR_LAYER_ID);
29+
// Set the visible property to true or false to control the visibility.
30+
layer.setVisible(true);
31+
```
32+
33+
## How to Add User Defined DrawingItem(s)
34+
35+
## How to Change the DrawingStyle
36+
37+
Set the style of the highlight overlays with a preset style:
38+
39+
```java
40+
// Get the layer first.
41+
DrawingLayer layer = cameraView.getDrawingLayer(DrawingLayer.DBR_LAYER_ID);
42+
// Change the style of the layer.
43+
layer.setDefaultStyle(DrawingStyleManager.STYLE_BLUE_STROKE);
44+
```
45+
46+
Set the style of the highlight overlays with a use defined style:
47+
48+
1. Create colours in the **values/colours.xml** file.
49+
50+
```xml
51+
<color name="teal_200">#FF03DAC5</color>
52+
<color name="teal_200_transparent">#2003DAC5</color>
53+
```
54+
55+
2. Create your style with the colour and set to the layer.
56+
57+
```java
58+
// Get the layer first.
59+
DrawingLayer layer = cameraView.getDrawingLayer(DrawingLayer.DBR_LAYER_ID);
60+
// Create a new DrawingStyle via the DrawingStyleManager.
61+
int teal_200_transparent = ResourcesCompat.getColor(MainActivity.this.getResources(), R.color.teal_200_transparent, null);
62+
int teal_200 = ResourcesCompat.getColor(MainActivity.this.getResources(), R.color.teal_200, null);
63+
int style = DrawingStyleManager.createDrawingStyle(teal_200, 1.0f,teal_200_transparent,teal_200);
64+
// Set the newly created DrawingStyle to the layer.
65+
layer.setDefaultStyle(style);
66+
```

‎programming/android/user-guide/capabilities/customize-ui.md‎

Lines changed: 0 additions & 149 deletions
This file was deleted.

‎programming/android/user-guide/capabilities/zoom-control.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Zoom control is commonly used when processing small barcodes or scanning from a
2020
Enable auto-zoom so the camera can zoom in automatically.
2121

2222
<div align="center">
23-
<p><img src="../../assets/auto-zoom.gif" width="30%" alt="auto-zoom"></p>
23+
<p><img src="../../../assets/auto-zoom.gif" width="30%" alt="auto-zoom"></p>
2424
<p>Auto Zoom</p>
2525
</div>
2626

‎programming/android/user-guide/concept/understand-barcode-results.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Error messages are typically caused by:
3535

3636
Each decoded barcode is a `BarcodeResultItem` from `result.getBarcodes`. The following is an example:
3737

38-
![barcode-result-item](../../assets/barcode-result-item.png)
38+
![barcode-result-item](../../../assets/barcode-result-item.png)
3939

4040
| BarcodeResultItem | |
4141
| ----------------- | -- |

‎programming/assets/buttons.png‎

43.1 KB
Loading

0 commit comments

Comments
 (0)