Android Border of Circular Profile Pic using Glide

Question

Issue Solved Check My Answer Below for Understanding

I am trying to create a border of the profile picture which is being downloaded from Facebook account. But I am not able to do it correctly even after studying the other examples here at stackoverflow. The profile picture is being downloaded using Glide library. Here's my code :-

Glide library Code in Java

Glide.with(Home.this).load(url).asBitmap().into(new BitmapImageViewTarget(profile_pic){
            @Override
            protected void setResource(Bitmap resource) {
                RoundedBitmapDrawable circular = RoundedBitmapDrawableFactory.create(getApplicationContext().getResources(),resource);
                circular.setCircular(true);
                profile_pic.setImageDrawable(circular);
            }
        });

ImageView in XML

<ImageView
        android:id="@+id/profile_pic"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher"
        android:padding = "5dp"
        android:background="@drawable/profile_pic_border"/>

Drawing border in Drawable

<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
    android:width="5dp"
    android:color="#3e65b4"/>
<size android:height="50dp"
android:width="50dp"/>

Here's what I am achieving from above code :-

In 5.7inch Phone{Real Phone}

in 5.5inch phone{Emulator}

score 2 · Accepted Answer · answered Oct 10 '17 at 21:07

2

So, I have solved the issue, my code is 100% correct using oval.

What I had done was the Relative Layout in which I had put that image was fixed to 90dp which was making it improper, as soon as I corrected that to wrap content, it was a great fit. Snapshot attached for reference for other people.

answered Oct 10 '17 at 21:07

Ravi Bhardwaj

128
1
13

RelativeLayout is too heavy, FrameLayout alone is enough – Mihae Kheel Apr 08 '21 at 18:27

score 1 · Answer 2 · answered Oct 10 '17 at 20:43

1

On your drawable file, instead of use the oval shape, change it to ring shape to get a perfect circle, like this:

<shape android:shape="ring"
xmlns:android="http://schemas.android.com/apk/res/android" >

answered Oct 10 '17 at 20:43

Natan Felipe

164
1
4

It's not helping – Ravi Bhardwaj Oct 10 '17 at 20:47
Can you tell me whole code for ring, my code for ring isn't working ? Although even I have added innerRadius , thickness, thickness ratio, and use level to false – Ravi Bhardwaj Oct 10 '17 at 20:53

score -2 · Answer 3 · answered May 05 '18 at 15:06

You can Create an xml file and setBackground for ImageView or use the library in github with code

<de.hdodenhof.circleimageview.CircleImageView
                                android:id="@+id/act_detail_job_img_company"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_centerHorizontal="true"
                                android:background="@android:color/transparent"
                                android:src="@drawable/user"
                                app:civ_border_color="#FFFFFFFF"
                                app:civ_border_width="2dp"
                                />

This library doesn't support `scaleType` and `adjustViewBounds` — Vlad, Oct 02 '19 at 08:01

Android Border of Circular Profile Pic using Glide

3 Answers3