0% found this document useful (0 votes)

52 views

Lab Activity 8 - Code Reader

The document provides instructions for building two Android mobile apps - a camera app and a QR code reader app. For the camera app, it describes how to design an activity layout with a button and image view, initialize the camera on button click, and display the captured photo. For the QR code reader, it explains how to integrate the ZXing barcode scanning library, design an activity with a camera preview frame, and handle scan results to display them. The steps include adding permissions, initializing the scanner view, and starting/stopping the camera on resume and pause.

Uploaded by

Project ITT545

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

52 views

Lab Activity 8 - Code Reader

Uploaded by

Project ITT545

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 32

UNIVERSITI TEKNOLOGI MARA

FACULTY OF COMPUTER AND MATHEMATICAL SCIENCES

ICT602 MOBILE TECHNOLOGY AND DEVELOPMENT
ICT650 MOBILE TECHNOLOGY

LAB 8 – CODE READER

CODE READER
Outline
• Camera App
• Qr Code reader App
Camera App
Start a New Project
• Launch Android Studio and click on “New Project”
Activity
• Choose Empty Activity and Click Next

Ahmad Iqbal Hakim Suhaimi (Dr.) 6

Configure your project
1. App name:
Lab8b-iqbal
2. Leave package
name as default
3. Take note save
location
4. Choose Java
5. Make sure MIN
API is 21
6. Click Finish and
wait for gradle

Ahmad Iqbal Hakim Suhaimi (Dr.) 7

App with camera
• Replace constraint layout with RelativeLayout
• Add Button and ImageView component
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

</RelativeLayout>
Declare
• Declare the following objects in MainActivity class
private Button btnCapture;
private ImageView imgCapture;
private static final int Image_Capture_Code = 1;

• Bind with Id in onCreate method

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnCapture =(Button)findViewById(R.id.btnTakePicture);
imgCapture = (ImageView) findViewById(R.id.capturedImage);
btnCapture.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent cInt = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(cInt,Image_Capture_Code);
}
});
}
Create method to handle taken picture

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == Image_Capture_Code) {
if (resultCode == RESULT_OK) {
Bitmap bp = (Bitmap) data.getExtras().get("data");
imgCapture.setImageBitmap(bp);
} else if (resultCode == RESULT_CANCELED) {
Toast.makeText(this, "Cancelled", Toast.LENGTH_LONG).show();
}
}
}

}
Add permission to use Camera
• Add permission in AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.iqbal.splash">

<uses-permission android:name="android.permission.CAMERA"/>

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
</application>

</manifest>
• Replace as follow and sync your project

Ahmad Iqbal Hakim Suhaimi (Dr.) 12

• Run your app and take a picture
• Taken image will be stored in phone local storage
Code Reader App
Android Barcode Scanning Library

•Zxing
•Google’s Mobile Vision API
ZXing
• Zebra Crossing
• an open-source, multi-format 1D/2D barcode image
processing library implemented in Java, with ports
to other languages.
• the oldest

• Pros: Well-supported, reasonably quick, accurate

• Cons: Most difficult to integrate, only supports one
barcode orientation at a time.
Google’s Mobile Vision API
• Google announced it in late 2015.
• fast and accurate.
• It can scan sideways barcodes
• The APIs are also flexible with the control you have
over the camera and the UI you display to users.

• Pros: Fast, accurate, flexible

• Cons: Relies on a native library downloaded post-
install to perform scanning. Library is not download
if the device has “low” storage.
Start a New Project
• Launch Android Studio and click on “New Project”
Activity
• Choose Empty Activity and Click Next

Ahmad Iqbal Hakim Suhaimi (Dr.) 19

Configure your project
1. App name:
Lab8c-iqbal
2. Leave package
name as default
3. Take note save
location
4. Choose Java
5. Make sure MIN
API is 21
6. Click Finish and
wait for gradle

Ahmad Iqbal Hakim Suhaimi (Dr.) 20

Designing layout
• Delete Hello World in activity_main.xml
• Add the following component in Constraint Layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

</androidx.constraintlayout.widget.ConstraintLayout>
Add ZXING library
• Add zxing to project library to build.gradle (Modul:
app) dependencies

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2‘

implementation('me.dm7.barcodescanner:zxing:1.9.8') {
exclude group: 'com.android.support'
}

• Sync your project!

MainActivity.java
• Import ZXING in main activity

import com.google.zxing.Result;
import me.dm7.barcodescanner.zxing.ZXingScannerView;

• Implements Zxing in main activity class

public class MainActivity extends AppCompatActivity implements ZXingScannerView.ResultHandler {

• Declare object
private ZXingScannerView mScannerView;
MainActivity.java
• Modify onCreate method as follow to Initialize
scanner

@Override
protected void onCreate(Bundle savedInstanceState) {
setTheme(R.style.AppTheme);
super.onCreate(savedInstanceState);
mScannerView = new ZXingScannerView(this);
setContentView(mScannerView);
}
MainActivity.java
• Create method to handle Scan result as follow
@Override
public void handleResult(Result rawResult) {
Log.v("TAG", rawResult.getText()); // Prints scan results
Log.v("TAG", rawResult.getBarcodeFormat().toString());
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Scan Result");
builder.setMessage(rawResult.getText());
AlertDialog alert1 = builder.create();
alert1.show();
mScannerView.resumeCameraPreview(this);
}
MainActivity.java
• Add methods to start camera on Resume and stop
camera on Pause.
@Override
public void onResume() {
super.onResume();
mScannerView.setResultHandler(this);
mScannerView.startCamera();
}

@Override
public void onPause() {
super.onPause();
mScannerView.stopCamera();
}
• Replace as follow and sync your project

Ahmad Iqbal Hakim Suhaimi (Dr.) 27

Add permission to use Camera
• Add permission in AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.iqbal.splash">

<uses-permission android:name="android.permission.CAMERA"/>

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>
</activity>
</application>

</manifest>
Run
• Run your app on android device
• Locate app permission and enable camera
Test
• Try Scan the following codes with your app

• Try generate your on code and test your app.

• http://www.qr-code-generator.com/
File Submission
• Complete the Code Reader App module
• Advanced (optional) – Display the result in New Activity
• Generate release signed apk
https://www.youtube.com/watch?v=QqQ83qK6_rk
• Rename your release app.apk file as follows
accordingly
• ICT602CS2515AIqbalLab8.apk
• Upload your signed apk file to your google drive
account
• Get the shareable link and make sure link sharing is
turned ON!
• Submit the Google Drive link via MS Teams
assignment by 20th June 2023.