How to Open Camera Through Intent and Display Captured Image in Android?

Pre-requisites: 

• Android App Development Fundamentals for Beginners 
• Guide to Install and Set up Android Studio 
• Android | Starting with first app/android project 
• Android | Running your first Android app 

The purpose of this article is to show how to open a Camera from inside an App and click the image and then display this image inside the same app. An android application has been developed in this article to achieve this. The opening of the Camera from inside our app is achieved with the help of the ACTION_IMAGE_CAPTURE Intent of MediaStore class.

This image shows the Image clicked by the camera and set in Imageview. When the app is opened, it displays the “Camera” Button to open the camera. When pressed, ACTION_IMAGE_CAPTURE Intent gets started by the MediaStore class. When the image is captured, it is displayed in the image view.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android. This will create an XML file “activity_main.xml” and a Java/Kotlin File “MainActivity”.

Step 2: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

• A Button to open the Camera
• An ImageView to display the captured image

Also, Assign the ID to each component along with other attributes as shown in the image and the code below.

Syntax:

android:id="@+id/id_name"

Here the given IDs are as follows:

• Camera Button: camera_button
• ImageView: click_image

This step will make the UI of the Application.

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

    <!-- add Camera Button to open the Camera -->
    <Button
        android:id="@+id/camera_button"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginStart="150dp"
        android:text="Camera" />

    <!-- add ImageView to display the captured image -->
    <ImageView
        android:id="@+id/click_image"
        android:layout_width="350dp"
        android:layout_height="450dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="70dp"
        android:layout_marginBottom="10dp" />
</RelativeLayout>

Step 3: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail. We will instantiate the components made in the XML file (Camera Button, ImageView) using the findViewById() method. This method binds the created object to the UI Components with the help of the assigned ID.

General Syntax:

ComponentType object = (ComponentType)findViewById(R.id.IdOfTheComponent);

The Syntax for Components Used:

Button camera_open_id= findViewById(R.id.camera_button); 
ImageView click_image_id = findViewById(R.id.click_image); 

Setting up Operations on the Camera Button and ImageView.

First, define the variable pic_id which is the request-id of the clicked image.

This is done as follows: 

private static final int pic_id = 123

Add the listener to the Camera button. This will be used to open the camera when the user clicks on the button.

This is done as follows: 

camera_open_id.setOnClickListener(new View.OnClickListener() {}

Now create the ACTION_IMAGE_CAPTURE Intent provided by MediaStore. This Intent will help to open the camera for capturing the image. Start the intent with the requested pic_id.

This is done as follows: 

Intent camera_intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); 
startActivityForResult(camera_intent, pic_id); 

Now use the onActivityResult() method to get the result, here is the captured image.

This is done as follows: 

protected void onActivityResult(int requestCode, int resultCode, Intent data) { } 
 

Then set the image received as a result of Camera intent in the ImageView for display. 

Bitmap photo = (Bitmap) data.getExtras().get("data");
clicked_image_id.setImageBitmap(photo);

import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.provider.MediaStore;
import android.widget.Button;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    // Define the pic id
    private static final int pic_id = 123;
    // Define the button and imageview type variable
    Button camera_open_id;
    ImageView click_image_id;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // By ID we can get each component which id is assigned in XML file get Buttons and imageview.
        camera_open_id = findViewById(R.id.camera_button);
        click_image_id = findViewById(R.id.click_image);

        // Camera_open button is for open the camera and add the setOnClickListener in this button
        camera_open_id.setOnClickListener(v -> {
            // Create the camera_intent ACTION_IMAGE_CAPTURE it will open the camera for capture the image
            Intent camera_intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
            // Start the activity with camera_intent, and request pic id
            startActivityForResult(camera_intent, pic_id);
        });
    }

    // This method will help to retrieve the image
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // Match the request 'pic id with requestCode
        if (requestCode == pic_id) {
            // BitMap is data structure of image file which store the image in memory
            Bitmap photo = (Bitmap) data.getExtras().get("data");
            // Set the image in imageview for display
            click_image_id.setImageBitmap(photo);
        }
    }
}

import android.content.Intent
import android.graphics.Bitmap
import android.os.Bundle
import android.provider.MediaStore
import android.view.View
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    // Define the button and imageview type variable
    private lateinit var cameraOpenId: Button
    lateinit var clickImageId: ImageView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // By ID we can get each component which id is assigned in XML file get Buttons and imageview.
        cameraOpenId = findViewById(R.id.camera_button)
        clickImageId = findViewById(R.id.click_image)

        // Camera_open button is for open the camera and add the setOnClickListener in this button
        cameraOpenId.setOnClickListener(View.OnClickListener { v: View? ->
            // Create the camera_intent ACTION_IMAGE_CAPTURE it will open the camera for capture the image
            val cameraIntent = Intent(MediaStore.ACTION_IMAGE_CAPTURE)
            // Start the activity with camera_intent, and request pic id
            startActivityForResult(cameraIntent, pic_id)
        })
    }

    // This method will help to retrieve the image
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        // Match the request 'pic id with requestCode
        if (requestCode == pic_id) {
            // BitMap is data structure of image file which store the image in memory
            val photo = data!!.extras!!["data"] as Bitmap?
            // Set the image in imageview for display
            clickImageId.setImageBitmap(photo)
        }
    }

    companion object {
        // Define the pic id
        private const val pic_id = 123
    }
}

Output:

N

Naved_Alam

Follow

Improve

Article Tags :

• Android
• DSA
• Java
• Kotlin

Practice Tags :

• Java