Each SUSI.AI skill has some data like skill name, skill image, skill rating and so on. Some of the skills image have a square appearance while others have a circular appearance and so on. This blog shows how to transform all images to circular image view while setting the skill image in the appropriate view holder in the skills card using Picasso.
Step – 1 : Create a new helper class called CircleTransform.java that implements the Transformation interface from Picasso.
Step -2 : Override the transform and key methods.
Step – 3 : Create a Bitmap and perform the following steps inside the transform() method, as mentioned in the code below :
This method returns a bitmap that we shall use to add to the appropriate view holder.
Step – 4 : Also return a string called “circle” from the key() method.
Step – 5 : Now, add this transformation to the code, where the skill image is set into the appropriate view holder using Picasso.
Now, all skill images will be circular, as can be seen in the following screenshot :
The first image shows the skills image before applying CircleTransform while the second image shows the same after applying it.
- CircleTransform for Picasso
- Check out this blog on ‘AvatarView’
- Picasso Image Rotation and Transformation