Tutorial Cara Membuat Image View di Android Studio

Android Najwa - Lanjutan dari materi sebelumnya tentang Image Button, pada kesempatan kali ini saya akan memberikan sebuah materi dimana materi kali ini kita masih membahas display pada android. tutorial kali ialah mengenai Cara Membuat Image View di Aplikasi Android menggunakan Android Studio. Prinsipnya sama dengan Image Button, tapi Image View bisa tampil dengan gambar yang berbeda. Sebelum membuat Image View, mari kita simak penjelasan dari Image View itu.

Image View pada Android

Apa itu Image View?

Pengertian Image View

Image View merupakan bagian dari pengelolaan gambar pada suatu aplikasi. Image View biasanya digunakan untuk mempermudah kita mencari gambar dengan cara meng-klik tombol yang nantinya kita akan melihat gambar yang ditampilkan. Hal ini bisa kita buat dengan menggunakan beberapa gambar dalam satu main activity.

Bagaimana cara membuat Image View ?

Tutorial Cara Membuat Image View di Android

Langkah 1 : Jalankan Android Studio.exe anda seperti biasa, lalu buatlah project baru seperti berikut.

• Application Name : Image View
• Package Name : androidnajwa.com
• Minimum Required SDK : API 15 Andorid 4.0.3 (IceCreamSandwich)

Buat Project Baru

Langkah 2 :  Pilih saja Blank Activity lalu klik Next dan Finish

Add Activity

Langkah 3 : Buatlah komponen ImageView. ImageView terdapat dalam Image & Media Android Studio. Untuk membuatnya dapat dilakukan dengan “Drag and Drop” dari komponen yang tersedia atau langsung menuliskan script XML. Untuk script XML dapat dituliskan seperti berikut.

<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">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/wg"
        android:layout_below="@+id/textView1"
        android:layout_alignRight="@+id/textView1"
        android:layout_alignEnd="@+id/textView1" />
    <Button
        android:id="@+id/btnGambar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="klikGambar1"
        android:text="Gambar 1"
        android:layout_below="@+id/imageView1"
        android:layout_alignLeft="@+id/imageView1"
        android:layout_alignStart="@+id/imageView1" />

    <Button
        android:id="@+id/btnGambar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gambar 2"
        android:layout_below="@+id/btnGambar1"
        android:layout_alignLeft="@+id/btnGambar1"
        android:layout_alignStart="@+id/btnGambar1" />

</RelativeLayout>

Pada contoh ini saya menggunakan 2 gambar, nama gambarnya “wg.png” dan “wg2.png”, kemudian letakkan pada drawble di android studio.

Perintah android:src="@drawable/wg" pada tag ImageView merupakan inisialisasi gambar pertama yang muncul.

Langkah 4 : Bukalah MainActivity.java lalu edit seperti berikut ini

 package com.androidnajwa.imageview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
    ImageView gambar;
    Button btnGbr1, btnGbr2;
    OnClickListener listener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gambar = (ImageView) findViewById(R.id.imageView1);
        btnGbr1 = (Button) findViewById(R.id.btnGambar1);
        btnGbr2 = (Button) findViewById(R.id.btnGambar2);
        //membuat listener jika objek di-klik
        listener = new OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(v.getId() == R.id.btnGambar1){ //jika objeknya btnGambar1
                    //set objek gambar menjadi gambar wg
                    gambar.setImageResource(R.drawable.wg);
                }else{ //jika objeknya selain btnGambar1
                    //set objek gambar menjadi gambar wg2
                    gambar.setImageResource(R.drawable.wg2);
                }
            }
        };

        //menerapkan listerner pada objek btnGbr1 dan btnGbr2
        btnGbr1.setOnClickListener(listener);
        btnGbr2.setOnClickListener(listener);
    }
}

Sampai tahap disini sudah selesai. Sekarang lakukan testing, dengan cara menekan Shift+F10.

(1) Hasil Image View

Saat saya coba menekan button Gambar 2 pada gambar diatas, maka hasil yang akan tampil seperti berikut

(2) Hasil Image View

Nah, itulah hasil dari penggunaan Image View yang nanti nya akan muncul Gambar sesuai aksi dari button masing-masing. Jika kita meng-klik Gambar 1 lagi maka akan muncul gambar yang awal tadi yaitu Bumi.

Gimana? Mudah Bukan? Untuk dikembangkan lagi juga bisa asal anda bisa memahaminya.

Demikian Tutorial Cara Membuat Image View di Android Studio. Bila Ada Pertanyaan silakan komentar dihalaman Komentar.Terima Kasih Atas Kunjungan di Android Najwa.

Source Code Click here

Tweet