Cara Menampilkan Gambar di Android Studio dan Penjelasannya

Dalam artikel kali ini saya akan membahas mengenai cara menampilkan gambar di Android Studio pada aplikasi yang akan kita buat. Untuk menampilkan gambar, anda bisa menggunakan widget ImageView di Android Studio.

Persiapan

Sebelum kita masuk ke pokok pembahasan, lebih baik anda buat projek baru terlebih dahulu. Saya akan menamai projek ini “Contoh ImageView”.

Setelah membuat projek, anda perlu menyiapkan file gambar yang akan digunakan untuk membuat aplikasi,, bisa berformatJPEG atau PNG.

Ada beberapa hal yang perlu anda ingat mengenai nama file gambar yang akan anda gunakan. Ini bertujuan untuk menghindari adanya error dalam pembuatan aplikasi nantinya.

1. Nama file gambar tidak boleh menggunakan spasi. Jika anda ingin ada jarak antara kata yang satu dengan kata yang lainnya, bisa menggunakan garis bawah atau underscore.

2. Nama file gambar tidak boleh memakai simbol-simbol tertentu (!@#$%^&*><?/).

3. Nama file gambar, saya sarankan huruf kecil semua, tidak ada huruf kapital.

4. Nama file gambar, saya sarankan  untuk tidak memakai angka.

Kemudian copy atau pindahkan gambar tersebut ke dalam folder drawable projek anda. Karena saya menyimpan projeknya di Data Disk E, maka ini adalah path foldernya:

E:\AndroidStudio\ContohSpinner\app\src\main\res\drawable

Tetapi jika anda menyimpan projeknya di dalam folder default Android Studio, maka ini adalah path foldernya:

C:\Users\NamaPC\AndroidStudioProjects\ContohImageView\app\src\main\res\drawable

Atau kalau anda bingung, anda bisa membuka software Android Studio, kemudian drag file gambar dari windows explorer tersebut langsung ke dalam folder drawable Android Studio.

Cara Menampilkan Gambar di Android Studio

Seperti yang saya katakan sebelumnya bahwa cara menampilkan gambar di android studio adalah dengan menggunakan widget yang bernama ImageView.

Ini adalah contoh listing XML sederhana untuk widget ImageView di Android Studio.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/gambar"
    android:scaleType="centerCrop"/>

Jika kita lihat preview nya akan tampak hasilnya seperti berikut ini.

Contoh ImageView

Ok saya akan beri sedikit penjelasan.

Atribut layout_width dan layout_height

Sebelumnya saya pernah menjelaskan atribut ini dalam artikel Belajar Menggunakan Widget TextView Android Studio. Atribut ini wajib anda gunakan untuk mengatur ukuran lebar dan tinggi dari tampilan gambar yang ada pada aplikasi. Contoh diatas saya menggunakan ukuran wrap_content yang artinya saya menyesuaikan ukuran lebar dan tinggi tampilan gambar tersebut sesuai dengan ukuran gambar yang sebenarnya. Anda juga bisa menggunakan ukuran angka misalkan 100dp, 200dp, 300dp, dan yang lainnya.

Atribut android:src

Atribut ini digunakan sebagai rujukan pada Android Studio untuk mengambil dan menampilkan gambar yang ada. Dalam contoh diatas menyatakan bahwa “android:src” sama dengan “@drawable/gambar”. Simbol at “@” disini digunakan untuk merujuk pada suatu sumber. Sumber yang dimaksud adalah folder drawable, dan “gambar”  merupakan nama file gambar yang ada pada folder drawable.

Penulisan nama file gambar di dalam nilai atribut ini, tidak perlu menggunakan ekstensi dari file gambar tersebut. Anda cukup menuliskan nama file gambarnya saja, tidak perlu menggunakan .jpg atau .png diakhir nama file gambar tersebut.

Atribut android:scaleType

Atribut ini digunakan untuk mengatur skala gambar dan akan berpengaruh pada tampilan gambar di ponsel anda. Atribut ini memiliki 8 nilai yaitu centerCrop, center, fitCenter, fitStart, fitEnd, fitXY, matrix, dan centerInside.

Agar anda bisa melihat beberapa perbedaan ke delapan nilai atribut tersebut, saya sudah menyediakan beberapa contohnya.

1). centerCrop

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="centerCrop"/>
</LinearLayout>

ImageView centerCrop

2). center

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="center"/>
</LinearLayout>

ImageView center

3). fitCenter

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="fitCenter"/>
</LinearLayout>

ImageView fitCenter

4). fitStart

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="fitStart"/>
</LinearLayout>

ImageView fitStart

5). fitEnd

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="fitEnd"/>
</LinearLayout>

ImageView fitEnd

6). fitXY

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="fitXY"/>
</LinearLayout>

ImageView fitXY

7). matrix

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="matrix"/>
</LinearLayout>

ImageView matrix

8). centerInside

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logobangropi"
        android:scaleType="centerInside"/>
</LinearLayout>

ImageView centerInside

Ok, saya rasa sudah cukup untuk penjelasan mengenai artikel Cara Menampilkan Gambar di Android Studio ini. Meski artikel ini sangat sederhana, tapi saya harap artikel ini bisa bermanfaat bagi anda yang ingin menjadi seorang developer android. Jika ada pertanyaan, anda bisa menanyakannya di kolom komentar atau anda juga bisa menghubungi saya lewat halaman Hubungi Saya, saya akan berusaha membantu anda dalam belajar pemrograman android

Jika ada kesalahan dalam penjelasan saya di dalam artikel ini, mohon cantumkan di dalam kolom komentar blog ini, saya akan segera mengubahnya..

Terima kasih bagi anda yang sudah membaca, dan jika artikel ini bermanfaat untuk anda tidak ada salahnya untuk membagikan artikel ini kepada teman-teman anda.

Saya juga sangat membutuhkan kritik dan saran dari anda, agar situs ini menjadi lebih baik kedepannya.

Terima Kasih

 

One thought on “Cara Menampilkan Gambar di Android Studio dan Penjelasannya

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.