Circular images using Glide Image Library in Android
Glide Image Library
Glide is a fast and efficient image loading and caching framework. It is simple, easy to use and supports animated GIFs. It is popular with developers as its optimised for smooth scrolling performance in ListViews / RecyclerViews. It has less memory footprint compared to other Image loading libraries like Picasso. Another useful thing about Glide is that it supports image transformation. So its possible to transform the existing square or rectangular images to circle or triangle programatically without making any change in the Layout.
Implementation
Glide is pretty easy to implement in your project.
Using Gradle (Add this code to your build.gradle file)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
repositories { mavenCentral() // jcenter() works as well because it pulls from Maven Central } dependencies { compile 'com.github.bumptech.glide:glide:3.7.0' compile 'com.android.support:support-v4:19.1.0' } |
Fetch images
Now lets see how to fetch images from a url using Glide.
|
1 2 3 4 5 6 7 8 9 10 11 |
Glide .with(this) // pass Context .load(url) // pass the image url .centerCrop() // optional scaletype .placeholder(R.drawable.loading_spinner) // optional placeholder .crossFade() //optional - to enable image crossfading .into(myImageView); // the ImageView to which the image is to be loaded |
Adding Circular Transformation to image
In this example we will see how to add a circular transformation to image. For that we need to create a custom CircularTransform class which extends BitmapTransformation as given below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
public class CircleTransform extends BitmapTransformation { public CircleTransform(Context context) { super(context); } @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) { return circleCrop(pool, toTransform); } private static Bitmap circleCrop(BitmapPool pool, Bitmap source) { if (source == null) return null; int size = Math.min(source.getWidth(), source.getHeight()); int x = (source.getWidth() - size) / 2; int y = (source.getHeight() - size) / 2; // TODO this could be acquired from the pool too Bitmap squared = Bitmap.createBitmap(source, x, y, size, size); Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888); if (result == null) { result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); } Canvas canvas = new Canvas(result); Paint paint = new Paint(); paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP)); paint.setAntiAlias(true); float r = size / 2f; canvas.drawCircle(r, r, r, paint); return result; } @Override public String getId() { return getClass().getName(); } } |
To apply the Circular Transformation to Glide we will use the below code
|
1 2 3 4 |
Glide.with(MyActivity.this) .load(Uri.parse("http://mywebsite.co/image1")) // add your image url .transform(new CircleTransform(MyActivity.this)) // applying the image transformer .into(MyImageView); |
Please let me know your Suggestions / Queries in comments.
Follow GadgetSaint on Facebook / Twitter for updates.
Wanna start your blog or site in 5 mins? Check out Official WordPress recommended web hosting Bluehost.
thank you very much,
you helped me
I got cannot resolve crossfade() when I try to use this code
Can you please explain ?
I got cannot resolve crossfade() when I try to use this code
Can you please explain ?
Just remove crossfade if its giving issues. Its optional