(Tutorial Android) Image Loader using Glide

Friday, May 20, 2016

Glide merupakan salah satu image loader yang banyak dipakai untuk development aplikasi android. Jika sebelumnya saya sudah membahas tentang Picasso http://wimsonevel.blogspot.co.id/2016/05/tutorial-android-image-loader-using.html. Sekarang mari kita berkenalan dengan Image Loader yang satu ini.

Glide sama halnya dengan Picasso, yaitu dapat memuat image dari berbagai source dengan pengaturan cache dan low memori dalam memanipulasi image. Image loader ini dikembangkan dan diperkenalkan oleh google pada event Google I/O 2015).


Beberapa fitur yang ada di Glide versi 3.x :
-Animated GIF decoding
-Local video stills
-Thumbnail support
-Lifecycle integration
-Transcoding
-Animations
-OkHttp and Volley Support

Oke kita langsung ke TKP.

The first, siapkan sampel image url dulu gan. Disini saya pake foto dedek jkt48 lucu ini..… :3






Chouzetsu kawaiii.. yupi... 


Oke, keep focus !

Tambahkan dependenciesnya di gradle terlebih dahulu, disini saya menggunakan Glide versi 3.7.0. Untuk melihat versi terakhir bisa dilihat di https://github.com/bumptech/glide/releases

// Glide
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:support-v4:23.3.0'

Library support v4 disini harus disesuaikan dengan buildToolsVersion kita.
Di top level gradle tambahkan repository maven.
repositories {
    ...
    mavenCentral()
}

Kemudian kita buat layout dengan tiga buah imageView di dalamnya. Masing-masing diberi nama imgLocal, imgUrl dan imgGif.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.wim.android_glide.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/imgLocal"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <ImageView
                android:id="@+id/imgUrl"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

            <ImageView
                android:id="@+id/imgGif"
                android:layout_width="match_parent"
                android:layout_height="200dp" />
        </LinearLayout>
    </ScrollView>

</RelativeLayout>


Nah, setelah itu kita implementasikan Glide.

- Untuk simple image loader dari url maupun lokal cukup dengan memanggil code satu baris saja seperti berikut :
Glide.with(this).load(“source”).into(imgLocal);

- Kita juga dapat melakukan resizing, cropping dan animasi seperti berikut :
Glide.with(this)
        .load(url)
        .centerCrop()
        .override(800,600)
        .placeholder(R.drawable.placeholder)
        .crossFade()
        .into(imgUrl);

- Selain itu juga dapat menampilkan image GIF dengan method asGif() seperti berikut :
Glide.with(this)
        .load(R.drawable.gif_luvchu)
        .asGif()
        .crossFade()
        .into(imgGif);

Berikut source code lengkapnya di MainActivity.
package com.example.wim.android_glide;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

    private ImageView imgLocal, imgUrl, imgGif;

    private String url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9PoN0Pvj5wAPBn_yQKyEahyfQ521bMLfhEFfxzH7GEVp7Fy3LS6iNDbQ7O2sGK7LqRufxlf7h4MZM8-ltlx-HYBmRADN7psDBTUejjmuf4UdI0I9JD8aeNJwVbv2feo-DSI6B55lBp_A/s1600/Civ_gxGU4AAyPKK.jpg";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imgLocal = (ImageView) findViewById(R.id.imgLocal);
        imgUrl = (ImageView) findViewById(R.id.imgUrl);
        imgGif = (ImageView) findViewById(R.id.imgGif);

        // Load from local
        Glide.with(this).load(R.drawable.yupi_luvchu).into(imgLocal);

        // Load from url
        Glide.with(this)
                .load(url)
                // cropping
                .centerCrop()
                //resize
                .override(800,600)
                .placeholder(R.drawable.placeholder)
                //animation
                .crossFade()
                .into(imgUrl);

        // Load GIF
        Glide.with(this)
                .load(R.drawable.gif_luvchu)
                .asGif()
                .crossFade()
                .into(imgGif);

    }

}

Terakhir jangan lupa permission internet.
<uses-permission android:name="android.permission.INTERNET"/>

Build dan jalankan maka hasilnya sebagai berikut :



Source code lengkap dapat dilihat di https://github.com/wimsonevel/Android-Glide

Sekian dan semoga bermanfaat
Happy Coding :)

Share this :

Previous
Next Post »
2 Komentar
avatar

gan kalo ambil dari gambar local gimana ya caranya???
kodingnya kayak gimana??? terimakasih

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔

Ads