(Tutorial Android) Image Loader using Glide

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 :