Stretched camera preview on SurfaceView on Android Studio

Question

This is the result I get when I make the SurfaceView smaller. How do I fix this so that it shows correct aspect ratio? I don't want to use the whole image I get from the camera, only a part of it.

Think of it like the Facebook messenger app, when you want to take an instant photo from the app, a small camera window appears. I want the same result. Here is my code:

import android.content.Context;
import android.hardware.Camera;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

import java.io.IOException;
import java.util.List;

public class CameraPreview extends SurfaceView implements SurfaceHolder.Callback {

    public static final String TAG = "AKSQS";
    private SurfaceHolder mHolder;
    private Camera mCamera;

    public CameraPreview(Context context, Camera camera) {
        super(context);
        mCamera = camera;
        mHolder = getHolder();
        mHolder.addCallback(this);
        mHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
    }


    @Override
    public void surfaceCreated(SurfaceHolder holder) {

        try {
            mCamera.setPreviewDisplay(holder);
            mCamera.startPreview();
        } catch (IOException e) {
            Log.d(TAG, "Error setting camera preview: " + e.getMessage());
        }
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

        //Take care of rotation and resizing here.

        mCamera.stopPreview();
        mCamera.setDisplayOrientation(90);

        Camera.Parameters parameters = mCamera.getParameters();
        List<Camera.Size> sizes = parameters.getSupportedPreviewSizes();
        for (Camera.Size sizesl : sizes) {
            //This is just to see the supported preview sizes.
            Log.d(TAG, "Width: " + String.valueOf(sizesl.width));
            Log.d(TAG, "Height: " + String.valueOf(sizesl.height));
            Log.d(TAG, "--------");
        }
//        parameters.setPreviewSize(1080,288);

        mCamera.setParameters(parameters);

        mCamera.startPreview();

        if (mHolder.getSurface() == null) {
            return;
        }

        try {
            mCamera.stopPreview();
        } catch (Exception e) {
            Log.d(TAG, "Tried to stop a non-existing preview. Message: " + e.getMessage());
        }

        try {
            mCamera.setPreviewDisplay(mHolder);
            mCamera.startPreview();
        } catch (Exception e) {
            Log.d(TAG, "Error starting camra preview: " + e.getMessage());
        }

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        mCamera.stopPreview();
        mCamera.release();
        mCamera = null;
    }

}

Here is my xml file:

<RelativeLayout ...>

<FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="250dp"
        android:id="@+id/camera_preview"
        android:layout_alignParentBottom="true">
    </FrameLayout>

</RelativeLayout>

Here is the result I get:

https://i.sstatic.net/AEx2C.jpg

Answer 1

This has been bothering me for a month. I finally figured out the answer here:

https://stackoverflow.com/a/22758359/5273230

Here's the final result:

https://i.sstatic.net/kA7CP.jpg