ZXing barcode scanner in custom layout in fragment

android android-fragments zxing barcode-scanner

37,843

Solution 1

It's so easy, owner of ZXing said that only add following code into onResume and onPause overrided method:

@Override
public void onResume() {
    barcodeView.resume();
    super.onResume();
}

@Override
public void onPause() {
    barcodeView.pause();
    super.onPause();
}

Solution 2

You must initialize the barcodeView.

Try this code:

IntentIntegrator integrator = IntentIntegrator.forSupportFragment(this);
barcodeView.initializeFromIntent(integrator.createScanIntent());

https://github.com/journeyapps/zxing-android-embedded

Solution 3

Try to use the minimal library of zxing like following link: https://github.com/andreipro/zxing-android-minimal

It's easy. You just have to add these lines into your gradle

repositories {
    mavenCentral()

    maven {
        url "https://raw.github.com/embarkmobile/zxing-android-minimal/mvn-repo/maven-repository/"
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:support-v13:22.2.0'

    // Zxing minimal libraries
    compile 'com.embarkmobile:zxing-android-minimal:2.0.0@aar'
    compile 'com.embarkmobile:zxing-android-integration:2.0.0@aar'
    compile 'com.google.zxing:core:3.0.1'
}

And then just call the barcode using this

new IntentIntegrator(this).initiateScan(); // `this` is the current Activity

In you case, you wanna use a custom layout, so you must create your custom layout following some parameters, such as the layout below:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <SurfaceView android:id="@+id/zxing_preview_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

    <com.google.zxing.client.android.ViewfinderView
        android:id="@+id/zxing_viewfinder_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

    <LinearLayout
        android:id="@+id/zxing_result_view"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/zxing_result_view"
        android:visibility="gone"
        android:baselineAligned="false">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="@dimen/zxing_standard_padding">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:gravity="right|center_vertical">

                <ImageView android:id="@+id/zxing_barcode_image_view"
                    android:layout_width="160dip"
                    android:layout_height="wrap_content"
                    android:maxWidth="160dip"
                    android:maxHeight="160dip"
                    android:layout_marginBottom="@dimen/zxing_half_padding"
                    android:adjustViewBounds="true"
                    android:scaleType="centerInside"
                    tools:ignore="ContentDescription"/>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_format"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_format_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_type"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_type_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_time"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_time_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">

                    <TextView android:id="@+id/zxing_meta_text_view_label"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/zxing_msg_default_meta"
                        android:textColor="@color/zxing_result_minor_text"
                        android:textStyle="bold"
                        android:paddingRight="@dimen/zxing_half_padding"/>

                    <TextView android:id="@+id/zxing_meta_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_minor_text"/>

                </LinearLayout>

            </LinearLayout>

            <ScrollView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView android:id="@+id/zxing_contents_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_text"
                        android:textColorLink="@color/zxing_result_text"
                        android:textSize="22sp"
                        android:paddingLeft="12dip"
                        android:autoLink="web"
                        android:textIsSelectable="true"/>

                    <TextView android:id="@+id/zxing_contents_supplement_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/zxing_result_text"
                        android:textColorLink="@color/zxing_result_text"
                        android:paddingLeft="12dip"
                        android:autoLink="web"
                        android:textIsSelectable="true"/>

                </LinearLayout>

            </ScrollView>

        </LinearLayout>

        <LinearLayout android:id="@+id/zxing_result_button_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

            <Button style="@style/zxing_ResultButton"
                android:visibility="gone"/>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_gravity="bottom|center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView android:id="@+id/zxing_status_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:background="@color/zxing_transparent"
            android:text="@string/zxing_msg_default_status"
            android:textColor="@color/zxing_status_text"/>

        <Button android:id="@id/zxing_back_button"
            android:layout_marginTop="10dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:height="60dp"
            android:textAlignment="center"
            android:layout_gravity="bottom|center_horizontal"
            android:text="@string/zxing_button_cancel"/>

    </LinearLayout>

</merge>

After that, you can set the above layout into integrator like

IntentIntegrator integrator = new IntentIntegrator(this);
integrator.setCaptureLayout(R.layout.custom_layout);
integrator.initiateScan();

But remember, you have to follow those parameters. It means that you have to use the same name for all the views.

37,843

Author by

Neo

Just coding "Life is short. Smile while you still have teeth"

Updated on December 27, 2020

Comments

Neo over 3 years

I develope ZXing barcode continuous scanner following this page on Android Studio.

My App build.gradle had include:

repositories {
    mavenCentral()

    maven {
        url "https://raw.github.com/embarkmobile/zxing-android-minimal/mvn-repo/maven-repository/"
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile files('src/main/jniLibs/scanditsdk-android-4.7.5.jar')
    compile files('src/main/jniLibs/httpclient-4.0.jar')

    compile 'com.journeyapps:zxing-android-embedded:3.0.3@aar'
    compile 'com.google.zxing:core:3.2.0'
}

And my Fragment.xml's layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#00CC00"
    android:orientation="vertical"
    android:weightSum="100">

    <com.journeyapps.barcodescanner.CompoundBarcodeView
        android:id="@+id/barcode_scanner"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="40"
        >

    </com.journeyapps.barcodescanner.CompoundBarcodeView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="100"
        style="?android:attr/buttonBarStyle"
        >


        <Button
            android:id="@+id/btnStartScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Start"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>

        <Button
            android:id="@+id/btnStopScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Stop"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>

        <Button
            android:id="@+id/btnPauseScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Pause"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>

        <Button
            android:id="@+id/btnResumeScan"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="25"
            android:text="Resume"
            android:background="@drawable/buttonstyle"
            style="@style/button_style"/>
    </LinearLayout>

</LinearLayout>

Then, my Fragment code look like following:

public class CMCSMOFragment extends Fragment implements View.OnClickListener {

    private CompoundBarcodeView barcodeView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        if (container == null) {
            return null;
        }

        View v;
        v = inflater.inflate(R.layout.cmcsmo_layout, container, false);

        barcodeView = (CompoundBarcodeView) v.findViewById(R.id.barcode_scanner);
        barcodeView.decodeContinuous(callback);

        return v;
    }

    private BarcodeCallback callback = new BarcodeCallback() {
        @Override
        public void barcodeResult(BarcodeResult result) {
            if (result.getText() != null) {
                barcodeView.setStatusText(result.getText());
            }

            //Do something with code result
        }

        @Override
        public void possibleResultPoints(List<ResultPoint> resultPoints) {
        }
    };
}

And when I build my app, the CompoundBarcodeView only show a black view with ZXing text:

Place a barcode inside the viewfinder rectangle to scan it.

Edit:

Follow Lennon suggestion, I had used zxing-minimum but it doesn't allow to work on Portrait mode :(.

How should I do to solve this problem? Thanks for all help!

Neo over 8 years

I have done this. Thank you very much. But could I use ZXing minimal on Portrait screen?
Lennon Spirlandelli over 8 years

No. Unfortunately I've tried to use it on Portrait, but no success.
Adam Katz over 7 years

I copied all your code but I am still only getting a black screen
Neo over 7 years

Please follow https://github.com/journeyapps/zxing-android-embedded for more detail.