Wednesday, February 15, 2017

Android Take Image From Camera or Gallery Using EasyImage Library

In development process that I have done, there are one project that had features "open image" from camera or gallery for displayed on application. For example like change the profile picture, upload some image, etc.

Today I going to show you how to took image from camera or gallery using EasyImage Library. This library pretty easy to use. You don't need to write much code (like manual way), because this library has function that specific open image from camera and open from gallery.

Let's start the steps one by one ..

Library 


In this project, I used some libraries. Please compile the following libraries in build.gradle (Module : app) :

compile 'com.github.jkwiecien:EasyImage:1.3.1'
compile 'com.github.bumptech.glide:glide:3.7.0'

On your second gradle, put the following code in build.gradle(Project:ProjectName)
 
allprojects {
    repositories {
        jcenter()
        maven { url 'https://jitpack.io' } //add this line
    }
}
 
 EasyImage is the library for open image from camera or gallery, and Glide is a library that used to load image.

AndroidManifest


In order to able to access and take image/photo from Gallery, then you need a permission on your AndroidManifest.xml :

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Layout


The layout is not to complicated, I just uses one layout that contains button load image, imageview for display image and textview for display the path of the image. Give name as activity_main.xml and paste the following code :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.putuguna.openimagecameragallery.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:clickable="true"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_dark">
<Button
android:id="@+id/btn_take_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:textColor="@android:color/white"
android:text="Open Image" />
</FrameLayout>
<ImageView
android:layout_marginTop="10dp"
android:layout_weight="1"
android:id="@+id/image_view_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/placeholder"
android:scaleType="fitCenter"/>
<TextView
android:id="@+id/textview_image_path"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:text="The Image path"/>
</LinearLayout>
The result look like the following Figure 1 :

Gambar 1
For the placeholder (the grey image above), you can find here.

File Java


I have created the method for open Camera and Gallery when button Open Image has clicked, with hope you easy to understand the steps. This java file named as MainActivity.java, paste the following code :


package com.putuguna.openimagecameragallery;
import android.content.DialogInterface;
import android.content.Intent;
import android.media.Image;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;
import java.io.File;
import pl.aprilapps.easyphotopicker.DefaultCallback;
import pl.aprilapps.easyphotopicker.EasyImage;
public class MainActivity extends AppCompatActivity {
public static final int REQUEST_CODE_CAMERA = 0012;
public static final int REQUEST_CODE_GALLERY = 0013;
private Button btnLoadImage;
private ImageView ivImage;
private TextView tvPath;
private String [] items = {"Camera","Gallery"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnLoadImage = (Button) findViewById(R.id.btn_take_image);
ivImage = (ImageView) findViewById(R.id.image_view_image);
tvPath = (TextView) findViewById(R.id.textview_image_path);
btnLoadImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
openImage();
}
});
}
/**
* this method used to open image directory or open from camera
*/
private void openImage(){
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Options");
builder.setItems(items, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
if(items[i].equals("Camera")){
EasyImage.openCamera(MainActivity.this,REQUEST_CODE_CAMERA);
}else if(items[i].equals("Gallery")){
EasyImage.openGallery(MainActivity.this, REQUEST_CODE_GALLERY);
}
}
});
AlertDialog dialog = builder.create();
dialog.show();
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
EasyImage.handleActivityResult(requestCode, resultCode, data, this, new DefaultCallback() {
@Override
public void onImagePicked(File imageFile, EasyImage.ImageSource source, int type) {
switch (type){
case REQUEST_CODE_CAMERA:
Glide.with(MainActivity.this)
.load(imageFile)
.centerCrop()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(ivImage);
tvPath.setText(imageFile.getAbsolutePath());
break;
case REQUEST_CODE_GALLERY:
Glide.with(MainActivity.this)
.load(imageFile)
.centerCrop()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(ivImage);
tvPath.setText(imageFile.getAbsolutePath());
break;
}
}
});
}
}
The result will look like the following giff :


That's all the tutorial about how to take image from gallery and camera using library EasyImage. Hope it useful.

Related Posts


EmoticonEmoticon

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:o
:>)
(o)
:p
:-?
(p)
:-s
8-)
:-t
:-b
b-(
(y)
x-)
(h)