Cara load image/gambar menggunakan picasso android studio kotlin

Cara load image/gambar menggunakan picasso android studio kotlin

Selamat sore teman-teman jumpa lagi di artikel kak mitra, kali ini kak mitra akan share pengalaman kak mitra tentang bagaimana caranya sih menampilkan gambar pada android studio dengan bahasa pemrograman kotlin, tidak hanya gambar statis, tapi juga gambar dinamis dalam artian bisa berubah-ubah, baik sumber gambar dari local maupun internet, oke langsung saja ya..

Tentunya teman-teman sudah sering menggunakan android bukan, nah di salah satu program pasti teman-teman sering menjumpai atau menemui ada gambar entah berupa logo perusahaan pembuat atau hanya sebagai pemanisnya, yang sering kita temui di halaman login misalnya. nah pasti teman-teman penasaran bukan tentang gimana sih caranya mbuat gambar tersebut, mungkin bila teman-teman berangkat dari programmer web base kita menyebutnya dengan nama dom <img src, naah berbeda dengan program HTML untuk menampilkan gambar pada program kotlin tidak sesederhana itu, kita harus menyiapkan library tambahan atau dependency tambahan. 

Untuk langkah langkah mudah cara menampilkan gambar di android studio teman-teman dapat mengikuti step by step berikut ini :

Kak mitra asumsikan teman-teman sudah berhasil melakukan installasi Android studi di laptop teman-teman, minimal sudah bisa menampilkan hello world (tentunya lengkap dengan emulator atau real device) bagi teman-teman yang belum melakukan installasi, teman-teman bisa membaca artikel lama kaka tentang cara cara installasi andorid studio di linux

1. Buat projek baru, untuk nama bisa bebas sesuai selera teman-teman di sini saya menggunakan nama projek "GambarDinamis"

2. Tambahkan dependency (file berada di graddle)

//implementation 'com.squareup.picasso:picasso:2.5.2'
implementation 'com.squareup.picasso:picasso:2.71828'

NB : gunakan yang bawah ya, karena ketika kak mitra menggunakan yang atas selalu gagal.

Inti dari kode di atas adalah kita menambahakan library tambahan yang bernama picasso, picasso ini sendiri adalah library yang dibuat untuk kotlin yang berfungsi untuk menampilkan gambar. karena setahu kak mitra, kotlin sendiri belum menyediakan library untuk menampilkan gambar pada programnya.

- Setelah selesai menambahakan dependecy Lakukan sync (klik tulisan sysnc di kanan atas) dan tunggu hingga proses selesai

3. Pada AndroidManifest.xml tambahkan baris berikut ini 

<uses-permission android:name="android.permission.INTERNET" />

Baris code di atas ini Berfungsi untuk mengizinkan aplikasi mengakses internet, ini penting ya teman-teman jangan sampai lupa

4. Oke persiapan sudah selesai, sekarang kita setting tampilan xmlnya. 

Untuk code xml lengkapnya silahkan lihat di github pada branch master

5. Oke, sekarang kita setting file kotlinnya

package com.example.gambardinamis

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.widget.Button
import android.widget.ImageView
import com.squareup.picasso.Picasso


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var imageUri = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CIqRZV1D27BQ_WoJTwnnLMY-zgwLO-QqszmLetBSx4jSLaNye4Zgzjyvd6PJAiYJn6bWmAKVISNuCd41mOYA3AQC2-9poCqixbDe0a5NxUjhf1jvU6g-BO6dY8iHWHRkHnYmoyW7edLs/s320/unnamed.jpg"
        val imageView = findViewById(R.id.imageView) as ImageView
        Picasso.get().load(imageUri).into(imageView);

        val button = findViewById(R.id.button) as Button
        button.setOnClickListener {
            Log.d("logTag", "rubahGambar")
            imageUri = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdy-2cF697lvwUnrVSlBR4rF7HXqj4hTJXzgYpKm5K5NviuB3C2KnttJk-8LUgipVwbeCmxAw_6PkKW_D_MMv_h4eM_PiChtD2qYR3EwNmswSL1D0WyymsF42BnExhyphenhyphenSoF8JEUGqc_pmb7/s220/admin.jpeg"
            Picasso.get().load(imageUri).into(imageView);
        }


    }
}

Oke, setelah itu silahkan run programnyya.. seharusnya aplikasi sudah berjalan dengan baik

Keterangan github

branch , 

1. main (ambil gambar dari internet)

2. fromLocal (ambil gambar dari local, namun penamaan gambar masih bersifat statis)

3. fromLocalDinamis (ambil gambar dari local penamaan gambar bersifat dinamis)

alamat github di github.com/mitraide/LoadImage

cara ini sudah kakak coba dan berjalan dengan baik

daftar kotak assets :

------------------------------------

keyword : Cara load gambar dari local storage

1. Pada file AndroidManifest.xml tambahkan code berikut ini

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

2. Pada file explorer di device emulator tambahakan sebuah file gambar, pada contoh kak mitra menambahkan file earth.jpg

3. Pada file kotlin MainActivity.kt tambahkan code berikut ini

var srcFoto = ("/storage/emulated/0/DCIM/earth.jpg")
if(File(srcFoto).exists()){
    Log.d("logTag", "exist")
    Log.d("logTag", srcFoto)
    imageView.setImageURI(Uri.parse("/storage/emulated/0/DCIM/earth.jpg"))
} else {
    Log.d("logTag", srcFoto)
    Log.d("logTag", "not exist")
}

Setelah itu lakukan running program, seharusnya sudah muncul gambar seperti berikut ini,