如何在 cameraX 预览中设置预览大小？

Question

I am trying to create a preview in portrait mode and I want the preview to be as wide as the screen and wrap content vertically. However, when I do that I always get the preview size 1200x 1200 and the preview is stretched horizontally to fill the screen.

The image captured is the correct size though ( 1024x768 .

In other words I want the preview size to be same as image captured.

Any help will be appreciated.

preview = new Preview.Builder()
            .setTargetAspectRatioCustom(new Rational(3, 4))
            .build();

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.molescope.CameraXActivity">

    <androidx.camera.view.PreviewView
        android:id="@+id/preview_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageButton
        android:id="@+id/capture_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginBottom="@dimen/margin_vertical"/>


</androidx.constraintlayout.widget.ConstraintLayout>

    def camerax_version = "1.0.0-beta03"
    implementation "androidx.camera:camera-core:${camerax_version}"
    implementation "androidx.camera:camera-camera2:${camerax_version}"
    implementation "androidx.camera:camera-lifecycle:${camerax_version}"
    implementation "androidx.camera:camera-view:1.0.0-alpha10"
    implementation "androidx.camera:camera-extensions:1.0.0-alpha10"

Answer 1

If you want the preview to fit the width of the screen, you might want to test setting the scale type of PreviewView to FIT_CENTER (or FIT_START or FIT_END , depending on how you want to layout the preview on the screen).

You can either set the scale type programmatically:

previewView.setScaleType(PreviewView.ScaleType.FIT_CENTER);

Or in the layout file:

<androidx.camera.view.PreviewView
   ...
   android:scaleType="fitCenter" />

FIT_* fits either the width or height of the preview to match the width or height of PreviewView 's container (or both, if the container and the preview resolution have the same aspect ratio), which dimension is matched depends on a couple of things, including the preview resolution, the natural orientation of the device and the display's current orientation. As a result, this approach might not work in all situations, at times, the preview will fill the width of its container, at others, it will fill the height of the container.

If your concern is the aspect ratio of the displayed preview, another way to solve your problem is to set PreviewView 's aspect ratio (in your case, I assume it would be 4x3), and set PreviewView to use a FIT_CENTER scale type.

Answer 2

About your question of In other words I want the preview size to be same as image captured. This post https://groups.google.com/a/android.com/g/camerax-developers/c/6GNMfHIDeAM seems to be quite helpful. It says:

You have a try on the ViewPort feature to produce the same crop rect in a WYSIWYG. While using the CameraXBasic sample code, you can replace the bindToLifeCycle with

val viewPort: ViewPort = ViewPort.Builder(
Rational(
viewFinder.width,
viewFinder.height
),
viewFinder.display.rotation
).setScaleType(ViewPort.FILL_CENTER).build()

val useCaseGroupBuilder: UseCaseGroup.Builder = UseCaseGroup.Builder().setViewPort(
viewPort
)

useCaseGroupBuilder.addUseCase(preview!!)
useCaseGroupBuilder.addUseCase(imageCapture!!)
useCaseGroupBuilder.addUseCase(imageAnalyzer!!)

camera = cameraProvider.bindToLifecycle(
this, cameraSelector,
useCaseGroupBuilder.build()
)