How to make a blur transparent linear layout

Question

I have a transparent layout in android, and behind the layout there is an image. how to make the linear blur ? I found examples to make the image itself blur but I don't want to make whole image blue, just only the part that is behind the linear layout.

Answer 1

I have pretty complex solution, so there won't be any code. So, here is idea, step by step:

1. Let's assume that your layout have just single custom LinearLayout. No ImageView as a background.
2. What we going to do, is draw background drawable of LinearLayout by our own, so it will first draw full image and then draw blurred square from the same image on top. Content of LinearLayout might be moved to desired position using paddings.
3. So, create something like MyLinearLayout and put it to your layout resource. Provide required constructors.
4. Override onAttachedToWindow() and onDetachedFromWindow() methods. Inside them we should load our background Bitmap and recycle it accordingly. Let's name it mBackground
5. Override draw() method. Inside it we're going to first draw our mBackground.
6. Then, you can use Canvas#clipRect() method to crop drawing area of Canvas to some specified rectangle. In your case, this rectangle should be the area below your content. You can figure it out using View#getPadding*() methods. Don't forget to call canvas#save() before clipping drawing area.
7. Now you can draw your bitmap once again with blur (I don't know which method exactly you're using, so let's assume that you know how to do it... but you still can share it with us :) ). Cool thing is that you can just draw the same Bitmap once again in full scale - since we had called clipRect before, it will be drawn only within this area. Don't forget to call canvas#restore() after drawing background.
8. Call super.draw() to draw rest of the stuff, that your LinearLayout contains.

Answer 2

Set a semitransparent Blur image to the linear layout or simplest set a color to linear layout and set it to semitransparent by defining alpha

edited solution

do this...

1.) create a blur copy of the image u have on background. 2.) clip the image by using

Bitmap croppedBmp = Bitmap.createBitmap(originalBmp, startX, startY, widthLayout , heightOfLayout);

3.) set this image in the Linear Layout using an image-view with height and width attribute as fill-parent.