Langsung ke konten utama

Circle Image View using Glide and Picasso in Android


Hello guys, In this tutorial we will learn how to create Circular Image View in Android without using any additional Libraries such as CircleImageView.
// This Library is very Popular and Widely used for Circle Image View
compile 'de.hdodenhof:circleimageview:2.1.0'
Nowadays, Every Android Developers uses Glide or Picasso Image HTTP Libraries to Image in Image Views. If we uses any additional Libraries to get Circle Shaped Image View may lead to increase the size of an APK. To avoid this, Glide and Picasso provides solution to create Circle Image View.

First, we will see how create circle image using Picasso.

Circle Transformation using Picasso

Download Picasso by Gradle in Android
// This Library is created by Square.Inc
compile 'com.squareup.picasso:picasso:2.5.2'
The following snippet is used to load image into ImageView using Picasso
Picasso.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
.placeholder(R.mipmap.ic_launcher)
.error(R.mipmap.ic_launcher)
.into((ImageView) findViewById(R.id.picassoImageView));
To create circle image, create a class named as PicassoCircleTransformation and paste the following code
public class PicassoCircleTransformation implements Transformation {

@Override
public Bitmap transform(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());

int x = (source.getWidth() - size) / 2;
int y = (source.getHeight() - size) / 2;

Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
if (squaredBitmap != source) {
source.recycle();
}

Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
BitmapShader shader = new BitmapShader(squaredBitmap,
BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
paint.setShader(shader);
paint.setAntiAlias(true);

float r = size / 2f;
canvas.drawCircle(r, r, r, paint);

squaredBitmap.recycle();
return bitmap;
}

@Override
public String key() {
return "circle";
}
}
Then load the transformation as like the following
Picasso.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
.placeholder(R.mipmap.ic_launcher)
.error(R.mipmap.ic_launcher)
.transform(new PicassoCircleTransformation())
.into((ImageView) findViewById(R.id.picassoImageView));
Now we will see, how to create circle transformation using Glide

Circle Transformation using Glide

Download Glide by Gradle in Android
// This Library is created by Bumptech
compile 'com.github.bumptech.glide:glide:3.7.0'
The following snippet is used to load image into ImageView using Glide
Glide.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
.thumbnail(0.5f)
.crossFade()
.placeholder(R.mipmap.ic_launcher)
.error(R.mipmap.ic_launcher)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into((ImageView) findViewById(R.id.glideImageView));
To create circle image, create a class named as GlideCircleTransformation and paste the following code
public class GlideCircleTransformation implements Transformation {

private BitmapPool mBitmapPool;

public GlideCircleTransformation(Context context) {
this(Glide.get(context).getBitmapPool());
}

public GlideCircleTransformation(BitmapPool pool) {
this.mBitmapPool = pool;
}

@Override
public Resource transform(Resource resource, int outWidth, int outHeight) {
Bitmap source = resource.get();
int size = Math.min(source.getWidth(), source.getHeight());

int width = (source.getWidth() - size) / 2;
int height = (source.getHeight() - size) / 2;

Bitmap bitmap = mBitmapPool.get(size, size, Bitmap.Config.ARGB_8888);
if (bitmap == null) {
bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
}

Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
BitmapShader shader =
new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
if (width != 0 || height != 0) {
// source isn't square, move viewport to center
Matrix matrix = new Matrix();
matrix.setTranslate(-width, -height);
shader.setLocalMatrix(matrix);
}
paint.setShader(shader);
paint.setAntiAlias(true);

float r = size / 2f;
canvas.drawCircle(r, r, r, paint);

return BitmapResource.obtain(bitmap, mBitmapPool);
}

@Override public String getId() {
return "GlideCircleTransformation()";
}
}
Then load the transformation in Glide as like the following
Glide.with(getApplicationContext()).load("http://i.imgur.com/DvpvklR.png")
.thumbnail(0.5f)
.crossFade()
.placeholder(R.mipmap.ic_launcher)
.error(R.mipmap.ic_launcher)
.bitmapTransform(new GlideCircleTransformation(getApplicationContext()))
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into((ImageView) findViewById(R.id.glideImageView));

Download Code:

You can download the full source from the following Github link. If you Like this tutorial, Please star it in Github.
    
Download From Github

I found these snippets from Wasabeef Transformations Libraries for Glide and Picasso.
Post your doubts and comments in the comments section.  

Komentar

Postingan populer dari blog ini

Android Tutorial: Use LeakCanary to detect memory leaks

Overview The memory leak can be a headache to detect and to resolve, small memory leaks can be hidden and may be seen after a long usage of the application and hunting memory leaks is not a simple task. In this tutorial we will create a leaked application and we will use the LeakCanary library to detect the memory leak. Step 1: add the LeakCanary dependency to the application Modify the app/build.gradle to add the LeakCanary dependency as follows: Step 2: Extend and configure the Application class We need to call LeakCanary.install in onCreate method: Step 3: Create a leaked activity For this we will create a singleton class that saves the context: Then, the main activity (leaked one), will use the singleton and then we'll go to a new activity: Then, in the new activity we'll call System.gc to force the garbage collector in order to accelerate the analysis. Step 4: Retrieve the analysis result A nice notification can be shown: The result can be retrieved from logcat: Source c...

QR-Code Generator - Library

In this Post, I introduce my new Gradle Library. This Library is used to Generate QR Code Automatically for our specified input. How to Import the Library: Gradle: compile 'androidmads.library.qrgenearator:QRGenearator:1.0.0' Permission: <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> How to use this Library: After importing this library, use the following lines to use this library. The following lines are used to generated the QR Code // Initializing the QR Encoder with your value to be encoded, type you required and Dimension QRGEncoder qrgEncoder = new QRGEncoder(inputValue, null, QRGContents.Type.TEXT, smallerDimension); try { // Getting QR-Code as Bitmap bitmap = qrgEncoder.encodeAsBitmap(); // Setting Bitmap to ImageView qrImage.setImageBitmap(bitmap); } catch (WriterException e) { Log.v(TAG, e.toString()); } Save QR Code as Image // Save with location, value, bitmap returned and type of Image(JPG/PNG). QRGSaver.save(s...

How to Perform Rest API using Retrofit in Android (Part-1)

In this post, I will show you How to use Retrofit in Android. Retrofit is a new born baby of web services such as AsyncTask, JSONParsing and Volley. This post is Split into Two Parts. First Part Contains Architecture of Retrofit and How to create MySQL DB and PHP Scripts for Basic Operations. Second Part Contains how to perform Retrofit Operations in Android. Architecture of Retrofit Web Service We need 3 Things for Complete Retrofit Architecture. RestAdapter An Interface with all networking methods and parameters. Getter Setter Class to save data coming from server. Project Structure: Create MySQL DataBase and PHP Scripts. Following image shows my database structure. PHP Scripts: I created db_config.php which contains the script to connect DB. <?php /** * Database config variables */ define("DB_HOST", "localhost"); define("DB_USER", "root"); define("DB_PASSWORD", ""); define("DB_DATABASE", "retrofit_exampl...