Cách tải ảnh từ URL vào ImageView trên Android (Glide/Coil)

Giới thiệu

Hướng dẫn tải và hiển thị ảnh từ URL vào ImageView trên Android. Thay vì dùng AsyncTask cũ (deprecated), bài viết trình bày cách hiện đại với thư viện Glide hoặc Coil (Kotlin).

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio → File → New Project → Chọn Empty View Activity → Điền thông tin dự án.

Bước 2: Thêm dependency (build.gradle.kts / build.gradle)

Glide (Java/Kotlin):

dependencies {
    implementation "com.github.bumptech.glide:glide:4.16.0"
    annotationProcessor "com.github.bumptech.glide:compiler:4.16.0" // Java
    // ksp "com.github.bumptech.glide:compiler:4.16.0" // Kotlin KSP
}

Coil (Chỉ Kotlin, khuyến nghị cho project mới):

dependencies {
    implementation("io.coil-kt:coil:2.5.0")
}

Bước 3: Cấp quyền Internet (AndroidManifest.xml)

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

Bước 4: Thiết kế giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tải ảnh từ URL vào ImageView"
        android:textSize="20sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginTop="16dp"
        android:scaleType="centerCrop"
        android:contentDescription="Ảnh từ URL" />
</LinearLayout>

Bước 5: Code tải ảnh (MainActivity.java / MainActivity.kt)

Với Glide (Java):

package com.example.loadimage;

import android.os.Bundle;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

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

        ImageView imageView = findViewById(R.id.imageView);
        String imageUrl = "https://pbs.twimg.com/profile_images/630285593268752384/iD1MkFQ0.png";

        Glide.with(this)
                .load(imageUrl)
                .placeholder(R.drawable.ic_launcher_foreground) // Ảnh chờ
                .error(R.drawable.ic_launcher_background)       // Ảnh lỗi
                .into(imageView);
    }
}

Với Coil (Kotlin - khuyến nghị):

package com.example.loadimage

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.lifecycleScope
import com.example.loadimage.databinding.ActivityMainBinding
import coil.ImageLoader
import coil.request.ImageRequest
import kotlinx.coroutines.launch

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val imageUrl = "https://pbs.twimg.com/profile_images/630285593268752384/iD1MkFQ0.png"
        
        // Cách 1: Extension function (đơn giản nhất)
        binding.imageView.load(imageUrl) {
            crossfade(true)
            placeholder(R.drawable.ic_launcher_foreground)
            error(R.drawable.ic_launcher_background)
        }
        
        // Cách 2: Dùng ImageLoader trực tiếp
        // ImageLoader(this).execute(ImageRequest.Builder(this).data(imageUrl).target(binding.imageView).build())
    }
}

So sánh Glide vs Coil

Lưu ý quan trọng

• Không dùng AsyncTask + HttpURLConnection như code cũ - đã deprecated và dễ gây leak memory.
• Luôn set placeholder và error để UX tốt hơn.
• Với danh sách ảnh (RecyclerView), cả Glide và Coil đều tự động handle recycling và caching.
• Cần thêm android:usesCleartextTraffic="true" trong <application> nếu load HTTP (không phải HTTPS) trên Android 9+.