ImageView dan ImageButton | Bagaimana menambahkan icon dan Gambar di Android Studio?

Pendahuluan

    Gambar mengandung informasi dan memiliki sejuta makna  dan  sejuta cerita. Satu gambar bisa ditafsirkan dengan berbagai makna oleh orang lain. Seseorang dapat menyampaikan pesan hanya melewati gambar. Namun disini kita tidak akan membahas filosofi gambar akan tetapi kita bahas adalah teknik menampilkan gambar pada UI sebuah Android.

    Tidak dapat dipungkiri gambar merupakan daya tarik bagi user saat berinteraksi dengan sistem. Tampilan sebuah UI yang memiliki gambar memudahkan user menangkap informasi yang diberikan oleh seseorang. Gambar di sini bisa berupa gambar yang kita upload dari dari luar, atau kita bisa memanfaatkan gambar yang di sediakan oleh android studion. Gambar yang di sediakan oleh android studio disebut sebagai vector. Oleh sebab itu gambar menjadi hal terpenting untuk dibahas di sini. 

    Pada materi ini kita akan mencoba mengupload gambar ke dalam sistem dan menampilkannya di halaman desain kita. Komponen yang digunakan untuk menampilkan gambar di desain kita disebut sebagai ImageView. Lalu dari mana kita memperoleh gambar atau icon? Ada 2 jenis pembahasan kita disini. Gambar dalam bentuk vector dan gambar dalam bentuk format lain seperti jpg, png dan lain sebagainya.

Persiapan   

    Oke mari kita praktekkan cara upload gambar tersebut. Terlebih dahulu anda sudah menyiapkan gambar di komputer anda. Gambar yang anda siapkan memiliki kiteria seperti berikut:

• Maksimal Ukuran gambar 1024 kb
• Format gambar yang baik adalah PNG, JPG dan WebP
• Penamaan gambar tidak boleh menggunakan space atau huruf kapital.

    Nah setelah gambar anda siapkan, selanjutnya mari kita buat projek baru di android studio kesayangan kita. Perhatikan settingan projek baru tersebut:

Template Activy: Empty Activity

Projek Name      : gambar_App

language            : Java/Kotlin

Upload Vector

    

    Vector adalah gambar yang terbuat dari beberapa titik dan garis (poligon), kombinasi gambar jenis ini melalui proses rumus matematika khusus dalam pembuatan gambar.  Gambar vector dapat ditambahkan serta dapat menghilangkan atribut seperti ketebalan garis, warna, warna isi, nodes dan lain sebagainya.

    Android studio telah menyediakan gambar vector berupa icon-icon yang bisa di upload langsung ke folder mipmap atau drawable. Penambahan gambar vector di android studio dapat dilakukan dengan beberapa langkah:

     Klik kanan pada folder mipmap atau drawable (disini saya akan menggunakan mipmap) kemudian pilih New =>Vector Asset 

  Atau dengan cara lain, anda bisa melakukan hal tersebut di komponen ImageView sendiri. Berikut langkahnya:

   Pertama-tama kita buat dulu komponen ImageView. Buka halaman activity_main.xml dan tambahkan komponen ImageView seperti berikut:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"/>

    Terdapat attribut "android:src="@mipmap/ic_laucher" di komponen ImageView. Attribut tersebut merukan elemen yang digunakan untuk memanggil gambar. @mipmap adalah folder mipmap tempat penyimpanan gambar, sedangkan ic_laucher adalaha nama dari gambar vector yang sudah di sediakan oleh android di dalam folder mipmap.

   Perhatikan pada sisi kiri area kerja kita tepatnya pada bagian penomoran. Terdapat sebuah icon bukan, silahkan klilk icon tersebut untuk mengganti gambar vector kita. Kemudian pada sisi bawah klik tombol browse yang ada di bagian bawah kotak dialog sehingga tampil kotak dialog "pic a resource".

• Klik tanda + hingga muncul menu dropdown
• pilih Vector Asset
• Pastikan celist asset type clipt Art. Clik Clipt Art
• Tampil jende gambar vector. Ketikkan nama vector di mesin pencarian.
• Pilih salah satu gambar vector
• klik OK
• Beri nama gambar vertor. Jika perlu anda dapat mengganti size gambar dan warna gambar.
• klik next

    Selanjutnya muncul jendela Asset Studio. Pastikan tidak muncul tanda peringatan di bagian bawah. Jika muncul klik Previous dan ganti name dari vector. Jika tidak muncul silahkan klik Finish.

    Di halaman pick a resource muncul gambar vector yang kita buat tadi. Pilih gambar tersebut klik  kemudian klik OK.  Nah sekarang pada UI sudah muncul gambar vector yang kita buat. Disini kami membuat gambar vector dengan gambar Mobil.

Upload Image 

    Nah, Selain gambar vector yang sudah disediakan oleh android studio, kita juga bisa menentukan gambar kita sendiri. Jadi sebelum mulai bekerja di android studio silahkan siapkan terlebih dahulu gambar yang ingin ditampilkan pada UI android.

     Format gambar yang dapat dipilih seperti PNg, JPG dan webP. Pastikan ukuran gambar tidak terlalu besar agar tidak memberatkan memori nantinya. Contoh disini disiapkan sebuah gambar berukuran 100px x100 px. Nama gambar adalah nasi_goreng.jpg.

    Copy gambar yang telah anda siapkan tadi, pasetkan gambar tersebut di folder drawable.

    Lalu cara pemanggilannya dengan komponen ImageView dapat dilihat pada code di bawah ini

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="center"
    android:src="@drawable/nasi_goreng"/>

    Perhatikan, Terdapat satu atrbut scaleType. Apasih fungsinya, silahkan lihat tabel berikut

NO	SCALE	KET
1	center	Menampilkan gambar ditengah view tanpa merubah skalanya.
2	centerCrop	Merubah skala gambar sehingga dimensi x dan y lebih besar atau sama dengan view dengan menjaga aspek rasionya, lalu menampilkan gambar ditengah view.
3	centerInside	Meruabh skala gambar agar pas di dalam view dengan menjaga aspek rasionya. Jika ukuran gambar lebih kecil dari view, maka hasil yang didapatkan sama seperti center.
4	fitCenter	Menampilkan gambar agar pas berada didalam view dengan menjaga aspek rasionya. Setidaknya akan ada satu sisi yang pas dengan view, lalu hasilnya ditampilkan di tengah.
5	fitStart	Sama seperti fitCenter tapi sejajar dengan posisi kiri atas dari view.
6	fitEnd	Sama seperti fitCenter tapi sejajar dengan posisi kanan bawah view
7	fitXY	Merubah dimensi x dan y agar pas dengan ukuran view; aspek rasio gambar tidak dijaga.
8	matrix	Merubah skala gambar melalui kelas Matrix. Matrix ini dapat diberikan lewat method setImageMatrix. Kelas Matrix dapat melakukan transformasi misalnya memutar gambar.

    Komponen TextView merupakan sebuah komponen yang di sediakan oleh android studio dengan fungsi menampilkan gambar pada halaman desain kita. Gambar yang dapat di tampilkan berupa vector atau images. Gambar tersebut akan disimpan di dalam folder bernama mitmap atau drawable. Kedua folder ini dapat anda lihat pada root app. 

• 📂App
•     .....................
•     📂res
•         📂drawable 
•                 📄 nasi_goreng.png
•         📂mipmap
•                 📄 ic_car

    Nah itulah sekilas tentang ImageView.

   

ImageButton

    Contoh di atas menampilkan gambar di komponen imageView. Tidak ada action pada gambar tersebut. Oleh sebab itu android studio menyediakan komponen lain untuk menampilkan gambar sekaligus menjadi tombol. Penulisannya dapat dilihat seperti berikut:

<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:backgroundTint="@color/material_dynamic_primary80"
android:src="@drawable/home"/>

    Disini saya menyisipkan sebuah vector bernama home ke dalam folder drawable dengan ukuran 75dp x 75dp. Sedangkan warna dari vector tersebut adalah putih. Anda dapat melihat attributnya di "android:src="..." pada code diatas. Nah ada satu attribut lagi yang di tambah yaiut "android:backgroundTint="..." yang merupakan attribut untuk merubah warna latarbelakang komponen ImageView.

 

Merubah Nilai Vector

    Bagaimana caranya merubah nilai dari vector yang telah kita buat tadi? Contoh, tadi kita membuat vector dengan ukuran 75dp x 75dp dan warna putih (#ffffff). Sedangkan nilai akan kita rubah ke ukuran 100dp x 100 dp dengan warna kuning (#E9D008).

    Anda perhatikan bahwa vector kita simpan di dalam folder drawable. Silakkan buka folder tersebut dan cari file home.xml (nama file vector yang kita buat tadi). Buka file tersebut. Perhatikan baris code berikut ini:

<vector android:height="75dp" android:tint="#ffffff"
android:viewportHeight="24" android:viewportWidth="24"
android:width="75dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M18,11c0.7,0 1.37,0.1 2,0.29V9l-8,-6L4,9v12h7.68C11.25,20.09 11,19.08 11,18C11,14.13 14.13,11 18,11z"/>
<path android:fillColor="@android:color/white" android:pathData="M18,13c-2.76,0 -5,2.24 -5,5s2.24,5 5,5s5,-2.24 5,-5S20.76,13 18,13zM21,18.5h-2.5V21h-1v-2.5H15v-1h2.5V15h1v2.5H21V18.5z"/>
</vector>

    Rubahlah nilai code di atas menjadi code berikut ini:

<vector android:height="100dp" android:tint="#E9D008"
android:viewportHeight="24" android:viewportWidth="24"
android:width="100dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M18,11c0.7,0 1.37,0.1 2,0.29V9l-8,-6L4,9v12h7.68C11.25,20.09 11,19.08 11,18C11,14.13 14.13,11 18,11z"/>
<path android:fillColor="@android:color/white" android:pathData="M18,13c-2.76,0 -5,2.24 -5,5s2.24,5 5,5s5,-2.24 5,-5S20.76,13 18,13zM21,18.5h-2.5V21h-1v-2.5H15v-1h2.5V15h1v2.5H21V18.5z"/>
</vector>

    NB: Perubahan nilai pada code yang bergaris bawah

    Sekarang perhatikan desain anda, apakah ukuran dan warna icon telah berubah?

Memberikan Event Klik Pada ImageButton

    Tentu tidak lengkap rasanya memiliki button tapi tidak memiliki action. Action yang di maksud disini adalah memberikan efek klik pada gambar button kita. Metode Event Clik ini dapat anda pelajari di materi. Perhatikan code main_activity.xml berikut:

<?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"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">

<ImageButton
android:id="@+id/ib_Home"
android:layout_width="150dp"
android:layout_height="150dp"
android:backgroundTint="@color/design_default_color_error"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:onClick="ibKlik"
android:src="@drawable/home"/>

<ImageButton
android:id="@+id/ib_Profil"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:layout_below="@+id/ib_Home"
android:backgroundTint="@color/design_default_color_secondary_variant"
android:onClick="ibKlik"
android:src="@drawable/user_circle_24" />

</RelativeLayout>

    Sebagai latihan disini kita membuat 2 buah ImageButton agar mudah memahami event klik nantinya. Layout yang kita gunakan di sini adalah RelativeLayout sehingga kita perlu menambahkan attribut ke dalam komponen ImageButton berikut ini:

• android:layout_centerHorizontal="true"    => Posisi komponen terletak di tengah-tengah desain
• android:layout_alignParentTop="true"      => posisi komponen di atur pada bagian atas.

    Selain ke dua attribut di atas kita juga menambahkan id pada komponen dengan nama "ib_home" dan attribut onClik dengan nama"ibKlik". Kedua attribut ini akan di kenali oleh code kotlin nantinya. Jadi selanjutnya kita akan bermain-main di Activity_Main.kt. 

    Sedangkan pada ImageButton yang ke dua kita tambah satu attribut "android:layout_below=" " yang berguna agar posisi komponen ImageButton yang ke dua berada di bawah komponen ImageButton yang pertama.

    Oke, Masuk ke file MainActivity.kt dan disini kita akan membuat sebuah funticon.   Buatlah function di dalam class MainActivity dengan nama yang sama dengan attribut onClik yang ada di komponen ImageView. Perhatikan script berikut:

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

fun ibKlik(view: View) {

}
}

    

Kita tambahkan logika percabangan when ke dalam function yang baru kita buat. Perhatikan script berikut:

fun ibKlik(view: View) {
when(view.id) {
}
}

    Selanjutnya kenali id dari komponen ImageButton. Nama id yang kita buat di ImageButton tadi adalah ib_home. jadi lengkapi code seperti berikut:

fun ibKlik(view: View) {
when(view.id) {
R.id.ib_Home-> showTosh("Anda Memilih Home")
R.id.ib_Profil-> showTosh("Anda Memilih Profil")
}
}

    

    Sentuhan terakhir kita berikan buatlah function  untuk showToash agar toast tampil. Toast berguna untuk menampilkan informasi :

fun showTosh(msg: String){

Toast.makeText(this, msg, Toast.LENGTH_SHORT).show()
}

    Berikut code lengkapnya:

package com.example.latihanapp

import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

}
fun ibKlik(view: View) {
when(view.id) {
R.id.ib_Home-> showTosh("Anda Memilih Home")
R.id.ib_Profil-> showTosh("Anda Memilih Profil")
}
}
fun showTosh(msg: String){

Toast.makeText(this, msg, Toast.LENGTH_SHORT).show()
}
}

    

    Sekarang jalankan projek anda dan coba klik icon home. Perhatikan pada bagian bawah desain anda. Apa ada informasi yang keluar?

Latihan:

    Agar anda dapat memahami materi lebih dalam dan jelas silahkan kerjakan latihan. Buatlah projek baru dengan desain seperti gambar berikut:

NB : Untuk memahami materi tugas silahkan pelajari kembali tentang:
1. TextView
2. Layout atau Tataletak

    Gunakan imajinasi tertinggi anda.💪💪💪

Nah itulah sedikit tentang gambar di android studio. Semoga bermanfaat bagi pembaca. 

Tonton Kami Di youtube: