Using the progress bar as an image border

Question

I want to put the progress bar in image view mode. I tried with the following code:

<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/image" android:layout_width="64dp" android:layout_height="64dp" android:layout_alignParentLeft="true" android:layout_marginLeft="3dp" android:src="@drawable/defaultprofile" /> <ProgressBar android:id="@+id/progressBar" android:layout_width="64dp" android:layout_height="64dp" android:indeterminate="false" android:progressDrawable="@drawable/circular_progress_bar" android:background="@drawable/circle_shape" style="?android:attr/progressBarStyleHorizontal" android:max="100" android:progress="65" android:layout_alignParentTop="true" android:layout_alignLeft="@+id/image" android:layout_alignStart="@+id/image" /> 

circular_progress_bar.xml:

 <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="270" android:toDegrees="270"> <shape android:innerRadiusRatio="2.5" android:shape="ring" android:thickness="1dp" android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 --> <gradient android:angle="0" android:endColor="#007DD6" android:startColor="#007DD6" android:type="sweep" android:useLevel="false" /> </shape> </rotate> 

circle_shape.xml:

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadiusRatio="2.5" android:thickness="1dp" android:useLevel="false"> <solid android:color="#CCC" /> </shape> 

Result:

How can i fix this? The progress bar should look like the border of the image. I need to remove the gasket.

Answer 1

so now your view looks like this:

All you do not need to do is change the height and weight of both views - these are different

EDIT: now you have this:

According to http://developer.android.com/intl/es/guide/topics/resources/drawable-resource.html

delete this line

 android:innerRadiusRatio="2.5" 

---

SOLUTION: I have already changed some files:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#00000000" android:padding="10dp" android:id="@+id/mainLayout"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/image" android:layout_width="65dp" android:layout_height="65dp" android:src="@color/colorAccent"/> <ProgressBar android:id="@+id/progressBar" android:layout_width="65dp" android:layout_height="65dp" android:padding="1dp" android:progressDrawable="@drawable/circular_progress_bar" android:background="@drawable/circle_shape" android:style="?android:attr/progressBarStyleHorizontal" android:max="100" android:progress="65" android:layout_alignLeft="@+id/image" android:layout_alignTop="@+id/image" /> </RelativeLayout> 

Circular progress bar:

 <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="270" android:toDegrees="270"> <shape android:innerRadius="32dp" android:shape="ring" android:thickness="1dp" android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 --> <gradient android:angle="0" android:endColor="#007DD6" android:startColor="#007DD6" android:type="sweep" android:useLevel="false" /> </shape> </rotate> 

Circular shape

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:thickness="1dp" android:innerRadius="32dp" android:useLevel="false"> <solid android:color="#CCC" /> </shape> 

And it looks like this:

Hope this helps