Captura y previsualización de fotos en Android con Jetpack Compose

Capturing and previewing images from the camera in Android apps with Jetpack Compose is a practical and easy to implement feature. Here's how to use a composable to display preview images before saving or discarding them.

How to create a PhotoPreviewScreen using Jetpack Compose?

Jetpack Compose allows you to structure effective interfaces quickly. To display an image obtained by the camera, we will use a composable called PhotoPreviewScreen. This view receives:

• A ByteArray with the captured image.
• A lambda called OnSaved, in charge of saving the photo.
• A lambda called OnCanceled, to cancel the operation and return to the capture view.

To convert the ByteArray into something viewable, we use a previously created extension function that converts this array into a Bitmap-like image:

bytesArray.AsImageBitmap().

What logic applies to our CameraScreenRoot?

In the main screen named CameraScreenRoot, the first step is to bind to a ViewModel:

val  UIState by ViewModel.UIState.collectAsState()val previewFoto by ViewModel.PreviewFoto.collectAsState().

The interface is mainly composed of a container(Box) with full size that displays a preview image if available:

• When a preview image exists, display PhotoPreviewScreen, using the data obtained from ViewModel.

PhotoPreviewScreen(    PhotoBytes  = previewPhoto,    OnSaved  =  { ViewModel.Action(CameraIntent.SavePhoto)  },    OnCancel  =  { ViewModel.Action(CameraIntent.CancelPreview)  }) )

• Otherwise, show the main capture view(CameraScreen).

How to rotate the captured image correctly?

When a photo is taken through the camera API, by default its orientation comes rotated 90 degrees, which requires an additional transformation. This is achieved by applying a rotation matrix in degrees provided by the camera:

val matrix  = Matrix().apply  {    postRotate(imageProxy.imageInfo.rotationDegrees.toFloat())}val rotatedBitmap  = Bitmap.createBitmap(    imageProxy.toBitmap(),     0,  0,    imageProxy.width,    imageProxy.height,    matrix,    true)ViewModel.Action(CameraIntent.TakenPicture(rotatedBitmap.toByteArray())))

Then, this rotated bitmap converted to ByteArray is the one sent to the ViewModel for previewing.

How to definitively implement this solution?

In the main activity(MainActivity) the basic capture screen is replaced by the one including preview:

CameraScreenRoot()

This logic starts the capture and immediate visual display of the captured photos, allowing to accept or reject each image taken according to what the user decides.

What permissions do I need to request?

As an additional, but indispensable step, are the permissions that guarantee the proper and secure operation of the camera. The handling of permissions follows the same pattern previously used in screens such as MapScreen. Review that procedure step by step and practice integrating it here, taking advantage of reference resources, such as the project repository, in case of doubts.

Go ahead and implement this useful feature in your app and let us know how it went!