Display Captured Photo on ImageView using Android Camera Application

Display Captured Photo on ImageView using Android Camera Application

In this android tutorial we are going to learn how to display captured photo in ImageView using android camera application.

There are two way by which you can make use of the camera in you android application

1. Using existing android camera application in our application

2. Directly using Camera API provided by android in our application

If you are interested in working with android camera API, I will suggest you read my tutorial on Android Camera API

Although what we will basically do is to use Intent action MediaStore.ACTION_IMAGE_CAPTURE   to open up the inbuilt camera application in our device. When the picture is taken, we will just display the captured image on an ImageView control.

If you want to store your captured image in your device SD card, you can learn how to achieve that on my subsequent tutorial on Store Captured Image in SD card using Android Camera Application.

The project user interface will consists of one ImageView and Button View controls. The button view will be used to launch the camera preview and the ImageView control will hold any captured image from the camera.

Before we start, the first thing I will do is to list the environment and tools I used in this android tutorial but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidCameraApplication

Package: com.inducesmile.androidcameraapplication

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, make sure you change the package name if you did not use the same package.

Activity_main.xml Layout File

Open the activity_main.xml in your project or the layout name you want to use. We are going to add two different View controls in our layout file as shown below.

<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"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/captured_photo"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:contentDescription="@string/desc"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/capture_button"
        android:id="@+id/photo_button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

 String.xml File

We have add some string resource in our project string.xml file. The updated version of the file looks as shown below. The added resources are used for the button name and the image description.

<resources>
    <string name="app_name">Android Camera App</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="capture_button">Click to capture photo</string>
    <string name="desc">Capture image holder</string>
</resources>

MainActivity.java File

Open the MainActivty.java file in your project. We are going to create an instance of each of our View Controls

We have initialized a class attribute which will use to result if the resulted result is the result we are expecting.

Furthermore, an event listener is attached on the button view. When it is click, it will execute the code below. It is use to launch the camera image capture.

Intent photoCaptureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(photoCaptureIntent, requestCode);

The result returned from this method will be access in the override method of the Activity class called onActivityResult(int requestCode, int resultCode, Intent data)

A bitmap image is obtained from the Intent data and it is set to the ImageView. The complete code for the class is shown below.

package inducesmile.com.androidcameraapplication;

import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.provider.MediaStore;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends ActionBarActivity {

    private ImageView imageHolder;
    private final int requestCode = 20;

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

        imageHolder = (ImageView)findViewById(R.id.captured_photo);
        Button capturedImageButton = (Button)findViewById(R.id.photo_button);
        capturedImageButton.setOnClickListener( new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent photoCaptureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                startActivityForResult(photoCaptureIntent, requestCode);
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(this.requestCode == requestCode && resultCode == RESULT_OK){
            Bitmap bitmap = (Bitmap)data.getExtras().get("data");
            imageHolder.setImageBitmap(bitmap);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Save the file and run your project. If everything works for you, the project will appear like this in your device.

Display Captured Photo in ImageView using Android Camera Application

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

OTHER INTERESTING POSTS:

One Response

Add a Comment