Fix camera preview aspect ratio

This fixes the aspect ratio of the SurfaceViews used to show the
camera preview in the "Show + capture camera" and "Continuous
capture" activities.

Author: fadden

AndroidManifest.xml

@@ -17,7 +17,7 @@
 
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.android.grafika"
-    android:versionCode="29"
+    android:versionCode="30"
     android:versionName="1.0" >
 
     <uses-sdk

README.md

@@ -64,15 +64,14 @@ Current features
 - Name starts with an asterisk so it's at the top of the list of activities.
 
 [Continuous capture](src/com/android/grafika/ContinuousCaptureActivity.java).  Stores video in a circular buffer, saving it when you hit the "capture" button.  (Formerly "Constant capture".)
-- The aspect ratio of the display window does not match the incoming frames, so the
-  images will appear stretched on screen.
 - Currently hard-wired to try to capture 7 seconds of video from the camera at 6MB/sec,
   preferrably 15fps 720p.  That requires a buffer size of about 5MB.
 - The time span of frames currently held in the buffer is displayed.  The actual
   time span saved when you hit "capture" will be slightly less than what is shown because
   we have to start the output on a sync frame, which are configured to appear once per second.
 - Output is a video-only MP4 file ("constant-capture.mp4").  Video is always 1280x720, which
-  usually matches what the camera provides.
+  usually matches what the camera provides; if it doesn't, the recorded video will have the
+  wrong aspect ratio.
 
 [Double decode](src/com/android/grafika/DoubleDecodeActivity.java).  Decodes two video streams side-by-side to a pair of `TextureViews`.
 - Plays the two auto-generated videos.  Note they play at different rates.
@@ -136,9 +135,9 @@ Current features
 - Recording continues until stopped.  If you back out and return, recording will start again,
   with a real-time gap.  If you try to play the movie while it's recording, you will see
   an incomplete file (and probably cause the play movie activity to crash).
-- The preview frames are rendered to a `GLSurfaceView`.  The aspect ratio will likely appear
-  stretched -- the View's size isn't adjusted.  Generally looks best in landscape.  The
-  recorded video is scaled to 640x480, so it will probably look squished.
+- The recorded video is scaled to 640x480, so it will probably look squished.  A real app
+  would either set the recording size equal to the camera input size, or correct the aspect
+  ratio by letter- or pillar-boxing the frames as they are rendered to the encoder.
 - You can select a filter to apply to the preview.  It does not get applied to the recording.
   The shader used for the filters is not optimized, but seems to perform well on most devices
   (the original Nexus 7 (2012) being a notable exception).  Demo
@@ -194,8 +193,6 @@ In no particular order.
 - Capture audio from microphone, record + mux it.
 - Enable preview on front/back cameras simultaneously, display them side-by-side.  (This
   appears to be impossible except on specific devices.)
-- Fix the various aspect ratio problems (camera in/out in "Show + capture" and "Continuous
-  capture" activities).
 - Add a test that renders to two different TextureViews using different EGLContexts
   from a single renderer thread.
 

res/layout/activity_camera_capture.xml

@@ -24,14 +24,22 @@
     android:paddingTop="@dimen/activity_vertical_margin"
     tools:context=".CameraCaptureActivity" >
 
-    <android.opengl.GLSurfaceView
-        android:id="@+id/cameraPreviewSurface"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+    <com.android.grafika.AspectFrameLayout
+        android:id="@+id/cameraPreview_afl"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
         android:layout_alignLeft="@+id/toggleRecording_button"
         android:layout_alignParentBottom="true"
         android:layout_alignParentRight="true"
-        android:layout_below="@+id/toggleRecording_button" />
+        android:layout_below="@+id/toggleRecording_button"
+        android:layout_centerInParent="true" >
+
+        <android.opengl.GLSurfaceView
+            android:id="@+id/cameraPreview_surfaceView"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_gravity="center" />
+    </com.android.grafika.AspectFrameLayout>
 
     <Button
         android:id="@+id/toggleRecording_button"
@@ -53,25 +61,25 @@
         android:id="@+id/cameraParams_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_below="@+id/toggleRecording_button"
+        android:layout_below="@id/toggleRecording_button"
         android:text="[?]"
         android:textAppearance="?android:attr/textAppearanceMedium" />
 
     <TextView
         android:id="@+id/cameraOutputFileLabel"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignLeft="@+id/cameraParams_text"
-        android:layout_below="@+id/cameraParams_text"
+        android:layout_alignLeft="@id/cameraParams_text"
+        android:layout_below="@id/cameraParams_text"
         android:text="@string/cameraOutputFileLabel_text" />
 
     <TextView
         android:id="@+id/cameraOutputFile_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignBaseline="@+id/cameraOutputFileLabel"
-        android:layout_alignBottom="@+id/cameraOutputFileLabel"
-        android:layout_toRightOf="@+id/cameraOutputFileLabel"
+        android:layout_alignBaseline="@id/cameraOutputFileLabel"
+        android:layout_alignBottom="@id/cameraOutputFileLabel"
+        android:layout_toRightOf="@id/cameraOutputFileLabel"
         android:paddingLeft="4dp"
         android:text="@string/cameraOutputFile_text" />
 

res/layout/activity_continuous_capture.xml

@@ -21,26 +21,35 @@
         android:id="@+id/capturedVideoDesc_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignBaseline="@+id/capture_button"
-        android:layout_alignBottom="@+id/capture_button"
-        android:layout_toRightOf="@+id/capture_button"
+        android:layout_alignBaseline="@id/capture_button"
+        android:layout_alignBottom="@id/capture_button"
+        android:layout_toRightOf="@id/capture_button"
         android:text="@string/secondsOfVideo" />
 
-    <SurfaceView
-        android:id="@+id/continuousCapture_surfaceView"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+    <com.android.grafika.AspectFrameLayout
+        android:id="@+id/continuousCapture_afl"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
         android:layout_alignParentBottom="true"
         android:layout_alignParentLeft="true"
         android:layout_alignParentRight="true"
-        android:layout_below="@+id/capture_button" />
+        android:layout_below="@id/capture_button"
+        android:layout_centerInParent="true" >
+
+        <SurfaceView
+            android:id="@+id/continuousCapture_surfaceView"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_gravity="center" />
+
+    </com.android.grafika.AspectFrameLayout>
 
     <TextView
         android:id="@+id/recording_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignLeft="@+id/continuousCapture_surfaceView"
-        android:layout_alignTop="@+id/continuousCapture_surfaceView"
+        android:layout_alignLeft="@id/continuousCapture_afl"
+        android:layout_alignTop="@id/continuousCapture_afl"
         android:text="@string/nowRecording"
         android:textColor="#f00"
         android:textAppearance="?android:attr/textAppearanceLarge" />

res/layout/activity_play_movie_surface.xml

@@ -37,14 +37,14 @@
         android:id="@+id/playMovieFile_spinner"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignTop="@+id/play_stop_button"
-        android:layout_toRightOf="@+id/play_stop_button" />
+        android:layout_alignTop="@id/play_stop_button"
+        android:layout_toRightOf="@id/play_stop_button" />
 
     <com.android.grafika.AspectFrameLayout
         android:id="@+id/playMovie_afl"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_below="@+id/play_stop_button"
+        android:layout_below="@id/play_stop_button"
         android:layout_centerInParent="true" >
 
         <SurfaceView

src/com/android/grafika/CameraCaptureActivity.java

@@ -168,7 +168,7 @@ protected void onCreate(Bundle savedInstanceState) {
 
         // Configure the GLSurfaceView.  This will start the Renderer thread, with an
         // appropriate EGL context.
-        mGLView = (GLSurfaceView) findViewById(R.id.cameraPreviewSurface);
+        mGLView = (GLSurfaceView) findViewById(R.id.cameraPreview_surfaceView);
         mGLView.setEGLContextClientVersion(2);     // select GLES 2.0
         mRenderer = new CameraSurfaceRenderer(mCameraHandler, sVideoEncoder, outputFile);
         mGLView.setRenderer(mRenderer);
@@ -182,8 +182,12 @@ protected void onResume() {
         Log.d(TAG, "onResume -- acquiring camera");
         super.onResume();
         updateControls();
-        //openCamera(640, 480);      // updates mCameraPreviewWidth/Height
         openCamera(1280, 720);      // updates mCameraPreviewWidth/Height
+
+        // Set the preview aspect ratio.
+        AspectFrameLayout layout = (AspectFrameLayout) findViewById(R.id.cameraPreview_afl);
+        layout.setAspectRatio((double) mCameraPreviewWidth / mCameraPreviewHeight);
+
         mGLView.onResume();
         mGLView.queueEvent(new Runnable() {
             @Override public void run() {

src/com/android/grafika/ContinuousCaptureActivity.java

@@ -260,6 +260,10 @@ private void openCamera(int desiredWidth, int desiredHeight, int desiredFps) {
         String previewFacts = mCameraPreviewSize.width + "x" + mCameraPreviewSize.height +
                 " @" + (mCameraPreviewThousandFps / 1000.0f) + "fps";
         Log.i(TAG, "Camera config: " + previewFacts);
+
+        // Set the preview aspect ratio.
+        AspectFrameLayout layout = (AspectFrameLayout) findViewById(R.id.continuousCapture_afl);
+        layout.setAspectRatio((double) mCameraPreviewSize.width / mCameraPreviewSize.height);
     }
 
     /**