Wednesday, April 3, 2019

Cara Menampilkan Gambar di Android Studio dan Penjelasannya

Cara Menampilkan Gambar di Android Studio dan Penjelasannya

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.
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)