Square preview

[bunjix]

How to get a square preview. I had tried with a square textureview. Does not work well.

[ragnraok]

To implement the square preview, you may need to take some other views to cover the original rectangle to make the center preview looks like square, but the finally retrieve pixels still in rectangle, so I think the best way is manually clip the successiveDataRequest returned bitmaps and draw it on the TextureView or SurfaceView

[bunjix]

Ok, I found a solution.
You should have a TextureView with the same width and height.
Next, you should set a Transform matrix to the textureview and change the scale.

[EzequielAdrianM]

Hi, I am having the same problem, but I would like to know why this isn't working.
In the place where the TextureView must be seen there is nothing!
If I place the TextureView outside SquaredFrameLayout the camera image is showing, but I want the preview to be square!

<com.my.project.view.SquaredFrameLayout
    android:id="@+id/vPhotoRoot"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextureView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/preview_surface" />
</com.my.project.view.SquaredFrameLayout>


public class SquaredFrameLayout extends FrameLayout {
    public SquaredFrameLayout(Context context) {
        super(context);
    }

    public SquaredFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquaredFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public SquaredFrameLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //RETURN HEIGHT SAME AS WIDTH
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }
}

[EzequielAdrianM]

Finally solved my problem, I was using FrameLayout instead of TextureView.

<com.my.project.view.SquaredFrameLayout
    android:id="@+id/vPhotoRoot"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.my.project.view.SquaredTextureView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/preview_surface" />
</com.my.project.view.SquaredFrameLayout>


public class SquaredTextureView extends TextureView {
    public SquaredTextureView(Context context) {
        super(context);
    }

    public SquaredTextureView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquaredTextureView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public SquaredTextureView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        setMeasuredDimension(width, width);
    }
}

And I got a Square Textureview! Hope this help somone.

[bunjix]

Can you post a full sample for your square preview ?
When you take a picture with your square preview, the picture is right centered ?

[EzequielAdrianM]

You only need SquaredTextureview, I also need SquaredFrameLayout because I have to place ImageButtons over the camera preview.
And this is only Squared View. The final taken picture is in the original resolution 16:9
So I'll have to Crop the bitmap. There's no other way

[EzequielAdrianM]

And this is the code to make the Final Taken Picture SQUARED and CENTERED!

private void requestTakePicture() {
    if (!checkCamera()) {
        return;
    }
    camera.request().takePictureRequest(true, new Func() {
        @Override
        public void call() {
            showLog("Captured!");
        }
    }, 1080, 1920, ImageFormat.JPEG).subscribe(new Action1<RxCameraData>() {
        @Override
        public void call(RxCameraData rxCameraData) {
            String path = Environment.getExternalStorageDirectory() + "/test.jpg";
            File file = new File(path);
            Bitmap bitmap = BitmapFactory.decodeByteArray(rxCameraData.cameraData, 0, rxCameraData.cameraData.length);
            int bitmapBorder = (bitmap.getHeight() / 2) - 1;
            bitmap = Bitmap.createBitmap(bitmap, bitmapBorder, 0, bitmap.getHeight(), bitmap.getHeight(), rxCameraData.rotateMatrix, false);
            try {
                file.createNewFile();
                FileOutputStream fos = new FileOutputStream(file);
                bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos);
                fos.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
            showLog("Save file on " + path);
        }
    });
}

[bunjix]

Ohh nice.
Thanks a lot. Will test this and close if ok.

[bunjix]

Do you have any settings about the size of the preview ?
By using SquaredTextureView and SquaredFrameLayout, the preview is a bit ugly.

Plus, the code
bitmap = Bitmap.createBitmap(bitmap, bitmapBorder, 0, bitmap.getHeight(), bitmap.getHeight(), rxCameraData.rotateMatrix, false);

cause a crash

[EzequielAdrianM]

I understand that the preview is ugly since we can only work with the supported preview sizes which are different on every device. Also the devices preview sizes are not intended to be Square. The most appropriate is not 16:9 (1080x1920) but 4:3 (1080x1440). Even there, the image is not Square at all. I will have to Crop the bitmap manually again, but now it is for the preview.

And about the Crash, I think it crashes with:

y + height must be = bitmap.height() 

That happens because the Image width/height is greater than the height of bitmap to save.
For example, I have tested the code on Samsung S4 and worked great. But when I tested on lower resolution devices (Which wont support 1080), RxCamera automatically changes preview and picture resolution to 480x640. And the "bitmapBorder" varialbe makes app crash while trying to make image Centered.
I solved that by changing this line;

int bitmapBorder = (bitmap.getHeight() / 2) - 1;

with this

int bitmapBorder = (bitmap.getHeight() / 2) - 80;

Obviously the image will be "less centered" on High-res devices, but prevents to crash on Lower-res devices. Here it is conveniently to detect the preview resolution and apply the appropriate mathematical operation.