Membuat Aplikasi Menampilkan Gambar pada ImageView dari Galeri atau Kamera


Assalamualaikum Warahmatullahi Wabarakatuh.

Saat kita menggunakan sebuah aplikasi, pastinya kalian sudah tidak asing lagi dengan aplikasi yang mempunyai fitur untuk menampilkan gambar/image dengan mengakses galeri atau camera untuk mendapatkan gambar tersebut, biasanya digunakan untuk mengubah foto profil.


Agar user dapat mengakses galeri atau kamera ponsel, dan menampilkannya pada ImageView, kita akan belajar menggunakan Library bernama EasyImage, library tersebut dapat kita gunakan untuk membuka Image/Gambar Dari Kamera atau Gallery.

Sebenarnya kita bisa menggunakan cara manual untuk membuat program seperti ini, tetapi dengan menggunakan Library, kita dapat membuatnya dengan mudah, dibandingkan dengan menggunakan cara manual.

Materi lainnya yang direkomendasikan:

Membuat Aplikasi Menampilkan Gambar pada ImageView dari Galeri atau Kamera

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama kita tambahkan kedua libaray berikut ini, pada build.gradle (direktori app).
compile 'com.github.jkwiecien:EasyImage:1.3.1'
compile 'com.github.bumptech.glide:glide:3.7.0'
EasyImage digunakan untuk mengambil gambar dari kamera atau galeri, dan glide unutk meload/memuat gambar/image agar tidak berat.

3) Selanjutya buka file build.gradle (direktori (nama project)), masukan baris kode berikut ini.
allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' } //Baris kode yang harus ditambahkan
    }
}
Jika sudah, lalu klik Sync Now.

4) Agar aplikasi dapat mengakses file gambar/image dari memori external kalian, disini kita perlu manambahkan permission berikut ini didalam file AndroidManifest.xml.
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
5) Selanjutnya kita akan mengedit layout pada activity_main.xml, disini kita menggunakan LinearLayout (Vartical) sebagai containernya, seta Button dan ImageView sebagai komponennya.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="8dp"
    android:background="#FFF5F5F5"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <Button
        android:id="@+id/open_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Open Image" />

    <ImageView
        android:id="@+id/showImg"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
</LinearLayout>
6) Selanjutnya buka file MainActivity.java, masukan source code barikut ini:
package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.content.DialogInterface;
import android.content.Intent;
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 com.bumptech.glide.Glide;
import com.bumptech.glide.load.engine.DiskCacheStrategy;

import java.io.File;

import pl.aprilapps.easyphotopicker.EasyImage;

public class MainActivity extends AppCompatActivity{

    private ImageView setImage;
    private Button OpenImage;

    //Request Code Digunakan Untuk Menentukan Permintaan dari User
    public static final int REQUEST_CODE_CAMERA = 001;
    public static final int REQUEST_CODE_GALLERY = 002;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setImage = findViewById(R.id.showImg);
        OpenImage = findViewById(R.id.open_image);
        OpenImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setRequestImage();
            }
        });
    }

    //Method Ini Digunakan Untuk Membuka Image dari Galeri atau Kamera
    private void setRequestImage(){
        CharSequence[] item = {"Kamera", "Galeri"};
        AlertDialog.Builder request = new AlertDialog.Builder(this)
                .setTitle("Add Image")
                .setItems(item, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                       switch (i){
                           case 0:
                               //Membuka Kamera Untuk Mengambil Gambar
                               EasyImage.openCamera(MainActivity.this, REQUEST_CODE_CAMERA);
                               break;
                           case 1:
                               //Membuaka Galeri Untuk Mengambil Gambar
                               EasyImage.openGallery(MainActivity.this, REQUEST_CODE_GALLERY);
                               break;
                       }
                    }
                });
        request.create();
        request.show();
    }

    //Method Ini Digunakan Untuk Menapatkan Hasil pada Activity, dari Proses Yang kita buat sebelumnya
    //Dan Mendapatkan Hasil File Photo dari Galeri atau Kamera
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        EasyImage.handleActivityResult(requestCode, resultCode, data, this, new EasyImage.Callbacks() {

            @Override
            public void onImagePickerError(Exception e, EasyImage.ImageSource source, int type) {
                //Method Ini Digunakan Untuk Menghandle Error pada Image
            }

            @Override
            public void onImagePicked(File imageFile, EasyImage.ImageSource source, int type) {
                //Method Ini Digunakan Untuk Menghandle Image
                switch (type){
                    case REQUEST_CODE_CAMERA:
                        Glide.with(MainActivity.this)
                                .load(imageFile)
                                .centerCrop()
                                .diskCacheStrategy(DiskCacheStrategy.ALL)
                                .into(setImage);
                        break;

                    case REQUEST_CODE_GALLERY:
                        Glide.with(MainActivity.this)
                                .load(imageFile)
                                .centerCrop()
                                .diskCacheStrategy(DiskCacheStrategy.ALL)
                                .into(setImage);
                        break;
                }
            }

            @Override
            public void onCanceled(EasyImage.ImageSource source, int type) {
                //Batalkan penanganan, Anda mungkin ingin menghapus foto yang diambil jika dibatalkan
            }
        });
    }
}
Penjelasan:

Pada source code tersebut, kita membuat REQUEST_CODE, yang diguakan untuk menentukan pilian dari user, apakah galeri atau kamera.

Didalam method setRequestImage(), kita menggunakan AlertDialog, untuk menampilkan notifikasi pada user, berupa pilihan untuk mengambil gambar.

Dengan menggunakan fungsi EasyImage.openCamera () dan EasyImage.openGallery () digunakan untuk memilih metode Mengambil gambar dari kamera dan Galeri. Kedua fungsi tersebut membutuhkan 2 parameter, yaitu Konteks Activity dan RequestCode.

Lalu pada method onActivityResult(), method ini Digunakan untuk mendapakan hasil berupa file Photo yang didapatkan dari Galeri atau Kamera, pada method onImagePicked() digunakan untuk menghandle atau mengangani permintaan dari user, mengenai pemuatan gambar, yang ingin ditampilkan pada ImageView.

Demo:



Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Disqus Comments