camera preview is stretched pretty much in this layout

[roostaamir]

Hi again I've been busy with your library this past couple of days and unfortunately, I faced another problem I have this layout file:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

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

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:layoutDirection="rtl">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:minHeight="?attr/actionBarSize"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:titleTextColor="@android:color/white"
                android:background="?attr/colorPrimary">

                <TextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="title"
                    android:textColor="@android:color/white"
                    style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                    android:layout_gravity="center"
                    android:typeface="monospace"/>

            </android.support.v7.widget.Toolbar>

            <android.support.design.widget.TabLayout
                android:layoutDirection="ltr"
                android:layout_width="wrap_content"
                android:layout_height="80dp"
                android:layout_gravity="center_horizontal"
                android:background="#ebeff2"
                app:tabMode="scrollable"
                app:tabGravity="fill"
                app:tabIndicatorColor="@android:color/black"
                android:id="@+id/tabLayout_categories"
                style="@style/MyCostumeTabLayout"/>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:layoutDirection="ltr"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:id="@+id/viewPager_tabs"
            android:layout_gravity="center"/>

    </LinearLayout>

    <!-- this is the root layout for the barcode scanner -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frameLayout_camera_root" />
</FrameLayout>

As you can see I did this so that the barcode scanner is on top of other layouts. ( I am trying to make this layout look like a dialog) this is my java code and how I start the barcode scanner (for now this code is in the onCreate method of the activity):

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_barcode);
        showBarcodeScanner();
    }

private void showBarcodeScanner() {
        prepareBarcodeScanner();
        getSupportFragmentManager().beginTransaction().add(R.id.frameLayout_camera_root, barcodeCaptureFragment).commit();
    }

private void prepareBarcodeScanner() {
        barcodeCaptureFragment = BarcodeCaptureFragment.instantiate(
                MVBarcodeScanner.ScanningMode.SINGLE_AUTO, formats);
        scanningListener = new BarcodeCaptureFragment.BarcodeScanningListener() {
            @Override
            public void onBarcodeScanned(Barcode barcode) {
               //do something
            }

            @Override
            public void onBarcodesScanned(List<Barcode> barcodes) {
            }

            @Override
            public void onBarcodeScanningFailed(String reason) {
            }
        };
        barcodeCaptureFragment.setListener(scanningListener);
    }

the problem is that with this method, the camera preview is stretched (it still captures the barcodes and all, but the barcode is not on the screen at all when it is being captured, since the preview is stretched). So how can I fix this?

[iamMehedi]

seems like the same issue as in #15

[roostaamir]

This is not he same issue. With issue 15, the camera preview is out of bounds, and not stretched. With this issue, the camera preview is not out of bounds but it is stratched. In this issue, when the activity is paused and then resumed again, the camera preview will be fixed. Please reopen the issue

[iamMehedi]

as I have mentioned the problem most probably is in onLayout method of the CameraSourcePreview.java file. Somehow the aspect fit calculation is going wrong. And when that's wrong a few problems may arise depending on what went wrong i.e

• the camera preview surface may be way too larger than the screen, so a large portion of it will be out of the screen
• the preview surface might be way too small
• the aspect ratio between camera preview surface's size and camera's preview size might not be 1, so things will look stretched or distorted

[roostaamir]

Could you reproduce this behavior on your end with this exact same layout?

[iamMehedi]

I haven't got the chance to try these out. Going through a very very busy week, I'll check it out when I can manage some time. But I have actually seen #15 in an app in production that uses this library.

[roostaamir]

Thank you for the time you are spending on this project and the support you are giving to the issues I really appreciate your work thanks

[iamMehedi]

@roostaamir I have tried out the layout and code you posted but couldn't reproduce the issue on the devices I have. Can you please pull the issue_15_16 branch and try tapping the Scan button on the device you are facing this issue. Then please monitor the log for something like this:

D/CameraSourcePreview: aspect ratio: 0.5625
08-07 20:38:22.934 14332-14332/devliving.online.mvbarcodereadersample D/CameraSourcePreview: fit height -> cw: 864, ch: 1536
08-07 20:38:22.934 14332-14332/devliving.online.mvbarcodereadersample D/CameraSourcePreview: fit height [nested block] -> cw: 1080, ch: 1920
08-07 20:38:22.934 14332-14332/devliving.online.mvbarcodereadersample D/CameraSourcePreview: layout size: w: 1080, h: 1536 - fit size: w: 1080, h: 1920

And let me know those values.