Hướng dẫn load ảnh với thư viện Glide trong Android

Bởi

Mình đã từng tổng hợp những thư viện load ảnh tốt nhất cho ứng dụng Android. Trong đó thư viện load ảnh tốt nhất là Glide. Tại sao lại như vậy? Bài viết này chúng ta cùng tìm hiểu cách load ảnh với thư viện Glide cho ứng dụng Android như nào nhé!

Glide là một thư viện open source hỗ trợ load ảnh trên Android. Điều tuyệt vời là Glide hỗ trợ cả ảnh gif.

Với Glide bạn có thể tải và load hình ảnh 1 cách dễ dàng. Glide sử dụng thư viện kết nối chuẩn HttpURLConnection để tải hình ảnh thông qua internet.

Tuy nhiên, Glide cũng cung cấp các plugin cho các thư viện kết nối mạng phổ biến khác như Volley hay OkHttp.

Nội dung chính của bài viết

#Tại sao nên sử dụng thư viện Glide trong Android
- #Hướng dẫn load ảnh với thư viện Glide
- #Tạm kết

#Tại sao nên sử dụng thư viện Glide trong Android

Glide là thư viện được “chống lưng” bởi Google nên chất lượng thì khỏi bàn. Nó hiện là thư viện load ảnh tốt nhất hiện nay, giúp giảm thiểu tình trạng bị crash app khi chúng ta load ảnh có kích thước lớn. Đặc biệt trong recyclerview có nhiều ảnh. ( Xem chi tiết về Recycleview )

Glide giúp chúng ta load ảnh trong cả fragment điều mà picaso không thể load được.

#Hướng dẫn load ảnh với thư viện Glide

Sau khi tạo project chúng ta import file vào file build.gradle

implementation "com.github.bumptech.glide:glide:4.8.0"

Thêm các Permission vào AndroidManifest.xml

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

Dưới đây là một số tính năng và cách sử dụng cơ bản của Glide mà chúng ta hay dùng.

Load một ảnh bất kỳ với Glide

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png")
                        .into(imageView);

Resize ảnh

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png") .override(600, 200)
                        .into(imageView);

Center Crop

centerCrop(): giãn hình ảnh một cách thống nhất sao cho hình ảnh lấp đầy một vùng nhất định, với càng nhiều hình ảnh hiển thị càng tốt. Nếu cần, hình ảnh sẽ được cắt theo chiều ngang hoặc chiều dọc để cho vừa vặn.

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png") .override(600, 200).centerCrop()
                        .into(imageView);

Fit Center

fitCenter() : giãn hình ảnh một cách thống nhất sao cho hình ảnh phù hợp với khu vực nhất định. Toàn bộ hình ảnh sẽ được hiển thị, nhưng có thể có khoảng dư theo chiều dọc hoặc ngang

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png") .override(600, 200) .fitCenter()
                        .into(imageView);

Hiển thị ảnh động(Gif)

Glide hỗ trợ hiển thị ảnh gif và cách load cũng tương tự như ảnh thông thường thôi.

Glide  
    .with(context)
    .load("https://media.giphy.com/media/duzpaTbCUy9Vu/giphy.gif")
    .asBitmap()
    .into(imageViewGifAsBitmap);

Hiện thị local Video

String filePath = "/storage/emulated/0/Pictures/example_video.mp4";

Glide  
    .with( context )
    .load( Uri.fromFile( new File( filePath ) ) )
    .into( imageViewGifAsBitmap );

Cache trong Gilde

Để tăng tốc độ hiển thị ảnh, Glide có 2 loại hình cache: Memory Cache và Disk Cache

//Memory cache
Glide.with(context).load( "url" ).skipMemoryCache(true).into(imageViewInternet);  

// Disk cache
Glide.with(context).load(eatFoodyImages[0]).diskCacheStrategy(DiskCacheStrategy.NONE).into(imageViewInternet);

Xử lý Listener trong Glide

Khi chúng ta sử dụng glide cũng có thể giúp chúng ta lắng nghe Listener các yêu cầu.

Ví dụ load ảnh thành công hoặc bị lỗi, giúp chúng ta thêm các yêu cầu mong muốn.

Glide.with(this)
           .load(spacePhoto.getUrl())
           .asBitmap()
           .error(R.drawable.ic_cloud_off_red)
           .listener(new RequestListener<String, Bitmap>() {
    
               @Override
               public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
                   return false;
               }
    
               @Override
               public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {
            
                   mImageView.setImageBitmap(resource);
                   return false;
               }