Overview
Before we jump into the project, First you have to understand about Glide Library.
What is Glide?
Glide is an image Loader library for Android. Glide library is been used in many open-source projects.
Why should we use Glide?
- Loading image programmatically
- Loading image from URL
- Load Bitmap
- Load image from drawable/folder
- Add Placeholder
- Error Image
- Transform or Resize image
- Image caching
- Load image faster
- Load multiple images in one activity
Brief example code
dependencies {
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}Java code:
String url= "url for the image";
ImageView imageView = findViewById(R.id.imageid);
Glide.with(getApplicationContext())
.load(url)
.into(imageview);So it was a short example of how to load a simple image from drawable using Glide. In this article, we will create a simple app and will load images using Glide in it. So let's start it.
Complete example
Open Android Studio and create a new project or open your existing project.
Dependencies
dependencies {
implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}And don't forget to Sync the Gradle file.
Layout design
First, we have to prepare a layout file for our app. So open the activity_main.xml file. and add the below code:
activity_main.xml
<?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:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#512DA8"
android:text="Load Images"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.812" />
<ImageView
android:id="@+id/imageView"
android:layout_width="410dp"
android:layout_height="420dp"
android:scaleType="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.32" />
</androidx.constraintlayout.widget.ConstraintLayout>So according to your need, you should prepare the layout. But I'm designing the layout here on my own and there is only one Button and ImageView in it.
Java code
Designing is done. let's move on to the actual coding part. Open the MainActivity.java file and add the below code:
MainActivity.java
package com.example.simpleapp;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
public class MainActivity extends AppCompatActivity {
ImageView imageView;
Button button;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageView);
button = findViewById(R.id.button);
//Load image on button click
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//Main code
Glide.with(MainActivity.this)
.load(R.drawable.img1)
.into(imageView);
}
});
}
}Please note - In the code above, img1 is an image that is placed in the drawable folder so you have to use your image name.
Code Explanation :
- First, initialize the views.
- Set the click listener to the button.
- Pass the context in the Glide.with( ) method.
- Pass the Image location or URL in the .load( ) method.
- Pass the ImageView in the .into( ) method.
Output
Here are some methods in Glide:
Loading image from res/drawable folder
Glide.with(this)
.load(R.drawable.image_name)
.into(imageView);Loading image from any server URL
//Loading image from any server location into imageView
Glide.with(this)
.load("IMAGE URL HERE")
.into(imageView);Show placeholder image
Glide.with(this)
.load("IMAGE URL HERE")
.placeholder(R.drawable.PLACEHOLDER_IMAGE_NAME)
.into(imageView);
Load image from any file location
//Loading image from any file location into imageView
Glide.with(this)
.load(new File("..File location.."))
.into(imageView);
To Transform image
Glide.with(this)
.load("IMAGE URL HERE")
.override(300, 300)
.centerCrop()
.into(imageView);
To Show error image
Glide.with(this)
.load("IMAGE URL HERE")
.error(R.drawable.ERROR_IMAGE_NAME)
.into(imageView);
So that's it for this tutorial, almost all concept of the Glide library has been covered in this article. In this way, we can load images in android using glide.
Post a comment if you are facing difficulties to implement Glide and I will answer it as soon as possible.
And don't forget to follow npxcoding on Instagram.
Happy Learning!
Share this article with your friends ✌!!
0 Comments