Custom Elements for the Scanning UI in Customized View Mode-Appendix-Scan Kit

Commonly used elements are listed as follows for your reference:

Custom title

Use title to define text information. The following is a configuration example in the layout file:

Collapse
Word wrap
Dark theme
Copy code
<TextView  
    android:layout_marginStart="10sp"  
    android:layout_toEndOf="@+id/back_img"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:gravity="center_vertical"  
    android:text="@string/title"  
    android:textAllCaps="false"  
    android:textColor="#FFFFFF"  
    android:textSize="20sp"  
    android:textStyle="bold" />

Custom back button

Define the element of the back button whose ID is back_img and bind the element to the go-back operation. The following is a configuration example in the layout file:

Collapse
Word wrap
Dark theme
Copy code
<ImageView  
    android:id="@+id/back_img"  
    android:layout_width="48dp"  
    android:layout_height="48dp"  
    android:padding="12dp"  
    android:layout_alignParentStart="true"  
    android:layout_marginStart="12dp"  
    android:layout_marginTop="4dp"  
    android:gravity="center"  
    android:src="@drawable/back" />

The following is an example of binding the go-back operation in the customized activity:

Collapse
Word wrap
Dark theme
Copy code
private void setBackOperation() {  
    backBtn = findViewById(R.id.back_img);  
    backBtn.setOnClickListener(new View.OnClickListener() {  
        @Override  
        public void onClick(View v) {  
            DefinedActivity.this.finish();  
        }  
    });  
}

Custom flashlight button

Define the element of the flashlight button and bind the element to the operations of turning on and off the flashlight. The following is a configuration example in the layout file:

Collapse
Word wrap
Dark theme
Copy code
<ImageView  
    android:id="@+id/flush_btn"  
    android:layout_width="48dp"  
    android:layout_height="48dp"  
    android:layout_alignParentBottom="true"  
    android:layout_centerHorizontal="true"  
    android:visibility="gone"  
    android:gravity="center"  
    android:src="@drawable/flashlight_off" />

The following is an example of binding the flashlight button in the customized activity:

Collapse
Word wrap
Dark theme
Copy code
private void setFlashOperation() {  
    flushBtn.setOnClickListener(new View.OnClickListener() {  
        @Override  
        public void onClick(View v) {  
            if (remoteView.getLightStatus()) {  
                remoteView.switchLight();  
                flushBtn.setImageResource(img[1]);  
            } else {  
                remoteView.switchLight();  
                flushBtn.setImageResource(img[0]);  
            }  
        }  
    });  
}

Custom scanning UI

Draw a scanning box. The following is a configuration example in the layout file:

Collapse
Word wrap
Dark theme
Copy code
<RelativeLayout  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
    <ImageView  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:layout_centerInParent="true"  
        android:layout_centerHorizontal="true"  
        android:background="#FF000000"  
        android:alpha="0.1" />  
    <TextView  
        android:layout_marginTop="225dp"  
        android:layout_centerHorizontal="true"  
        android:text="@string/scan_tip"  
        android:textAllCaps="false"  
        android:textColor="#FFFFFF"  
        android:textSize="15sp"  
        android:textStyle="bold"  
        android:layout_height="20dp"  
        android:layout_width="220dp" />  
    <!-- Set the scanning box.--> 
    <ImageView  
        android:layout_width="300dp"  
        android:layout_height="300dp"  
        android:layout_centerInParent="true"  
        android:layout_centerHorizontal="true"  
        android:background="@drawable/cloors" />  
</RelativeLayout>

Define the scanning box border style.

Collapse
Word wrap
Dark theme
Copy code
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="rectangle">  
    <!-- Set the border width and color. --> 
    <stroke android:width="3dp" android:color="#e1ffff"/>  
    <!-- Set the fill color within the scanning box. --> 
    <solid android:color="#1f00BCD4"/>  
    <!-- Set the round corner. --> 
    <corners android:radius="5dip"/>  
    <!-- Set the padding. --> 
    <padding  
        android:left="2dp"  
        android:top="2dp"  
        android:right="2dp"  
        android:bottom="2dp" />  
</shape>