Tutorial details

[TUT] Using the camera with a custom overlay | App Code for Sale | Preview

[TUT] Using the camera with a custom overlay | Android Tutorial

How to use the devices camera inside your application

Overview PAGE TOP

This tutorial shows you how to use the devices camera inside your application. It also shows how you can have a custom UI for your camera and overlay images on top of the camera preview.

I’ll apolgise now my graphics aren’t the best, but they convey the idea and concepts of what is possible.

The code has been written for intuitive reading, not for production testing use. As usual it is heavily commented so excuse the brevity of the actual post. Any questions ask away!


References used for this tutorial:

Android Developer . Camera

Android Developer . Loading Bitmaps

What we are going to do:

  • Create an Activity to start the camera and show the captured image
  • Display the camera within our app
  • Add a custom UI to the camera

Ok here .. we .. go

This is nice and straight forward, first we create an Activity that will check if the camera is available on the device. If it is the user can click a button to load the camera. We also display the result of taking a photo (we will be using startActivityForResult).


+ expand source


+ expand source

When we click through to the CameraActivity a few things happen. First we have a custom SurfaceView that we draw the camera onto. This custom surface view is then put in a FrameLayout allowing us to put other views on top of it. When drawing the custom surface view we are using the camera preview, meaning we have access to the camera. Note: only one app can access the camera at a time, so it is possible that it will not be available and also if we don’t treat it correctly it won’t be available for others to use when we have finished. We will manage our use of the camera from our Activity (to make use of the Activity lifecycle).

Checkout the custom surface view below, we watch out for a callback when the surface has been created i.e. when our Activity is shown, and then attach our camera preview. If you wanted to do other funky things like rotate UI components when the phone changes orientation you would do it here in the surfaceChanged method.


+ expand source

The CameraPreview is then used in our CameraActivity, don’t forget to instantiate it using setCamera, this is where I differ from the default Google example of using the camera, as our layout it kept in the XML file compared to google creating UI components in onCreate and adding them to the layout hierarchy programatically.


+ expand source

For overlaying your UI, you simply use a FrameLayout in your layout and add whatever views you want there:


+ expand source

Finally there are few helper classes for poking the cameras state, loading bitmaps and saving your images to the filesystem. These are pretty self explanatory and commented in the source links below.


Source Downloads:

Camera Overlay Tutorial Eclipse Source

GitHub Repo Link

Reference PAGE TOP


0 Comments Leave a comment

Please login in order to leave a comment.

Newest first

to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.