Tutorials  /  JavaScript

Android Development: Making Image Capture Easy

Ccentron Redaktion · July 2024 ·4 min read ·JavaScript, Tutorial

Dive into the world of Android development with our latest blog post! Learn how to effortlessly integrate and display images from both the camera and gallery into your app. From permission management to displaying images in various views, our guide takes you through the process step by step. Dive in and explore the possibilities of image capture in Android!

Introduction

In today's tutorial, we'll develop an application that selects an image from either the camera or the gallery and displays it in an ImageView. Note: The code below works flawlessly for versions before Android Nougat.

VM

Matching infrastructure at centron

Node applications need somewhere to run: ccloud³ VMs with full root access from €3.12 per month – or as a managed server if you would rather not run it yourself. Rent a cloud server →

Permissions

With the advent of Android Marshmallow, permissions need to be implemented at runtime. Add the following permissions to the AndroidManifest.xml file above the application tag.

Code
<uses-feature
android:name="android.hardware.camera"
android:required="false" />
<uses-feature
android:name="android.hardware.camera.autofocus"
android:required="false" />
<uses-feature
android:name="android.hardware.camera.flash"
android:required="false" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="ANDROID.PERMISSION.READ_EXTERNAL_STORAGE" />

By adding android.hardware.camera, the Play Store recognizes and prevents the installation of the application on devices without a camera. Intent is the standard way to delegate actions to another application. To launch the native camera, the Intent requires android.provider.MediaStore.ACTION_IMAGE_CAPTURE. To select an image from the gallery, the Intent requires the following argument: Intent.ACTION_GET_CONTENT. In this tutorial, we invoke an image selector that allows us to choose an image from the camera or gallery and display it in a circular ImageView and a normal ImageView. Add the following dependency in the build.gradle file: 'compile 'de.hdodenhof:circleimageview:2.1.0'.

Project Structure for Android Image Capture

Android Image Capture Code

Layout

The layout for the activity_main.xml remains the same, except for the icon change for the FAB button to @android:drawable/ic_menu_camera. The content_main.xml content is as follows:

Code
<!-- Insert your XML code here -->

MainActivity.java

The code for MainActivity.java is as follows:

Code
// Insert your Java code here

Conclusions

Here are some conclusions that can be drawn from the above code:

  • We need to request camera permissions at runtime when the user starts the activity.
  • Since we're starting the Intent to get a result, we need to call startActivityForResult with the relevant arguments.
  • Instead of using a dialog to separately invoke the camera and gallery intents, we've used a method getPickImageChooserIntent()that creates a single selection intent for all camera and gallery intents (note the document intent). Intent.EXTRA_INITIAL_INTENTS is used to add the various application intents in one place.
  • For the camera intent, MediaStore.EXTRA_OUTPUT is passed as an extra to specify the image storage path. Without this, you'll only get a low-resolution image back.
  • The URI path for the image returned by the camera is obtained in the getCaptureImageOutputUri() method.
  • TheonActivityResult essentially returns a URI for the image. Some devices return the bitmap as data.getExtras().get("data").
  • When an image is captured, returning to the camera screen restarts the activity, nullifying the URI stored from the getCaptureImageOutputUri() method. Therefore, it's important that we save and restore this URI using onSaveInstanceState() and onRestoreInstanceState().
  • The bitmap is retrieved from the URI in the following code line: myBitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), picUri);
  • Devices like the Samsung Galaxy are known to capture the image in landscape mode. If the image is retrieved and displayed without modifications, it may appear in the wrong orientation. Hence, we've called the rotateImageIfRequired(myBitmap, picUri) method.
  • ExifInterface is a class for reading and writing Exif tags in a JPEG file or a RAW image file.
  • Finally, we call the getResizedBitmap() method to scale the bitmap according to width or height (whichever is larger) and set the image to the ImageView using setImageBitmap.
Jetzt 200 € Guthaben sichern

Testen Sie Ihr Setup auf ccloud³

Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.

centron Redaktion Technische Redaktion

Das Redaktionsteam von centron schreibt Anleitungen aus dem Betriebsalltag: getestet auf unserer eigenen Plattform, betrieben im Rechenzentrum in Hallstadt bei Bamberg.

Kategorie JavaScript
Teilen
Noch offene Fragen?

Our team will help you with your specific setup - in German or English, by people who run the platform themselves.

War dieses Tutorial hilfreich?

Your answer is stored anonymously and helps us improve our tutorials.

Kommentare

No comments yet - be the first to ask a question about this tutorial.

Sign in to comment

Comments are open to centron customers. Sign in to your account to ask a question about this tutorial.

Weiterlesen

Das könnte Sie auch interessieren

Jetzt kostenlos anfangen

Melden Sie sich an und erhalten Sie in den ersten 60 Tagen ein Guthaben von 200 € bei centron.

Dieses Werbeangebot gilt nur für neue Konten. Angebot ausschließlich für Gewerbetreibende.

Jetzt loslegen Sales kontaktieren