Android

1.16. Image Library

1.16.1. Android Picasso
Android Picasso library is a powerful android library, built by square, for image
downloading and caching. It’s very simple to use and you need to write just a few lines of
code to do the job.

Example 01. use Picasso library

- B1. Add gradle for Picasso library

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

- B2. Cài đặt thư viện ViewBinding

android {
buildFeatures{
viewBinding = true
}

- B3. Thiết kế layout activity_main.xml để hiển thị ảnh

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

1
Gv Võ Ngọc Đạt
Android

- B4. Viết code MainActivity.kt xử lý nghiệp vụ

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.squareup.picasso.Picasso
import vongocdatit.app.mypicasso.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

lateinit var binding :ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

Picasso.get()

//.load("https://phucanhcdn.com/media/product/37380_laptop_microsoft_laptop_3_ryzen
_7_1_2.jpg")
.load(R.drawable.dellxps13)
.resize(300, 300)
.into(binding.imageView);
}
}

Note: If use image with .load(url) method, add internet permission

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

(https://square.github.io/picasso/)

1.16.2. Android Glide Library

Glide is fast and efficient image loading library for android. Primary focus of glide
library is making scrolling of any kind of image list as smooth and fast as possible. Using
android Glide library in Kotlin, you can:
+ Download, decode and display images, videos or animated GIFs
+ Cache, resize downloaded images
+ Show placeholder while loading image
+ Show pre-defined images when there is any error while downloading image
+ Apply animation while loading image

=> Note: Applying Transformation Using Glide. If you want to apply transformation i.e.
crop, apply filter to bitmap, you can do so using Glide library. There are several in-built
transformations in glide.

2
Gv Võ Ngọc Đạt
Android

+ CenterCrop
+ FitCenter
+ CircleCrop

+) Resizing Image
If you want to resize downloaded image and then load it into view, you can do so using
.override(200, 200) method.

Example 01: implementing android glide library in Kotlin

- B1. Setup ViewBinding
android {
buildFeatures{
viewBinding = true
}

- B2. Add Gradle in app/build.gradle file

dependencies {
...
implementation 'com.github.bumptech.glide:glide:4.12.0'
}

- B3. Add Internet Permission

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

- B4. Thiết kế layout activity_main.xml để hiển thị ảnh

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ImageView
android:id="@+id/imageView"
android:layout_width="120dp"
android:layout_height="120dp"
android:contentDescription="Image Description"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"

3
Gv Võ Ngọc Đạt
Android

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

- B5. Viết code MainActivity.kt xử lý nghiệp vụ

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.bumptech.glide.Glide
import vongocdatit.app.myglidelibrary.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

lateinit var binding :ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

// Load image into imageView

val imageUrl = "https://carshop.vn/wp-content/uploads/2022/07/hinh-nen-xe-oto-
dep-1.jpg"
Glide.with(this)
.load(imageUrl)
.placeholder(R.drawable.ic_baseline_directions_car_24)
.error(R.drawable.ic_baseline_error_24)
.override(350, 350) // Dimensions in pixel...
.circleCrop()
.into(binding.imageView)
}
}
Kết quả:

4
Gv Võ Ngọc Đạt