How to make ZXing barcode scanner not in full-screen, but below a fragment

Question

I have made ZXing in portrait mode. Now I am going to make it appears under a fragment. How could I do that? It just always be in full-screen, which is definitely not what i want. Many Thanks for any hints or sample.

Like his work, but it is a fragment and it is a barcode scanner.

Exactly what I want.

QRCodeReader.java:

public class QRCodeReader extends Activity implements TopBar.OnFragmentInteractionListener, QRCodeReaderInner.OnFragmentInteractionListener{

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.page_qrcodereader);

    FragmentManager fm = getFragmentManager();
    Fragment f = fm.findFragmentById(R.id.fragment_scanner);

    if (f == null) {
        f = QRCodeReaderInner.newInstance("param1", "param2");
        fm.beginTransaction().add(R.id.fragment_scanner, f).commit();
    }
}
...
}

page_qrcodereader.xml

<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">

<fragment
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:name="com.innoasia.kaytami.innoasia.ui.generic.TopBar"
    android:id="@+id/fragment" />

<fragment
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:name="com.innoasia.kaytami.innoasia.ui.page.QRCodeReaderInner"
    android:id="@+id/fragment_scanner" />
</LinearLayout>

See my answer - https://stackoverflow.com/a/45187963/1617737 - to a similar question. — ban-geoengineering, Jul 19 '17 at 10:34
I made code for barcode generate and scan barcode. You can follow this ] to get the Step By Step Code. https://stackoverflow.com/a/58742737/11613683 — Pramesh Bhalala, Nov 07 '19 at 06:15

score 2 · Accepted Answer · answered Sep 22 '14 at 07:24

2

Check this out:

You have to make YourActivity to extend the CaptureActivity. There is an override method called handleDecode(Result rawResult, Bitmap barcode). You will get the scanned result here.

    public class ScanCard extends CaptureActivity {

    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.scan_card);
       }
    @Override
    public void handleDecode(Result rawResult, Bitmap barcode) {
        // TODO Auto-generated method stub
        super.handleDecode(rawResult, barcode);
            mScanResult = rawResult.getText().toString();
            // Result After scanning the QR code.
        }
    }
    }

Add the following in R.layout.scan_card xml file. I just set the width and height of the scanning area to "300dip" Adjust to your own size.

    <RelativeLayout
                android:id="@+id/relativeScanLayout"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center"
                android:orientation="vertical"
                android:padding="5dip" >

                <FrameLayout
                    android:id="@+id/frame_scan"
                    android:layout_width="300dip"
                    android:layout_height="300dip"
                    android:layout_centerInParent="true"
                    android:layout_gravity="center" >

                    <include layout="@layout/capture" />

                // Include the scanning area here

                </FrameLayout>

Make sure you haved added the Zxing Project to your build path. Let me know if you have any queries.

answered Sep 22 '14 at 07:24

Rethinavel

3,912
7
28
49

Yes I have zxing included in my project. But could you explain a bit further? I cannot quite catch up with that. Now I have an activity called QRCodeReader, which contains a fragment on the top and another fragment, which is for the scanner (At first, I thought I could have the scanner bounded in this fragment. Yet the scanner just contains the fullscreen, instead of the area of the fragment...) So now, I wanna know what does ScanCard corresponds to in my case? How should I alter my code? I added my code in the above for reference. – Derekyy Sep 22 '14 at 08:45
`ScanCard` is my QRCode scanning Activity which is QRCodeReader for you. You can include the ` ` to the xml to set the screen. – Rethinavel Sep 22 '14 at 08:56
Thanks, but where should I call IntentIntegrator? In QRCOdeReader, which has already extends CaptureActivity? – Derekyy Sep 22 '14 at 09:15
Thanks Rethinavel, I have completed it finally. Great to have this platform, so I could save another 3 days being stuck in a problem. Thanks a lot. – Derekyy Sep 22 '14 at 09:19
@Derekyy Glad it helped you. Actually we have to thank Sean Owen Who built this wonderful project. :-) – Rethinavel Sep 22 '14 at 09:41
Rethinavel, although I could place the scanner in the right position, there is no result returned. Is it becasue I do not use IntentIntegrator to initiate Scan for barcode scanner, therefore although I could scan, I cannot use the onActivityResult method to read the result, can I? Or is it a problem arised as I have rotated the screen to portrait mode (I follow this site's guidance), therefore, there is inconsistency when I directly call handleDecode method instead of using IntentIntegrator.initScan method? – Derekyy Sep 22 '14 at 09:47
I followed this site for the portrait mode http://stackoverflow.com/questions/16252791/zxing-camera-in-portrait-mode-on-android/16252917#16252917 – Derekyy Sep 22 '14 at 09:59
There is no need to call `IntentIntegrator`. Just call an ordinary intent. No `onActivityResult` needed. Just call ` startActivity(new Intent(yourActivity.this,QRCodeReader.class); ` And then show the QR code in Scanning area. You will get the result in ` handleDecode` method. Just put a toast message in `handleDecode()` method. and you will get the result. – Rethinavel Sep 22 '14 at 10:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61665/discussion-between-rethinavel-pillai-and-derekyy). – Rethinavel Sep 22 '14 at 10:06
hi, I have tried. But it is not returning result. I have screen-shot the image of my app ( http://postimg.org/image/70blxjm9t/ ). The scanner does not scan successfully. When it senses, it only leaves a blurred image in the rectangle area (see the uploaded image). I have checked in logcat that the message (mScanResult) is null here. Do you have a clue of the problem? – Derekyy Sep 22 '14 at 10:47
Have you extended the `CaptureActivity`? – Rethinavel Sep 25 '14 at 09:46
Yep I extended. In fact, the problem is solved. I added a line camera.setDisplayOrientation(90) in CameraConfigurationManager, which should be deleted. – Derekyy Sep 26 '14 at 09:51
I made code for barcode generate and scan barcode. You can follow this to get the Step By Step Code. https://stackoverflow.com/a/58742737/11613683 – Pramesh Bhalala Nov 07 '19 at 06:17

score 0 · Answer 2 · answered Sep 22 '14 at 07:33

The simplest thing that you can do is modify the the capture.xml of ZXing library and make the click callback to your Activity either by startActivityForResult or by creating interface that will provide the callbacks to your Activity.

Here is a small example as what I have did to make my Scanner look like it is inside a TabActivity:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<SurfaceView
    android:id="@+id/preview_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerInParent="true" />

<com.google.zxing.client.android.ViewfinderView
    android:id="@+id/viewfinder_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/transparent" />

<LinearLayout
    android:id="@+id/result_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/result_view"
    android:orientation="vertical"
    android:padding="4dip"
    android:visibility="gone" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="top"
        android:orientation="horizontal"
        android:padding="12dip" >

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

            <ImageView
                android:id="@+id/barcode_image_view"
                android:layout_width="160dip"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dip"
                android:adjustViewBounds="true"
                android:maxHeight="160dip"
                android:maxWidth="160dip"
                android:scaleType="centerInside" />

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

                <TextView
                    android:id="@+id/format_text_view_label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingRight="4dip"
                    android:text="@string/msg_default_format"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/format_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp" />
            </LinearLayout>

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

                <TextView
                    android:id="@+id/type_text_view_label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingRight="4dip"
                    android:text="@string/msg_default_type"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/type_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp" />
            </LinearLayout>

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

                <TextView
                    android:id="@+id/time_text_view_label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingRight="4dip"
                    android:text="@string/msg_default_time"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/time_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp" />
            </LinearLayout>

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

                <TextView
                    android:id="@+id/meta_text_view_label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingRight="4dip"
                    android:text="@string/msg_default_meta"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/meta_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/result_minor_text"
                    android:textSize="14sp" />
            </LinearLayout>
        </LinearLayout>

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

            <TextView
                android:id="@+id/contents_text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:autoLink="web"
                android:paddingLeft="12dip"
                android:textColor="@color/result_text"
                android:textColorLink="@color/result_text"
                android:textSize="22sp" />
        </ScrollView>
    </LinearLayout>

</LinearLayout>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    android:background="@color/transparent"
    android:textColor="@color/status_text"
    android:textSize="14sp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    android:orientation="horizontal"
    android:paddingTop="4dp" >

    <ImageButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:padding="10dp" />

    <ImageView
        android:layout_width="1sp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#3B6816" />

    <ImageButton
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:background="@null" />

    <ImageView
        android:layout_width="1sp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#3B6816" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@android:color/black"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

Let me know if this helps you...

But I want to ask, by using your approach, does it mean I cannot have both the fragment and the scanner in the same page? Because that is what I need the most. — Derekyy, Sep 22 '14 at 08:35
You can have that in the same view but the main challenge that you will face in this the scanning box will get distorted, as it happened to me. So this is more simple and manageable. — Abhishek Dhiman, Sep 22 '14 at 10:32

How to make ZXing barcode scanner not in full-screen, but below a fragment

2 Answers2