CameraX — Getting started guide

Android Jetpack: Understand the CameraX Camera-Support Library

PRANAY PATEL
Simform Engineering
7 min readMay 28, 2019

--

Designed in Adobe Photoshop CC by PRANAY PATEL

Google organises Google IO every year where they announce lot of new things for users and developers. Being a developer, I am sure you must have started watching sessions videos and started exploring newly introduced things. If not yet started then here is the playlist.

One of the important points to know is they have made Kotlin as first language everywhere. Many new Jetpack libraries will be offered first in Kotlin. For helping developers in getting started with Kotlin, Google encourages developers to attend Kotlin/Everywhere events and take Udacity courses.

What is JetPack…

Android Jetpack is a collection of Android software components which helps us in building great Android apps. It provides a series of unbundled libraries not tied to any particular version of Android, giving developers a way to support newer features on older versions of the Android operating system.

All the components of Jetpack are divided into following categories:

  • Foundation- This covers core system capabilities, such as AppCompat.
  • UI- This is the category for UI-focused components, including Fragment and Layout, but also for components that aren’t restricted to smartphones, such as Auto, TV, and Wear OS by Google (formerly Android Wear).
  • Architecture- This is where you’ll find modules that will help you to handle the challenges surrounding data persistence and the application lifecycle.
  • Behavior- This category contains modules such as Permissions, Notifications, and Sharing.

You can check more details about Jetpack here

What’s new in JetPack…

Now let’s take a look at and discuss the new members that they have introduced in the JetPack family:

  • CameraX — Support library for camera
  • Jetpack Compose — A declarative toolkit for building UI

So in this article, we will deep dive into all the new CameraX API and features.

Camera API in Present…

✋Raise your hand if you have done or doing any work on Camera API. I appreciate your efforts! As we all know, in the present camera API, we have to do a lot more boilerplate code to give camera support for all the Android flavors and different devices😣.

CameraX is here for you…

Thanks to Google team for working on Camera API problems and introducing a brand new library CameraX. While using CameraX, it would help us in reducing lot of boilerplate code and conditions that we need to tackle because of the vast range of android devices.

It provides a consistent and easy-to-use API surface that works across most Android devices, with backward-compatibility to Android 5.0 (API level 21).

CameraX is an addition to Jetpack that makes it easier to leverage the capabilities of Camera2 APIs

⚠️Currently, It is in the alpha release so you shouldn’t be using it in your production code.⚠️

CameraX will make developer’s life easy…

✔️ Easy to use with capabilities of Camera2 API.

✔️ All cameraX apis uses approaches are lifecycle aware(No need to handle lifecycle by yourself 😌).

✔️ No need to add device-specific code in your codebase.

✔️ Reduces the amount of code that you need to write when adding camera capabilities to your app.

✔️ A huge number of cameraX extensions and optional add-ons that allows you to add effects like Portrait, HDR, Night, and Beauty within your application on supported devices

✔️ Smaller APK size, more human readable code and minimal line of code.

✔️ Fixed Front/Back camera switch crashes.

✔️ Optimized camera closures / Fixed Incorrect Orientation / Fixed — Flash not firing.

Let's look into CameraX API…

Lets discuss how CameraX will help developers to make Camera development easy. At present, we can do following tasks by using CameraX library.

  • Preview: The image preview is streamed to this SurfaceTexture when the camera becomes active. The SurfaceTexture can be connected to a TextureView or a GLSurfaceView.
  • Analysis Image: The image analysis use case provides your app with a CPU-accessible image to perform image processing, computer vision, or machine learning inference on. The application implements an Analyzer method that runs on each frame.
  • Capture Image: The image capture use case is designed for capturing high-resolution, high-quality photos and provides auto-white-balance, auto-exposure, and auto-focus functionality.

Let’s take a look at every use cases and see how it is implemented.

Now Avengers are ready for the code! Credit: Giphy

1. Create a new project

  • Let’s create a new project with Empty Activity in Android studio
CameraX create project config Step-1
  • Select “Use androidx.* artifacts” and minimum API level 21 with Kotlin language. Now finish your Configure project steps:
CameraX create project config Step-2

2. Add CameraX library in your project…

Add the CameraX dependencies to our app Gradle file, inside the dependencies section:

Sync your project and now our app is ready to use CameraX.

3. Prepare layout

Lets design layout to achieve our different CameraX scenarios like Preview or capture. For that, Let’s update the activity_main layout file from res > layout > activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<!--Make TextureView in Center-->
<TextureView
android:id="@+id/textureView"
android:layout_width="640px"
android:layout_height="640px"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

<androidx.appcompat.widget.AppCompatButton
android:id="@+id/capture_button"
android:layout_width="wrap_content"
android:background="@color/colorPrimary"
android:text="@string/take_a_picture"
android:textAllCaps="false"
android:textColor="@android:color/white"
android:padding="8dp"
android:textSize="16sp"
android:layout_height="wrap_content"
android:layout_margin="24dp"
app:srcCompat="@android:drawable/ic_menu_camera"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

4. Camera Permission to perform tasks

As we want to work with Camera we need runtime permission code for Camera and need to declare Camera Permission in our Manifest file:

<uses-permission android:name="android.permission.CAMERA"/>
  • Check and request Camera permission:

CameraX Preview use case:

For Preview we need to define SurfaceTexture which streams camera input and produce our Preview case. In our caseSurfaceTexturecan be connected to a TextureView

  • Prepare PreviewConfig and prepare Preview using a config. Also, register OnPreviewOutputUpdateListener using preview instance which will update every time preview and recompute output:
Click HERE to check IO19 video frame of CameraX preview

Now we are ready to test our CameraX Preview case. Run your app and test your preview.

🔔 Note: You may see the following error in the bindToLifecycle method call: `Type mismatch: inferred type is MainActivity but LifecycleOwner! was expected`. Cleaning and rebuilding the project should fix the issue. If everything fails, make sure that you are using the latest version of appcompat. At the time of this writing, that would mean changing the appcompat entry in the dependencies section of your gradle file to: `implementation ‘androidx.appcompat:appcompat:1.1.0-alpha05’`.

Check more details info for CameraX Preview here

CameraX Capture Case:

Image capture is much simpler using CameraX. User has to decide how they need image. CameraX provides Capture file and in-buffer Captured image.

  • takePicture(OnImageCapturedListener): This method provides an in-memory buffer of the captured image.
  • takePicture(File, OnImageSavedListener): This method saves the captured image to the provided file location.
  • takePicture(File, OnImageSavedListener, Metadata): This method enables you to specify the metadata to embed in the saved file's Exif.

We need to prepare ImageCaptureConfig for ImageCapture which we can use for photo capture:

Click HERE to check IO19 video frame of CameraX Capture

Above code makes our capture button functional. Now you can capture an image.

Check more details info for CameraX Capture here.

CameraX Analysis use case:

In my opinion, Analysis is the best use case that cameraX does have via ImageAnalysis. We can perform image processing, computer vision, or machine learning inference on the image. Image Analysis will perform on every camera output frame.

  • First, we need to prepare custom image analyzer using ImageAnalysis.Analyser interface.
  • Now, we need to prepare ImagaeAnalysisConfig . Using ImageAnalysis class we can use analysisconfig
Click HERE to check IO19 video frame of CameraX Analysis

Now run your app and You will get output like below in every second when an image is being analyzed:

pranay.com.cameraxapp D/CameraX Demo: Average luminosity: 8.535862630208333

For more details about CameraX analyze check here

CameraX extensions:

https://youtu.be/kuv8uK-5CLY?t=1382

CameraX extensions provide a way to access vendor-specific features like Portrait, HDR, Night, Beauty, and bokeh effects. CameraX runs a check if those features are available of the device or not. It will enable them they are available.

For more details about Extension check this

Wrap Up!

So, that was pretty cool, right? This is all the stuff you need to know to get started with CameraX.

Credit: Giphy

Let’s just take a look at summary of what we have learned:

  • How we can integrate CameraX library in our project
  • How we can use camera preview by using Preview and SurfaceTexture
  • How we can Capture Image and save the captured image
  • How we can analyze Camera output frame using ImageAnalysis

Here is the Github repository link of the functional app. Check it out:

🙏 Thanks for reading this article. Don’t forget to clap👏/recommend as much as you can and also share📤 with your friends. It means a lot to me.

For more about programming, follow me and Simform Engineering, so you’ll get notified whenever a new article is posted.

You can find our Simform Engineering best articles here.

Also, Let’s become friends on Twitter, Github

Resources:

--

--

PRANAY PATEL
Simform Engineering

Senior Software Engineer - Android @mutualmobile | Flutter | Android | KMP | Lazy Investor