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. Tampilan sebuah UI yang memiliki gambar memudahkan user menangkap
informasi yang diberikan oleh seseorang. Oleh sebab itu gambar menjadi hal
terpenting untuk dibahas disini.
Ada 2 jenis pembahasan kita disini. Gambar dalam bentuk
vector dan gambar dalam bentuk format lain seperti jpg, png dan lain
sebagainya.
TextView
TextView merupakan sebuah komponen didalam android
studio yang dapat menampilkan gambar berupa vector atau image.
Gambar tersebut disimpan didalam library mitmap atau drawble.
Berikut penulisan TextView untuk mitmap:
1. Buatlah projek baru dengan:
activity : Empty Activity
- Projek Name : gambar_App
- language : Java
2. Buka halaman activity_main.xml dan tambahkan komponen berikut:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
atau
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_background"/>
ic_launcher merupakan nama gambar yang tersimpan dalam
library @mipmap Biasanya digunakan untuk menyimpan gambar vectgor. sedangkan
ic_laucher_background merupakan gambar yang tersimpan didalam library
@drawble.
Membuat Image 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. Penambahan gambar vector di android studio dapat dilakukan dengan
beberapa langkah:
1. Buat komponen textView seperti berikut:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
2. Di sisi kiri halaman akan tampil sebuah icon. Klik icon tersebut. Kemudian
pada sisi bawah klik tombol browse.
- 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
3. 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.
4. Di halaman pick a resource muncul gambar vector yang kita buat tadi. klik
gambar tersebut kemudian klik OK.
Nah sekarang pada UI sudah muncul gambar vector yang kita
buat. Disini kami membuat gambar vector dengan gambar Mobil.
Menambahkan Gambar
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 tadi, masuk ke halaman android studio.
cari folder drawble di App->res->drawble. Paste gambar
tadi di dalam folder drawable.
Gambar yang di letakkan didalam folder drawable kita panggil menggunakan atribut src. Silahkan tambahkan komponen imageview dan lengkapai seperti code berikut:
<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. |
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.