Kemampuan Akhir Yang Direncanakan

• Mahasiswa mampu membuat aplikasi yang mengakses REST API yang terproteksi menggunakan retrofit.
• Mahasiswa mampu membuat aplikasi yang mengakses REST API dan menampilkan data dalam bentuk gambar menggunakan library picasso.
• Mahasiswa mampu membuat aplikasi yang mengakses REST API menampilkan gambar dan memiliki RecyclerView dengan Custom Layout

Modul

Picasso adalah library untuk image cache di Android. Library ini dibuat dan dikelola oleh Square, dan melayani pemuatan dan pemrosesan gambar. Library ini memudahkan proses menampilkan gambar dari lokasi eksternal. Library ini menangani setiap tahap dari prosesnya, mulai dari HTTP request hingga caching file gambarnya.

Untuk implementasi picasso, lakukan praktikum dibawah ini

1. Masukkan dependency library picasso

    dependencies {
        implementation 'com.squareup.picasso:picasso:2.4.0'
    }
   

2. Selanjutnya tambahkan permission untuk mengakses internet pada AndroidManifest.xml

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

3. Buat layout sekreatif mungkin, tetapi harus ada ImageView didalamnya. Tidak ada batasan model layout.

   <ImageView
        android:id="@+id/iv_hero"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
   

4. Untuk load gambar, elemen yang digunakan oleh picasso untuk adalah url gambar dan objek imageView pada layout anda. Contoh perintah untuk load gambar adalah seperti berikut:

    String imageUri = "http://senpuu.com.br/wp-content/uploads/2013/03/1172317494990.jpg"; //url gambar
    ivHero = (ImageView) findViewById(R.id.iv_hero);
    Picasso.with(context).load(imageUri).into(ivHero); //memanggil gambar dan diletakkan pada ivHero
   

   Dokumentasikan percobaan diatas, bagaimana hasilnya?

5. Pada picasso, kita juga dapat mengatur ukuran gambar dengan memanggil fungsi resize. Contohnya seperti berikut:

   Picasso.with(context).load(imageUri).resize(250x250)into(ivHero); //fungsi resize dapat kita atur sesuka hati
   

   Dokumentasikan percobaan resize gambar pada project anda

6. Selain itu picasso juga dapat digunakan untuk merubah orientasi gambar dengan memasukkan nilai derajat rotasi yang kita inginkan

   Picasso.with(context).load(imageUri).rotate(90)into(ivHero); //fungsi rotate dapat kita atur sesuka hati
   

   Dokumentasikan percobaan rotasi gambar pada project anda

7. Selanjutnya kita mencoba memberikan gambar default/placeholder dan gambar yang muncul ketika eror. Gambar default dimunculkan ketika gambar dari url belum di-load. sementara ketika gagal mengambil gambar dari url, maka akan dimunculkan gambar eror.

   

   gambar default

   

   gambar error

   Untuk memunculkan gambar default dan eror, kita gunakan fungsi placeholder() dan error().

    Picasso.with(context)
            .load(imageUri)
            .placeholder(R.drawable.ic_profile)
            .error(R.drawable.ic_eror)
            .into(ivHero);
   

   Dokumentasikan percobaan diatas

Tugas

Pada modul pekan ke 10, anda telah membuat aplikasi dengan mengambil data film dan diletakkan pada RecyclerView. Selanjutnya tambahkan gambar pada RecyclerView sehingga setiap baris data film yang muncul terdapat gambar poster masing-masing film.