Capture Images with CameraX

Google at its 2019 I/O introduced CameraX, a camera library as part of the Jetpack support library. With CameraX, the developers can spend less time writing the logic to set up the preview to analyze the preview or capture an image and more on time business logic.



CameraX is built to simplify three use cases when building a camera application. These are showing a preview, taking a picture and analyzing the image.

In addition to that, CameraX provides what is called CameraX Extensions, which enables the developers to take advantage of the device-specific and vendor-specific effects like bokeh, HDR, Night, Beauty mode. With this, the features of the native camera application on the device can be easily extended to our application.

A temporary disadvantage is that the CameraX is available for the devices running API 21 (Lollipop or Android 5.0) and higher. This is because of its heavy use of Camera2 API's.

Android CameraX Preview

In this article, we will take a look at how to show camera preview and take a picture using CameraX.

Add UI elements

1. Add TextureView to show the camera preview.

<TextureView
    android:id="@+id/cameraTextureView"
    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"
    app:layout_constraintTop_toTopOf="parent" />

2. Add an image button at the bottom of the screen which when tapped takes a picture.

<androidx.appcompat.widget.AppCompatImageButton
    android:id="@+id/captureImageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_marginBottom="@dimen/capture_image_vertical_margin"
    android:minWidth="@dimen/capture_button_min_width"
    android:minHeight="@dimen/capture_button_min_height"
    app:srcCompat="@drawable/circle_photo_camera"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

The image button drawable (circle_photo_camera.xml) is a layer list with vector shaped camera on top of a white background.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="oval">
            <size android:width="48dp"
                  android:height="48dp"/>
            <solid android:color="@color/colorWhite"/>
        </shape>
    </item>


    <item>
        <inset android:drawable="@drawable/ic_photo_camera"
               android:insetLeft="8dp"
               android:insetBottom="8dp"
               android:insetRight="8dp"
               android:insetTop="8dp"/>
    </item>

</layer-list>

Request Runtime Permissions:

Every camera application at least needs Camera permission to show a camera preview and Storage permission to save the image to the external storage. So, add android.permission.CAMERA, android.permission.WRITE_EXTERNAL_STORAGE to the AndroidManifest.xml and request them at Runtime.

Set up Preview

Configure a preview with a back facing camera and rotation. Using the configuration, create a camera preview.

val rotation = activity?.windowManager?.defaultDisplay?.rotation ?: 0

val previewConfig = PreviewConfig.Builder()
    .setLensFacing(CameraX.LensFacing.BACK)
    .setTargetRotation(rotation)
    .build()
preview = Preview(previewConfig)

Create an image configuration with max image quality and auto flash functionality. Using the configuration, create an image capture object which will be used to take pictures. 

val imageCaptureConfig = ImageCaptureConfig.Builder()
    .setCaptureMode(ImageCapture.CaptureMode.MAX_QUALITY)
    .setFlashMode(FlashMode.AUTO)
    .build()
imageCapture = ImageCapture(imageCaptureConfig)


// Listen to the preview data updates
preview.setOnPreviewOutputUpdateListener {
    cameraTextureView.surfaceTexture = it.surfaceTexture
}

Capture the image

Specify the location in the external storage for the image to be saved when the picture is taken and take the picture.

private fun captureImage() {
    // Decide the location of the picture to be saved to
    val file = File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM), "IMG_${System.currentTimeMillis()}.jpg")
    if (DBG) Log.d(TAG, "File Path: ${file.path}")
    // Create the file
    if (!file.exists()) {
        try {
            val isCreated = file.createNewFile()
            if (DBG) Log.d(TAG, "File Created: $isCreated")
        } catch (e: IOException) {
            Snackbar.make(
                main, "Failed to create the file",
                LENGTH_LONG
            ).show()
            e.printStackTrace()
        }
    }

    // Take a picture and save it
    imageCapture.takePicture(file, imageSavedListener)
}

Pass a listener to the takePicture method so that it notifies whether the image is saved successfully or failed. In case if failed, show an error message and if saved we can display the image to the user. 

// Listen to the image save or fail status
private val imageSavedListener =
    object : ImageCapture.OnImageSavedListener {
        override fun onImageSaved(file: File) {
            Snackbar.make(
                main, "Image saved successfully at ${file.path}",
                LENGTH_SHORT
            ).show()
        }


        override fun onError(useCaseError: ImageCapture.UseCaseError, message: String, cause: Throwable?) {
            Snackbar.make(
                main, "Image capture failed: $message",
                LENGTH_LONG
            ).show()
            cause?.printStackTrace()
        }

    }

Finally, bind the camera preview to a lifecycle, which helps the developer to less worry about pausing, resuming the previews and releasing the camera when the Activity lifecycle changes.

CameraX.bindToLifecycle(this, preview, imageCapture)

When the user taps on the camera button, a picture is taken and saved to the DCIM folder in the external storage. This finishes setting up the camera preview and taking pictures.

Popular posts from this blog

How to Read Metadata from AndriodManifest File

Metadata tags are key-value pairs and one of the decent ways to access the API keys from the libraries. They are added to the AndroidManifest.xml under the application tag and are available through the PackageManager . If you have worked with third-party libraries or even with App shortcuts, Downloadable Fonts, Firebase MLKit, you may have come across metadata tags. In the article, let’s add the metadata tags to the app module’s Manifest file and read the metadata key-values and the key-resource from a library module both in kotlin and java. Add meta-data: Add metadata to the app module's AndroidManifest.xml file under the application tag. You can add as many metadata elements as you want and you can also add metadata under the activity, service, broadcast receiver, content provider tags. <meta-data android:name= "com.gsrikar.library.LIBRARY_ACCESS_KEY" android:value= "masndfiu4er9funwikesd" /> <meta-data and
Read more

Mr Phone - Find The Next Best Phone You Want To Buy

Image
Want to buy a phone and not sure which phone to choose? Mr Phone is a phone search application and is here to help you find the best phone. The application was built by acidandrage and is available in the Google Play Store with In-app purchases. Search for your device and detailed specs gets loaded along with the image. You can tap the image for more pics or save the phone specs to view later. You can compare specs of any two phones or choose to use the Best Fit option. The Best Fit option of the app will show you the list of best-matched phones based on the preferred specs you've selected. Sections like New Releases and Popular shows the newly released phones and the phones that became most popular recently. While Stories section gives you to the Top Stories about smartphones, apps, and the Events section notifies you about the launch events of the smartphones. Great Day Readers! To give us more insights into the application development, Ashish Hooda, Head of
Read more

Add Spacing to Recycler View Linear Layout Manager Using Item Decoration

Image
In this article we will learn about, item decoration in Android and how we can use it to add even spacing between the child items. A RecyclerView without spacing will look like the image below but in most cases, we want to add spacing between the items. [You can see there are no margins between the views and only elevation] A more traditional option is adding margins in the list item xml file. If we take this route, we will soon end up with uneven spacing issues with vertical margins. [There are even left, right, top, bottom margins for all the rows except the last item in the first image and in the subsequent image, the top margin for the first item is half of the other items] The best way is to add the ItemDecoration to the RecyclerView as it affects the individual items and you can have more control over them. Kotlin: /** * Add vertical, horizontal spacing to the recycler view */ class DefaultItemDecorator(private val horizontalSpacing: Int,
Read more

Add Options Menu to Activity and Fragment

Image
Options Menu contains a set of primary menu items that are accessible to the user. In this article, we will take a look at how to implement the options menu in an Android Activity or a Fragment. Right click on the res directory in Android Studio and select Android Resource File option. It opens the Resource File creation modal where we need to enter the file name and select Resource Type as Menu. Clicking on OK button creates main_menu.xml under menu directory. Now add the following items to the XML file. <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/search" android:icon="@drawable/ic_search_white" android:orderInCategory="100" android:title="@string/action_title_search" app:actionViewClass="androidx.appcompat.widget.SearchView" app:showAsAction="ifRoo
Read more

Create Assets Folder, Add Files and Read Data From It

Image
Sometimes, we need to read the data stored in the files during runtime and want to make sure the data is not tampered by the Android build system. In this article, we will take a look at how to create the assets folder using Android Studio and read the stored data from it. First, Right-click on the module name or the package name. This opens an option window where we need to select the Assets Folder option by hovering over New and then on the Folder option. Now, we will see a window where we change the folder location and the source set. Change the values if necessary otherwise keep the defaults and click Finish. It may trigger a Gradle Sync. Irrespective of the sync, the Assets folder is created and is visible in the module. Now, Right-click on the Assets folder and click on the File option by hovering over the New option. Enter the name of the file name and click Enter to create the file. The file with the name user_details.json is created under the assets folder. Add some JSON
Read more