Android choosing Image from Camera / Gallery with Crop Functionality

0
69

Taking pictures from camera or gallery is an essential feature for many applications those includes media in their apps. A simple notes app may need a profile picture to make the notes more personal. Getting a thumbnail image from camera is easy, but sometimes you want the full resolution image without storing it in gallery, crop it and avoid the possible memory exceptions.

In this tutorial we are going to learn building a simple social profile UI, choose the profile picture from camera or gallery with crop and image transformation features.

 

1. uCrop – cropping library

For cropping functionality, we are going to use uCrop library. This library is used many popular apps and tested on various devices / OS versions. Even though the library provides best cropping experience, it won’t provide an option to choose the input image from camera or gallery. All it takes is a bitmap and gives back the cropped bitmap.

In this article we use the same cropping library but on top of it, we’ll build a feature to pick the image from camera or gallery.

For information about uCrop, visit the official documentation.

2. Starting New Project / Profile Screen

Our goal is to build a simple social profile UI (like Instagram) and use the image cropping functionality to apply the profile image. You can take picture using camera or choose from gallery, crop and set it as profile image. So let’s start by creating a new project in Android Studio.

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from templates. I have given my package name as info.androidhive.imagepicker

2. Open app/build.gradle and add DexterButterKnifeGlideCircularImageView and uCrop dependencies.

3. Add the below resources to respective strings.xmldimen.xml and colors.xml files.

4. Download this res folder and add the contents to your project’s res folder. This folder contains necessary icons needed to build the profile screen.

5. Open the layout file your main activity (activity_main.xml) and add the below code to achieve the profile layout.

Create a new xml layout layout_toolbar_profile.xml and add the below code.

Now if you run your project, you should able to see the screen as below.

3. Adding Image Pick and Crop functionality

Now as the UI part is done, let’s see how to add the image picking functionality on tapping the profile image or plus icon.

6. Create an xml file named file_paths.xml under res ⇒ xml folder. If you don’t see xml folder under res, create a new folder with the same name. Here we are defining a FileProvider path to store the camera images in a cached location instead of storing them in gallery.

7. Open AndroidManifest.xml and do the below changes.

> Add INTERNETCAMERA and STORAGE permissions.

> Add UCropActivity intent to launch the crop activity.

> Add FileProvider information using the xml we have defined in the above step.

8. As we are using Glide to display the image, create a class named MyGlideModule and annotate the class with @GlideModule.

9. To reduce the complexity, I have written an activity that takes care of choosing the image and cropping. All you have to do is, add this activity to your project and call couple of lines to launch the activity. That’s all.

Create a blank activity ImagePickerActivity.java and add the below code.

3.1 Launching copping activity

To show the image picking choices, call ImagePickerActivity.showImagePickerOptions() method.

Once, an option is selected, you can pass Intent data depending on the choice. For example, to pick the image from gallery with 1×1 aspect ratio, the below intent can be used.

10. Now we’ll see how this can be applied to our profile activity. Open MainActivity.java and call image picker activity on tapping the profile image or plus icon.

Now run and test the app. You should be able to set the profile image from camera or gallery.

LEAVE A REPLY