All Products
Search
Document Center

Use the scan feature in the standard UI

Last Updated: May 27, 2021

This topic describes how to add the scan feature in a standard UI to a project and how to set the title of the scan screen.

Use the scan feature in the standard UI

  1. Open the activity_main.xml file in Android Studio, reset the Button layout, and set the Button ID to standard_ui_btn.

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. xmlns:tools="http://schemas.android.com/tools"
    5. android:layout_width="match_parent"
    6. android:layout_height="match_parent"
    7. tools:context=".MainActivity">
    8. <Button
    9. android:id="@+id/standard_ui_btn"
    10. android:layout_width="match_parent"
    11. android:layout_height="wrap_content"
    12. android:layout_marginTop="48dp"
    13. android:background="#108EE9"
    14. android:gravity="center"
    15. android:text="Scan in the standard UI"
    16. android:textColor="#ffffff"
    17. app:layout_constraintEnd_toEndOf="parent"
    18. app:layout_constraintHorizontal_bias="0.498"
    19. app:layout_constraintStart_toStartOf="parent"
    20. app:layout_constraintTop_toTopOf="parent" />
    21. </androidx.constraintlayout.widget.ConstraintLayout>
  2. In the MainActivity class, rewrite the click event so that you can click the button to implement the scan feature. The code is as follows:

    1. private ScanRequest scanRequest = new ScanRequest();
    2. @Override
    3. protected void onCreate(Bundle savedInstanceState) {
    4. super.onCreate(savedInstanceState);
    5. setContentView(R.layout.activity_main);
    6. findViewById(R.id.standard_ui_btn).setOnClickListener(new View.OnClickListener(){
    7. @Override
    8. public void onClick(View v) {
    9. MPScan.startMPaasScanActivity(MainActivity.this, scanRequest, new ScanCallback() {
    10. @Override
    11. public void onScanResult(final boolean isProcessed, final Intent result) {
    12. if (!isProcessed) {
    13. // In the scan page, click the physical back button or the back button in the upper left corner.
    14. return;
    15. }
    16. // Note: this callback is executed in the child thread.
    17. runOnUiThread(new Runnable() {
    18. @Override
    19. public void run() {
    20. if (result == null || result.getData() == null) {
    21. // Scan failed.
    22. Toast.makeText(MainActivity.this, "Scan failed, try again.", Toast.LENGTH_SHORT).show();
    23. return;
    24. }
    25. // Scanned.
    26. new AlertDialog.Builder(MainActivity.this)
    27. .setMessage(result.getData().toString())
    28. .setPositiveButton(R.string.confirm, null)
    29. .create()
    30. .show();
    31. }
    32. });
    33. }
    34. });
    35. }
    36. });
    37. }
  3. In the AndroidManifest.xml file of the project, add the read and write permissions and the network access permission.
    1. <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    2. <uses-permission android:name="android.permission.INTERNET" />
  4. In the build.gradle(:app) file under the main module of the project, add the following configuration:
    34
  5. Compile and run the project. Then install the application on a mobile phone. After you start the application, the following user interface appears:
  6. Click Scan in the standard UI. Then you can use the scan feature in a standard UI.
  7. Scan the following QR code. The information of this QR code appears on the user interface.
    1

Set the title of the scan screen

  1. In the activity_main.xml file, add a button and set the button ID to btn_title.
    1. <Button
    2. android:id="@+id/btn_title"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginTop="128dp"
    6. android:background="#108EE9"
    7. android:gravity="center"
    8. android:text="Set the title of the scan screen on a standard UI"
    9. android:textColor="#ffffff"
    10. app:layout_constraintEnd_toEndOf="parent"
    11. app:layout_constraintHorizontal_bias="0.0"
    12. app:layout_constraintStart_toStartOf="parent"
    13. app:layout_constraintTop_toTopOf="parent" />
  2. Create a DialogUtil class in the com.example.scanapplication package.
    15
  3. Set the layout of the scan screen in the DialogUtil class.

    1. public interface PromptCallback {
    2. void onConfirm(String msg);
    3. }
    4. public static void prompt(Activity activity, final PromptCallback callback) {
    5. final EditText edit = new EditText(activity);
    6. new AlertDialog.Builder(activity)
    7. .setTitle("Enter text")
    8. .setView(edit)
    9. .setPositiveButton("OK"
    10. , new DialogInterface.OnClickListener() {
    11. @Override
    12. public void onClick(DialogInterface dialog, int which) {
    13. if (callback != null) {
    14. String text = edit.getText().toString().trim();
    15. callback.onConfirm(text);
    16. }
    17. dialog.dismiss();
    18. }
    19. })
    20. .setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
    21. @Override
    22. public void onClick(DialogInterface dialog, int which) {
    23. dialog.dismiss();
    24. }
    25. })
    26. .create()
    27. .show();
    28. }

    16

  4. Write code in the MainActivity class. The code allows you to set the title of the scan screen after you click the btn_title button. The code is as follows:
    1. findViewById(R.id.btn_title).setOnClickListener(new View.OnClickListener() {
    2. @Override
    3. public void onClick(View v) {
    4. DialogUtil.prompt(MainActivity.this, new DialogUtil.PromptCallback() {
    5. @Override
    6. public void onConfirm(String msg) {
    7. scanRequest.setTitleText(msg);
    8. }
    9. });
    10. }
    11. });
  5. Compile the project and then install the application on a mobile phone. After you start the application, the following user interface appears:
  6. Click Set the scan screen title on a standard UI and enter a title to be displayed, for example, mPaaS. Then click OK.

  7. Click Scan in the standard UI. The title information entered in step 6 is displayed in the upper left corner of the scan screen. The scan screen title is successfully set in the standard UI.