How to blur background images in Android

Question

What is the best way to blur background images like the image below  I saw some code and libraries but their are a couple of years old or like BlurBehind library  but it doesn t give the same effect  Thanks in advance

User · Answer

this might not be the most efficient solution but I had to use it since the wasabeef/Blurry library didn't work for me. this could be handy if you intend to have some getting-blurry animation:

1- you need to have 2 versions of the picture, normal one and the blurry one u make with photoshop or whatever

2- set the images fit on each other in your xml, then one of them could be seen and that's the upper one

3- set fadeout animation on the upper one:

final Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator());
        fadeOut.setDuration(1000);


        fadeOut.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {}

            @Override
            public void onAnimationEnd(Animation animation) {upperone.setVisibility(View.GONE);}

            @Override
            public void onAnimationRepeat(Animation animation) {}
        });

        upperone.startAnimation(fadeOut);

User · Answer

You can quickly get to blur effect by doing the following      Add this to build gradle app     Compile   com github jgabrielfreitas BlurImageView 1 0 1        Add to XML   lt com jgbrielfreitas core BlurImageView     android id    id iv blur image      android layout width  match parent      android layout height  match parent    gt      Add this to java  Import com jgabrielfreitas core BlueImageView       Under public class  activity name       BlurImageView myBlurImage       Under Oncreate    myBlurImage    ImageView  findViewById R id iv blur image  MyBlurImage setBlue 5    I hope that helps someone

User · Answer

The simplest way to achieve this is given below   I   Glide with context getApplicationContext                             load Your Path                              override 15  15      change according to your wish                           error R drawable placeholder                           into image score     else you can follow the code below    II   1 Create a class  Code is given below   public class BlurTransformation extends BitmapTransformation        private RenderScript rs       public BlurTransformation Context context            super  context             rs   RenderScript create  context                Override     protected Bitmap transform BitmapPool pool  Bitmap toTransform  int outWidth  int outHeight            Bitmap blurredBitmap   toTransform copy  Bitmap Config ARGB 8888  true                Allocate memory for Renderscript to work with         Allocation input   Allocation createFromBitmap              rs               blurredBitmap               Allocation MipmapControl MIPMAP FULL               Allocation USAGE SHARED                    Allocation output   Allocation createTyped rs  input getType                 Load up an instance of the specific script that we want to use          ScriptIntrinsicBlur script   ScriptIntrinsicBlur create rs  Element U8 4 rs            script setInput input               Set the blur radius         script setRadius 10               Start the ScriptIntrinisicBlur         script forEach output               Copy the output to the blurred bitmap         output copyTo blurredBitmap            toTransform recycle             return blurredBitmap              Override     public String getId             return  blur             2 Set image to ImageView using Glide   eg   Glide with this        load expertViewDetailsModel expert image        asBitmap         transform new BlurTransformation this         into ivBackground

User · Answer

Try below code   Put This Code in On Create    if  android os Build VERSION SDK INT  gt  9                StrictMode ThreadPolicy policy                       new StrictMode ThreadPolicy Builder   permitAll   build                StrictMode setThreadPolicy policy                    Url  quot https   encrypted-tbn0 gstatic com images q tbn ANd9GcTIur0ueOsmVmFVmAA-SxcCT7bTodZb3eCNbiShIiP9qWCWk3mDfw quot             Picasso with getContext    load Url  into img profile             Picasso with getContext    load Url  into img c profile            bitmap getBitmapFromURL Url           Bitmap blurred   blurRenderScript bitmap  12    second parametre is radius         img profile setImageBitmap blurred    Create Below Methods   Just Copy Past    public static Bitmap getBitmapFromURL String src            try               URL url   new URL src               HttpURLConnection connection    HttpURLConnection  url openConnection                connection setDoInput true               connection connect                InputStream input   connection getInputStream                Bitmap myBitmap   BitmapFactory decodeStream input               return myBitmap            catch  IOException e                   Log exception             return null                       SuppressLint  quot NewApi quot       private Bitmap blurRenderScript Bitmap smallBitmap  int radius             try               smallBitmap   RGB565toARGB888 smallBitmap             catch  Exception e                e printStackTrace                        Bitmap bitmap   Bitmap createBitmap                  smallBitmap getWidth    smallBitmap getHeight                    Bitmap Config ARGB 8888            RenderScript renderScript   RenderScript create getActivity              Allocation blurInput   Allocation createFromBitmap renderScript  smallBitmap           Allocation blurOutput   Allocation createFromBitmap renderScript  bitmap            ScriptIntrinsicBlur blur   ScriptIntrinsicBlur create renderScript                  Element U8 4 renderScript            blur setInput blurInput           blur setRadius radius      radius must be 0  lt  r  lt   25         blur forEach blurOutput            blurOutput copyTo bitmap           renderScript destroy             return bitmap              private Bitmap RGB565toARGB888 Bitmap img  throws Exception           int numPixels   img getWidth     img getHeight            int   pixels   new int numPixels              Get JPEG pixels   Each int is the color values for one pixel          img getPixels pixels  0  img getWidth    0  0  img getWidth    img getHeight                Create a Bitmap of the appropriate format          Bitmap result   Bitmap createBitmap img getWidth    img getHeight    Bitmap Config ARGB 8888              Set RGB pixels          result setPixels pixels  0  result getWidth    0  0  result getWidth    result getHeight             return result

User · Answer

you can use Glide for load and transform into blur image  1  for only one view    val requestOptions   RequestOptions                   requestOptions transform BlurTransformation 50      0-100 Glide with applicationContext  setDefaultRequestOptions requestOptions                           load imageUrl  into view    2  if you are using the adapter to load an image in the item  you should write your code in the if-else block  otherwise  it will make all your images blurry      if isBlure     val requestOptions   RequestOptions                   requestOptions transform BlurTransformation 50                   Glide with applicationContext  setDefaultRequestOptions requestOptions                           load imageUrl  into view    else   val requestOptions   RequestOptions               Glide with applicationContext  setDefaultRequestOptions requestOptions  load imageUrl  into view

User · Answer

The easiest way to do that is use a library  Take a look at this one  https   github com wasabeef Blurry  With the library you only need to do this   Blurry with context     radius 10     sampling 8     color Color argb 66  255  255  0      async      onto rootView

User · Answer

This might be a very late reply but I hope it helps someone    You can use third party libs such as RenderScript Blurry etc  If you do not want to use any third party libs  you can do the below using alpha setting alpha to 0 means complete blur and 1 means same as existing     Note If you are using point 2    While setting alpha to the background  it will blur the whole layout  To avoid this  create a new xml containing drawable and set alpha here to 0 5  or value of your wish  and use this drawable name  name of file  as the background   For example  use it as below  say file name is bgndblur xml     lt bitmap xmlns android  http   schemas android com apk res android  android layout width  match parent  android layout height  match parent  android shape  rectangle  android src   drawable registerscreenbackground   android alpha  0 5  gt    Use the below in your layout     lt       android background   drawable bgndblur  gt    Hope this helped

User · Answer

You can have a view with Background color as black and set alpha for the view as 0 7 or whatever as per your requirement    lt RelativeLayout xmlns android  http   schemas android com apk res android      android orientation  vertical      android layout width  match parent      android layout height  match parent      android background   drawable onboardingimg1  gt       lt View         android id    id opacityFilter          android layout width  match parent          android layout height  match parent          android background   android color black          android layout alignParentBottom  true          android alpha  0 7  gt       lt  View gt     lt  RelativeLayout gt

User · Answer

This is an easy way to blur Images Efficiently with Android s RenderScript that I found on this article   Create a Class called BlurBuilder  public class BlurBuilder     private static final float BITMAP SCALE   0 4f    private static final float BLUR RADIUS   7 5f     public static Bitmap blur Context context  Bitmap image        int width   Math round image getWidth     BITMAP SCALE       int height   Math round image getHeight     BITMAP SCALE        Bitmap inputBitmap   Bitmap createScaledBitmap image  width  height  false       Bitmap outputBitmap   Bitmap createBitmap inputBitmap        RenderScript rs   RenderScript create context       ScriptIntrinsicBlur theIntrinsic   ScriptIntrinsicBlur create rs  Element U8 4 rs        Allocation tmpIn   Allocation createFromBitmap rs  inputBitmap       Allocation tmpOut   Allocation createFromBitmap rs  outputBitmap       theIntrinsic setRadius BLUR RADIUS       theIntrinsic setInput tmpIn       theIntrinsic forEach tmpOut       tmpOut copyTo outputBitmap        return outputBitmap         Copy any image to your drawable folder Use BlurBuilder in your activity like this    Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       requestWindowFeature Window FEATURE NO TITLE       getWindow   setFlags WindowManager LayoutParams FLAG FULLSCREEN              WindowManager LayoutParams FLAG FULLSCREEN       setContentView R layout activity login        mContainerView    LinearLayout  findViewById R id container       Bitmap originalBitmap   BitmapFactory decodeResource getResources    R drawable background       Bitmap blurredBitmap   BlurBuilder blur  this  originalBitmap        mContainerView setBackground new BitmapDrawable getResources    blurredBitmap     Renderscript is included into support v8 enabling this answer down to api 8  To enable it using gradle include these lines into your gradle file  from this answer   defaultConfig               renderscriptTargetApi  your target api      renderscriptSupportModeEnabled true    Result

User · Answer

You can use       Glide with getContext    load R mipmap bg               apply bitmapTransform new BlurTransformation 22                 into  ImageView  view findViewById R id imBg

[java] How to blur background images in Android

Examples related to java

Examples related to android