Apps Custom Drawable Making edge of image fade out

[smithdale87]

Hi, I have a custom drawable, where I draw a base bitmap image, then part of an image over the top of that that is clipped to a certain rectangle. For the overlayed image, I am trying to blur the edges, and I thought I could accomplish that using a BlurMaskFilter, however, I'm not seeing any blurring occurring.

Here is the content of the draw method from my Drawable class:
The result is almost correct, except the overlay image is not being blurred.

...
  m_paint = new Paint();
  m_blurPaint = new Paint();
  m_blurPaint.SetMaskFilter(new BlurMaskFilter(blurRadius, BlurMaskFilter.Blur.Outer));
           
...
public override void Draw(Canvas canvas)
        {
            Rect clipRect = canvas.ClipBounds;
            canvas.ClipRect(clipRect);
            canvas.DrawBitmap(m_baseImage, 0, 0, m_paint);
            if (IsRunning)
            {
                canvas.Save();
                clipRect.Left = (int) m_currentOffset;
                clipRect.Right = (int) (clipRect.Left + m_progressWidth);
                
                canvas.ClipRect(clipRect);
                //TODO: Figure out why edges are not blurring correctly
                canvas.DrawBitmap(m_overlayImage, 0, 0, m_blurPaint);
                canvas.Restore();
            }
        }

This code is written in C# using Xamarin, so I realize that some things are slightly different, but the overall methods will be the same.

Any help is much appreciated.

 

[ProjectLiquid]

In the 3rd line, what does this do?

"BlurMaskFilter.Blur.Outer"

 

[smithdale87]

This is one of the pre-defined ways that the blur will get applied. More details on other options can be found in the documentation here BlurMaskFilter.Blur | Android Developers

 

[ProjectLiquid]

bear with me here, im still new to java.

After just looking at the link for the "BlurMaskFliter.Blur" and I am totally guessing here.

BlurMaskFilter.Blur.Outer

do you need the dot^here?

should it not be this way instead?
BlurMaskFilter.Blur(Outer)

I just feel like there is something wrong with that line of code in how it is stated. Or, there might be a different way of calling that method?
public static BlurMaskFilter.Blur (String name) or


final static blur()

Then again I still have no idea what the hell I'm doing. But sometimes all you need is a pair of fresh eyes to view your work

 

[smithdale87]

If it were any of the problems that you suggest, then the code would not compile at all. It does, so I know I at least have all of that correct.

But thanks for trying!

 

[ProjectLiquid]

I would think there should be an easier way to simply blur the edge of an image.

Can any image type be used for this?

 

[smithdale87]

Yea any image type should work.

I also tried using a Bitmap Shader to get the blur to work, and removed the canvas.ClipRect call, just in case the blurred edges could have been clipped off. This is the new code, but the result is still the same:

...
m_paint = new Paint();
m_blurPaint = new Paint();
m_blurPaint.SetMaskFilter(new BlurMaskFilter(100, BlurMaskFilter.Blur.Outer));
m_blurPaint.SetShader(new BitmapShader(overlay, Shader.TileMode.Clamp, Shader.TileMode.Clamp));
...


public override void Draw(Canvas canvas)
{
   canvas.DrawBitmap(m_baseImage, 0, 0, m_paint);
   if (IsRunning)
   {
      RectF rect = new RectF();
      rect.Left = m_currentOffset;
      rect.Right = m_currentOffset + m_progressWidth;
      rect.Top = 0;
      rect.Bottom = m_baseImage.Height;

      //TODO: Figure out why edges are not blurring correctly
      canvas.DrawRect(rect, m_blurPaint);
   }
}

 

[ProjectLiquid]

If I just google "Image Processing in Java" I get a bunch of results, some old (circa 1998 lol). some new. I am just going to link two pages i thought might be helpful, at least i managed to understand them (mostly) the examples I keep seeing involve a bit more math than in your code.

Image Effect: Sharpen, blur : Image « 2D Graphics GUI « Java

Image processing with Java 2D | JavaWorld

The second link is a bit old, but there is a link to a .java file called "ImageDicer" in the middle of the top half of the page. It includes a bunch of code showing how to blur,sharpen, inverse colors etc.

If it seems like you cant get it to work through code, why not just make two separate images of the same image. One normal, one blurred and quickly but smoothly replace the stock image with the blurry one?

 

[smithdale87]

For those that are curious, I finally figured out a solution, with relative short few lines of code

RectF rect = new RectF();
rect.Left = m_currentOffset;
rect.Right = m_currentOffset + m_progressWidth;
rect.Top = 0;
rect.Bottom = m_baseImage.Height;

Shader gradientShader = new LinearGradient(rect.Left, 0, rect.Right, 0, new int[] {Color.White.ToArgb(), 0, 0, Color.White.ToArgb()}, new float[] {0, 0.4f, 0.6f, 1}, Shader.TileMode.Clamp);

ComposeShader composeShader = new ComposeShader(m_bitmapShader, gradientShader,new PorterDuffXfermode(PorterDuff.Mode.DstOut));
m_blurPaint.SetShader(composeShader);
               
canvas.DrawRect(rect, m_blurPaint);

 

[ProjectLiquid]

nice! that looks much better than the original code