ZXing barcode scanner in custom layout in fragment

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

My App build.gradle had include:

  • Annoying “Errors running builder 'Android Pre Compiler' on project” dialog
  • Android App crashes without any logcat or any exception
  • cannot find keytool on a mac
  • Android Emulator Error Message: “PANIC: Missing emulator engine program for 'x86' CPUS.”
  • Searching a SQLite database which contains cyrillic data
  • unchecked call to ArrayAdapter
  • 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!

    Related posts:

    Proguard causing RuntimeException (Unmarshalling unknown type code) in Parcelable class
    What file system does Android use?
    List of useful Android libraries for android development and applications
    Error while waiting for device: Time out after 300seconds waiting for emulator to come online
    Missing adActivity with android:configChanges in AndroidManifest.xml
    How to prevent my snackbar text from being truncated on Android?
  • Is it possible to detect Android devices laying side by side
  • Display “No Item” message in ListView
  • In-App Payments for Android Amazon AppStore
  • How to fix “Support-v13:19.1.0 depends on libraries but is not a library itself”?
  • Eclipse - break on user code when unhandled exception is raised on Android App
  • Any way around awful SecretKeyFactory performance with LVL and AESObfuscator?
  • 4 Solutions collect form web for “ZXing barcode scanner in custom layout in fragment”

    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();
    }
    

    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.

    Does your app have permission to use the device camera?
    Add that permission in your manifest, and then after installing the app, go to your phone settings > apps > your app > permissions.
    And then grant the camera permission

    You must initialize the barcodeView.

    Try this code:

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

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

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.