Advertisement
  1. Code
  2. Android SDK
Code

Capture and Crop an Image with the Device Camera

by
Difficulty:IntermediateLength:MediumLanguages:

Many Android devices are equipped with built-in cameras. In this tutorial, we will work through the basic technique for capturing an image using the Android camera and then cropping it using apps the user already has installed on their device. Along the way, I'll also show how to account for users whose devices do not support either the image capture or cropping actions.


Step 1: Start a New Android Project

Create a new Android project in Eclipse, or your chosen IDE. In your main Activity class, add the following import statements after the package declaration:

These will allow us to carry out image capture, crop and display within the app. Open your application's strings XML file, which you should find in the "res/values" folder. Add the following strings:

We will use these strings within the user interface.


Step 2: Implement the App Layout

Let's design the app layout. Open your main XML file, which should be in the "res/layout" folder. Use a Linear Layout as follows, which Eclipse may have already provided:

Inside the Linear Layout, add the following text display:

Here we display some informative text using a string we defined in the strings XML file. After the Text View, add a button as follows:

The ID value will allow us to identify the button in Java, so that we can respond to clicks. Again, we use a string we already defined in XML. Finally, after the button, add an Image View:

We will place the image captured by the user with their device camera inside this Image View, using the ID value to identify it in Java. We use one of the strings as a content description and a background drawable resource we will create next. If you want the Image View to stretch to fill the available space, alter the width and height attributes to "fill_parent" instead of "wrap_content" - remember that this may make the image displayed appear poor quality.

For the background drawable, create a new XML file in each of your app drawable folders, naming it "pic_border.xml" to match the value we used in the Image View layout section. The easiest way to do this is to create the file in one drawable folder, copy the XML code into it, save it, then copy it into the other drawable folders.

Use the following XML in your new "pic_border" drawable file:

Using a drawable background resource is entirely optional, so feel free to omit this part. This is how the app will look when it is launched:

Initial App Interface

Step 3: Respond to User Clicks

In your app's Activity class, extend the opening class declaration line as follows:

Alter the class name to suit your own. Inside the Activity "onCreate" method, add the following after the existing code calling the superclass method and setting the content layout, which Eclipse should have populated:

Here we simply instruct the class to handle button clicks. The user will press the button to launch the camera. Now we need to provide an "onClick" method. Add it as follows, after the "onCreate" method:

Inside the "if" statement, we will implement using the camera.


Step 4: Launch the Camera

At the top of your class declaration, before the "onCreate" method, add the following instance variables:

We will use the first variable to keep track of the user's interaction as they navigate to the camera app and back. The second variable will store the URI of the captured image. Inside the "if" statement in your "onClick" method, add the following code to launch the camera Intent, including it in a "try" block:

When this code executes, the user's camera app will start up and they will be able to take a photo. We will handle the user returning from the camera app inside the "onActivityResult" method. From there we will be able to check that the user is returning from this Intent using the "CAMERA_CAPTURE" variable we pass when starting the Activity. However, before we do that we need to handle the situation in which the user device does not support the image capture intent we have attempted to launch here. After the "try" block, add a "catch" as follows:

Whenever you attempt to launch an Intent outside of your own app, this is a precaution you may wish to take. This is particularly the case with the cropping action which we will be exploring later, however this code pattern is a good habit to adopt in general, as user devices vary greatly. When the user accepts the photo they have captured, they will return to the app.

The Camera App

Step 5: Retrieve the Captured Image

We launched the camera app using "startActivityForResult" so we now need to handle the result. Add the "onActivityResult" method after the "onClick" method as follows:

Inside the "if" statement, add another to check that we are returning from the camera app, using the variable we passed:

We will also return to the "onActivityResult" method after the user crops their image, so we will add an "else if" later. Inside this "if" statement, add the following code to retrieve the URI of the captured photo:

Now we need to pass this URI to an app that can crop it. We will use a helper method to achieve this, so add the following method call:


Step 6: Crop the Captured Image

Add the helper method we called after the "onActivityResult" method:

Inside this method we are going to call an Intent to perform the crop, so let's add "try" and "catch" blocks in case the user device does not support the crop operation:

We use the same technique we used when launching the camera Intent. If the user device does not support the cropping Intent, they will see an error message. Inside the "try" block, launch the Intent as follows:

Here we set various properties for the cropped image, instructing the app to retrieve the resulting image data when the crop is complete. If you want the cropped image dimensions to differ from this, alter the "outputX" and "outputY" lines accordingly. We call the Intent using "startActivityForResult", so will retrieve the result inside "onActivityResult" again. As with the camera Intent, we pass a variable to keep track of which Intent we are returning from, so add a variable declaration at the top of the class, next to the other instance variables:

Image Cropping

As well as cropping, the user can select an area of the image.

Crop Detail

Step 7: Display the Cropped Image

Finally we can retrieve the cropped image and display it within the app UI. Inside your "onActivityResult" method, after the "if" statement in which you check for the "CAMERA_CAPTURE" request code, add an "if else" statement checking for the "PIC_CROP" code, in which case we are returning from the crop operation:

Inside this statement, we can retrieve the returned cropped image as follows:

We now have the user's cropped image as a Bitmap. Let's display it in the Image View as follows:

Now the cropped image will appear inside the app UI as soon as the user returns from cropping. Save and run your app on an actual device to test it.

Displaying the Image in the App

Conclusion

In this tutorial we have explored the basic capture and crop process within the Android SDK. However, the crop action in particular can be a little unpredictable on the various user devices in operation. Lots of different apps can handle the crop operation, so some developers adopt a more complex algorithm to resolve the user choices, presenting these apps to the user as a list of options to choose from. Whatever apps the user environment provides, the basic process of capture and crop remains the same.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.