Promo Lebaran, Kelas Online CODEPOLITAN Cukup Bayar Setengah Harga KLAIM PROMO
Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Bekerja dengan ImageView

Ditulis oleh Bagus Aji Santoso, dipublikasi pada 22 Aug 2017 dalam kategori Tutorial
Bekerja dengan ImageView - CodePolitan.com

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


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP