0

I'm trying to make border of ImageView which should be for example 25% blue/bold and 75% gray/thin. Let's say something like this:

enter image description here

To obtain simple border I am using:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke android:width="1dp"
        android:color="#A7A9AC"/>
</shape>

what gives me only gray/thin border.

But how to achieve example which was presented above? Probably it should be done in Java part, because border percentage is variable, so it has to be done dynamically. Someone adviced me to create custom Shape class, and use ShapeDrawable. But I do not know how to do it. Any ideas or examples?

Community
  • 1
  • 1
Taldakus
  • 705
  • 2
  • 8
  • 18
  • I believe this may not possible with shape, but requires using png file. Or maybe possible with elevation, but which requires android 5.0+ runtime. – Derek Fung Aug 31 '15 at 14:57
  • I support 15+lvl API. what's your idea with using png file? Take in consideration that percentage of blue and gray borders are dynamic (can change any time). – Taldakus Aug 31 '15 at 15:00
  • only the circle together with the gray part use png, and draw your blue part like you original would over the circle – Derek Fung Aug 31 '15 at 15:02
  • But I don't know how to draw only part of border. That's the problem. – Taldakus Aug 31 '15 at 17:41

1 Answers1

2

I was working on a similar problem, I think this could help:

https://github.com/PhilJay/CircleDisplay

just change the color of the border, remove the text, and disable the animation and you will have what you want

Edit:

Something like this

<FrameLayout
    android:layout_width="100dp"
    android:layout_height="100dp">

    <com.philjay.circledisplay.CircleDisplay
        android:layout_width="100dp"
        android:layout_height="100dp"/>

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"/>

</FrameLayout>

The (com.philjay.circledisplay.CircleDisplay) depends on the path where you put the class of course.

In case the images are not always circles you can use this library:

https://github.com/vinc3m1/RoundedImageView

omar
  • 251
  • 3
  • 12
  • Nice peace of code, but I still can't figure it out how to set this custom View as my ImageView background. – Taldakus Aug 31 '15 at 21:28
  • If your image is always a circle you can just put both views in a FrameLayout and give the ImageView smaller size (height,width). I will edit the answer with some code – omar Aug 31 '15 at 23:17
  • Thank you man. Your answer is not exactly correct, but it was crucial to find proper solution. In CircleDisplay class the middle part of circle was only overrided by white circle and it won't work, beacause as u can see on the picture which I attached, blue part of border is located partially inside my ImageView (circle) and partially outside. Hence I figured out that i need to cut off the middle part of circle and this topic was helpful with this: http://stackoverflow.com/questions/22933351/android-donut-chart Then I used FrameLayout as u propoused. Thanks a lot once more time. – Taldakus Sep 01 '15 at 10:02