Circular imageView with textview by using Cardview

Welcome to "Android Super Nerds". Thanks for coming back to my site, I really appreciate that and if you guys are new to my Site please do check my previous articles as well.

So back to the topic title which states "Circular Image by using Cardview layout".

Before I begin, I would like to express that I really understand, how tough it would have been to create an ImageView in a circular shape. I mean, seriously we all think that it is going to be too simple and easy to implement just a circle shape ImageView


But its a sweet lie, because mostly what we try to achieve via creating a drawable gradient XML file with rounded curves and try to dumb the ImageView into it.
OR
set this drawable as a background for an ImageView and using the src attribute try to display image. The outcome is not what we are expected mostly. Sometimes it looks like ↓

This might be happening due to some reason:-
  1. The image size is too large.
  2. Layout overlapping is not proper.
Anyways the most common and easy way to display circular image is to dumb the ImageView (as it is) inside the CardView.

And as we know CardView by default had the previous articles attribute so by using it, making the circular view is an easy task.

Now without wasting more time, allow me to show you guys "How To Make It Happen".

Requirement:
First, get some good-resolution images and add them to a drawable folder. So we have added an image of good-resolution i.e. 191*186 



Code:
Explanation:
As we are focusing to display a small circular image, we had considered and had fixed width and height as 150dp * 148dp.
Now give approximate half of the width or height size to its corner, we had considered and had fixed cardCornerRadius as 75dp.

Output:

So as you can see how CardView is easy to implement a circular ImageView. Here image had to be cropped, more like it is overlapped by the CardView corner.


That's All Guys.

If you guys have any questions about any of the UI components, Please do Leave a comment below..!!

&&

If you like this article don’t forget to share it.
Till then "Happy Coding".


Comments