1. Download our Official Android App: Forums for Android!

Apps Custom Drawable Making edge of image fade out

Discussion in 'Android Development' started by smithdale87, Jan 22, 2014.

  1. smithdale87

    smithdale87 Lurker
    Thread Starter
    Rank:
    None
    Points:
    6
    Posts:
    5
    Joined:
    Jan 22, 2014

    Jan 22, 2014
    5
    1
    6
    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.
    Code (Text):
    1.  
    2.  
    3. ...
    4.   m_paint = new Paint();
    5.   m_blurPaint = new Paint();
    6.   m_blurPaint.SetMaskFilter(new BlurMaskFilter(blurRadius, BlurMaskFilter.Blur.Outer));
    7.            
    8. ...
    9. public override void Draw(Canvas canvas)
    10.         {
    11.             Rect clipRect = canvas.ClipBounds;
    12.             canvas.ClipRect(clipRect);
    13.             canvas.DrawBitmap(m_baseImage, 0, 0, m_paint);
    14.             if (IsRunning)
    15.             {
    16.                 canvas.Save();
    17.                 clipRect.Left = (int) m_currentOffset;
    18.                 clipRect.Right = (int) (clipRect.Left + m_progressWidth);
    19.                
    20.                 canvas.ClipRect(clipRect);
    21.                 //TODO: Figure out why edges are not blurring correctly
    22.                 canvas.DrawBitmap(m_overlayImage, 0, 0, m_blurPaint);
    23.                 canvas.Restore();
    24.             }
    25.         }

    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.
     

    Advertisement

  2. ProjectLiquid

    ProjectLiquid Well-Known Member
    Rank:
    None
    Points:
    38
    Posts:
    95
    Joined:
    Jan 14, 2014

    Jan 14, 2014
    95
    10
    38
    Senior QA Tester, Activision
    Galactic Layline
    In the 3rd line, what does this do?

    "BlurMaskFilter.Blur.Outer"
     
  3. smithdale87

    smithdale87 Lurker
    Thread Starter
    Rank:
    None
    Points:
    6
    Posts:
    5
    Joined:
    Jan 22, 2014

    Jan 22, 2014
    5
    1
    6
  4. ProjectLiquid

    ProjectLiquid Well-Known Member
    Rank:
    None
    Points:
    38
    Posts:
    95
    Joined:
    Jan 14, 2014

    Jan 14, 2014
    95
    10
    38
    Senior QA Tester, Activision
    Galactic Layline
    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 :D
     
  5. smithdale87

    smithdale87 Lurker
    Thread Starter
    Rank:
    None
    Points:
    6
    Posts:
    5
    Joined:
    Jan 22, 2014

    Jan 22, 2014
    5
    1
    6
    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!
     
  6. ProjectLiquid

    ProjectLiquid Well-Known Member
    Rank:
    None
    Points:
    38
    Posts:
    95
    Joined:
    Jan 14, 2014

    Jan 14, 2014
    95
    10
    38
    Senior QA Tester, Activision
    Galactic Layline
    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?
     
  7. smithdale87

    smithdale87 Lurker
    Thread Starter
    Rank:
    None
    Points:
    6
    Posts:
    5
    Joined:
    Jan 22, 2014

    Jan 22, 2014
    5
    1
    6
    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:

    Code (Text):
    1.  
    2. ...
    3. m_paint = new Paint();
    4. m_blurPaint = new Paint();
    5. m_blurPaint.SetMaskFilter(new BlurMaskFilter(100, BlurMaskFilter.Blur.Outer));
    6. m_blurPaint.SetShader(new BitmapShader(overlay, Shader.TileMode.Clamp, Shader.TileMode.Clamp));
    7. ...
    8.  
    9.  
    10. public override void Draw(Canvas canvas)
    11. {
    12.    canvas.DrawBitmap(m_baseImage, 0, 0, m_paint);
    13.    if (IsRunning)
    14.    {
    15.       RectF rect = new RectF();
    16.       rect.Left = m_currentOffset;
    17.       rect.Right = m_currentOffset + m_progressWidth;
    18.       rect.Top = 0;
    19.       rect.Bottom = m_baseImage.Height;
    20.  
    21.       //TODO: Figure out why edges are not blurring correctly
    22.       canvas.DrawRect(rect, m_blurPaint);
    23.    }
    24. }
    25.  
     
  8. ProjectLiquid

    ProjectLiquid Well-Known Member
    Rank:
    None
    Points:
    38
    Posts:
    95
    Joined:
    Jan 14, 2014

    Jan 14, 2014
    95
    10
    38
    Senior QA Tester, Activision
    Galactic Layline
    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?
     
  9. smithdale87

    smithdale87 Lurker
    Thread Starter
    Rank:
    None
    Points:
    6
    Posts:
    5
    Joined:
    Jan 22, 2014

    Jan 22, 2014
    5
    1
    6
    For those that are curious, I finally figured out a solution, with relative short few lines of code

    Code (Text):
    1.  
    2. RectF rect = new RectF();
    3. rect.Left = m_currentOffset;
    4. rect.Right = m_currentOffset + m_progressWidth;
    5. rect.Top = 0;
    6. rect.Bottom = m_baseImage.Height;
    7.  
    8. 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);
    9.  
    10. ComposeShader composeShader = new ComposeShader(m_bitmapShader, gradientShader,new PorterDuffXfermode(PorterDuff.Mode.DstOut));
    11. m_blurPaint.SetShader(composeShader);
    12.                
    13. canvas.DrawRect(rect, m_blurPaint);
     
    ProjectLiquid likes this.
  10. ProjectLiquid

    ProjectLiquid Well-Known Member
    Rank:
    None
    Points:
    38
    Posts:
    95
    Joined:
    Jan 14, 2014

    Jan 14, 2014
    95
    10
    38
    Senior QA Tester, Activision
    Galactic Layline
    nice! that looks much better than the original code
     

Share This Page

Loading...