-2

I have a kind of simple donut chart gradually colored. I want this donut be faded depending on a value. For example if the value is 35 then 35 % of my donut would be not faded and 65 % would be faded. I don't want any animation.

This is an example of what I want to achieve :

enter image description here

The code for the donut without the masking feature :

<ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/donut"
        android:layout_alignTop="@+id/imageView"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"/>
Laurent
  • 1,661
  • 16
  • 29
  • Flagged off-topic because "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers.". Did I should post the code to put an ImageView in an activity then it would be no more usefull for users but at least not off-topic ?! – Laurent Mar 29 '17 at 11:26
  • I don't know what else to do... I have an explanation that looks clear because both users who answered understood it. I have an image illustrating the behavior I described. And I have the code of ImageView without the feature I didn't know how to create. – Laurent Mar 29 '17 at 11:40
  • Why my question is so different from this one to be off-topic ? please, explain. http://stackoverflow.com/questions/24858531/filling-a-circle-gradually-from-bottom-to-top-android/24866667#24866667 – Laurent Mar 29 '17 at 11:46

2 Answers2

2

I don't know android designing but some web design logic may help. Could you create a non-transparent panel over the image and give it the exact width and height of the image. So when you wish to display 20% of the image, you just giv to the panel 80% and align it properly.

Best regards.

Mathe Eliel
  • 658
  • 2
  • 6
  • 16
  • This can't work for a donut. It's circular, so if i change the panel to 80% the result could be weird. – Laurent Mar 29 '17 at 06:51
1

You could also use some masking in combination with a semi-transparent image using the following steps.

  • create a black/white donut up to e.g. 35 %,
  • mask your semi-transperant with this donut (e.g. make all black parts fully transparent)
  • use this masked image as overlay for your full coloured donut.

This will leave you with a partly faded donut following the same contours as the original.

I am sorry I don't have any masking-code at hand, but these steps would accomplish the desired result.

Stefan
  • 17,448
  • 11
  • 60
  • 79
  • Yes it's what i'm trying to do in part, just had to understand how all this works and how to code it. I'm finally using an ImageView for my donut and i'm using an arc witth `Canvas.drawArc()` to mask my donut (what you called the semi-transparent image). I'll will post the solution once finished. A bit late but thank you anyway ! – Laurent Mar 29 '17 at 10:52
  • Ah, yes, the 2nd step to create a "mask" can be omitted if you can simply draw a semi-transparent donut and use this as overlay :-) – Stefan Mar 29 '17 at 10:54
  • I confirm it works, Just using an ImageView with my donut and Canvas.drawArc() with opacity. I can adjust the angle of the arc to hide the desired part of my donut. I can't post my answer as my question has been flagged off-topic for now. – Laurent Mar 29 '17 at 12:30