CWAC-CAMERA position preview on top of available preview area when useFullBleedPreview = false

Question

I'm trying to use CameraFragment from cwac-v9-camera to create custom Camera fragment taking and previewing Square images.

I want Preview and taken Picture to be completelly identical, so: 1. I useFullBleedPreview = false 2. I want preview picture to take full width and need to place my preview picture in the very top of the preview area, so I can cover rest of image with some view, to make it square.

The problem is that CameraView draws image in the center of camera preview area, and adds white lines on the top and buttom.

Is there any way to control where lobrary draws the preview picture?

Answer 1

I have the same issue and spent a day on this CWAC library (by the way, it is absolutely great). I would like to share my research and hopefully you (and me) would get a working solution soon.

Test Platform: Sony Xperia Z, Android 4.2.2

Test Resolution: 1080x1920.

Available Preview: 1280x720, 960x720, 720x480, 704x576, 640x480, 480x320, 320x240, 176x144.

Target Preview size: 1080x1080, a square, of course :D

Test done inside CameraHost.getPreviewSize() of my custom CameraHost.

1. If I provide a square view/size to the super class function here, I got 704x576. It is 11:9 (or 1.22222~) which is closest to 1:1 or 1.0. However, it looks blurry when enlarge to 1080 width and also distorted.

2. 1280x720 is 16:9 (1.777~). The device camera got this by cropping the top and bottom (please note that camera is talking in landscape mode).

3. 960x720 is 4:3 (1.333~). This is the full resolution of the device camera. It is my target resolution, where I only want the 720x720 inside 960x720 towards the top edge(portrait) or left edge(landscape).

4. In your custom CameraHost (extends SimpleCameraHost), limit the preview size:

   @Override
   public Size getPreviewSize(int orientation, int w, int h, Parameters p) {
       Size size = super.getPreviewSize(orientation, 720, 960, p);
       ViewGroup.LayoutParams params = cameraView.getLayoutParams();
       params.width = 1080;
       params.height = 960 * 1080/720;
       cameraView.setLayoutParams(params);
       return size;
   }
   

5. layout.xml:

   <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <com.commonsware.cwac.camera.CameraView
           android:id="@+id/cameraView"
           android:layout_width="match_parent"
           android:layout_gravity="top|center_horizontal"
           android:layout_height="match_parent"/>
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:orientation="vertical">
           <com.example.android.widget.SquareView
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:background="@android:color/transparent"/>
           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="0dp"
               android:layout_weight="1"
               android:orientation="vertical"
               android:background="#99e0e0e0">
               (your elements to cover up the extra area)
           </LinearLayout>
       </LinearLayout>
   </FrameLayout>
   

Following is the result and comparing with the system camera, using 4:3.

Note:

1. I suppose you know how to create your own SquareView so I won't post the code of it here. You can read more here: Simple way to do dynamic but square layout
2. The piece of code in #4 is just test code - you need to figure out how it can be adapt for all devices.
3. Do NOT accept click event by the CameraView for focusing. Use the SquareView instead.

Answer 2

Is there any way to control where lobrary draws the preview picture?

It draws the image where the CameraView is. Where precisely within that space it resides depends upon the aspect ratio of the CameraView and the aspect ratio of the preview image and cannot be determined ahead of time.