Bekerja dengan ImageView

Pendahuluan

Di tutorial ini, kita akan membahas bagaimana cara menggunakan ImageView, bagaimana memanipulasi bitmap, jenis-jenis scaleType, dll.

Cara Penggunaan

Berikut cara menuliskan ImageView

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"
    android:src="@drawable/my_image" />

View ini secara umum akan memuat gambar yang dari drawable bernama my_image. Atribut scaleType memungkinkan kita untuk memposisikan sebuah gambar di dalam ImageView. Pada contoh di atas, kita ingin menampilkan gambar dengan ukuran aslinya dan berada di tengah-tengah ImageView.

Mengatur Ukuran ImageView

ImageView dapat memiliki tinggi dan lebar yang sudah ditentukan sejak awal.

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:scaleType="fitXY"
    ...
/>

Atribut scaleType akan memaksa gambar untuk menurunkan tinggi dan lebarnya agar sama dengan layout_width dan layout_height (dalam hal ini 50dp).

Kita dapat memuat gambar yang memiliki lebar atau tinggi menyesuaikan ukuran yang ditentukan (aspek rasio) dengan memanfaatkan parameter adjustViewBounds.

<ImageView
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"
    ...
/>

Scale Type

Sebuah ImageView dapat menampilkan gambar berdasarkan atribut scaleType yang diberikan. Berikut ini beberapa properti atribtu scaleType:

Scale Type	Deskripsi
center	Menampilkan gambar ditengah view tanpa merubah skalanya.
centerCrop	Merubah skala gambar sehingga dimensi x dan y lebih besar atau sama dengan view dengan menjaga aspek rasionya, lalu menampilkan gambar ditengah view.
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.
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.
fitStart	Sama seperti fitCenter tapi sejajar dengan posisi kiri atas dari view.
fitEnd	Sama seperti fitCenter tapi sejajar dengan posisi kanan bawah view
fitXY	Merubah dimensi x dan y agar pas dengan ukuran view; aspek rasio gambar tidak dijaga.
matrix	Merubah skala gambar melalui kelas Matrix. Matrix ini dapat diberikan lewat method setImageMatrix. Kelas Matrix dapat melakukan transformasi misalnya memutar gambar.

Berikut ini hasil penggunaan atribut scaleType di atas.

Mendukung Beberapa Jenis Layar Sekaligus

Karena perangkat Android memiliki lebar layar, resolusi serta kerapatan layar yang berbeda-beda, diciptakanlah sebuah sistem untuk memilih gambar yang paling sesuai dengan ukuran perangkat yang memuatnya. Ada folder-folder drawable khusus untuk setiap kerapatan layar diantaranya: ldpi (resolusi rendah), mdpi (resolusi menengah), hdpi (resolusi tinggi), xhdpi (resolusi lebih tinggi). DPI di sini merupakan singkatan dari dots per inch.

Untuk membuat jenis-jenis gambar yang berbeda ukuran, kita harus memastikan aspek rasio 3:4:6:8 untuk jenis-jenis kerapatan. Perhatikan tabel di bawah:

Kerapatan Layar	DPI	Contoh Perangkat	Skala	Piksel
ldpi	120	Galaxy Y	0.75px	1dp=0.75px
mdpi	160	Galaxy Tab	1.0x	1dp=1px
hdpi	240	Galaxy SII	1.5x	1dp=1.5px
xhdpi	320	Nexus 4	2.0x	1dp=2.0px
xxhdpi	480	Nexus 5	3.0x	1dp=3.0px
xxxhdpi	640	Nexus 6	4.0x	1dp=4px

Ini artinya jika kita membuat sebuah gambar dengan dimensi 100.100 untuk mdpi, maka kita harus membuat gambar yang sama dengan dimensi 150x150 (1.5x) untuk hdpi, 200x200 untuk xhdpi (2x), 300x300 (3x) dan 75x75 (0.75x) untuk ldpi.

Mipmap dan Drawable

Dimulai dengan Android 4.3, developer memiliki opsi untuk menggunakan res/mipmap untuk menyimpan gambar bertipe "mipmap". Mipmap digunakan mayoritas sebagai ikon aplikasi misalnya untuk ikon launcher.

Gambar di folder mipmap dapat dipanggil dengan @mipmap/ic_launcher di mana pemanggilannya mirip dengan @drawable.

Seperti halnya Drawable, kita pun dapat membuat ikon alternatif berdasarkan kerapatan layar.

Bekerja dengan Bitmap

Kita dapat mengubah bitmap yang ditampilkan oleh ImageView dengan cara:

ImageView image = (ImageView) findViewById(R.id.test_image);
image.setImageResource(R.drawable.test2);

Mengatur Skala Bitmap

Untuk mengatur skala Bitmap di Java kita perlu memanggil method createScaledBitmap untuk mengatur tinggi dan lebar yang diinginkan.

// Baca bitmap dari folder drawable
Bitmap bMap = BitmapFactory.decodeResource(getResources(), R.drawable.my_image);
// Atur ukuran bitmap to 150x100 (lebar x tinggi)
Bitmap bMapScaled = Bitmap.createScaledBitmap(bMap, 150, 100, true);
// Baca bitmap yang telah diubah ukurannya ke  ImageView
ImageView image = (ImageView) findViewById(R.id.test_image);
image.setImageBitmap(bMapScaled);

Jika ingin mengatur ukuran bitmap namun menjaga aspek rasionya kita harus menggunakna kelas BitmapScaler yang isinya seperti berikut ini:

public class BitmapScaler
{
	// Scale and maintain aspect ratio given a desired width
	// BitmapScaler.scaleToFitWidth(bitmap, 100);
	public static Bitmap scaleToFitWidth(Bitmap b, int width)
	{
		float factor = width / (float) b.getWidth();
		return Bitmap.createScaledBitmap(b, width, (int) (b.getHeight() * factor), true);
	}


	// Scale and maintain aspect ratio given a desired height
	// BitmapScaler.scaleToFitHeight(bitmap, 100);
	public static Bitmap scaleToFitHeight(Bitmap b, int height)
	{
		float factor = height / (float) b.getHeight();
		return Bitmap.createScaledBitmap(b, (int) (b.getWidth() * factor), height, true);
	}

	// ...
}

Suatu saat mungkin kita ingin mengetahui tinggi dan lebar perangkat agar bisa mengubah dimensi gambar dengan benar. Salin kelas DeviceDimensionsHelper.java berikut lalu panggil dengan cara:

// ambil tinggi dan lebar layar perangkat
int screenWidth = DeviceDimensionsHelper.getDisplayWidth(this);
// Ubah dimensi Bitmap dengan menjaga aspek rasionya berdasarkan lebar layar
BitmapScaler.scaleToFitWidth(bitmap, screenWidth);

Menampilkan Gambar SVG

Kini Android dapat menampilkan gambar vector sehingga kita dapat mengimpor file SVG. Klik kanan di folder res lalu pilih File > New > Vector Asset dan pilih `Local file (SVG, PSD) untuk mengimpornya.

Sumber: Codepath