How to blur background images?

There are many libraries available for blur the background.They are providing many good functionalities if your need is just blur the background then you don't need to import big libraries.Here is the simplest way to blur your background lets have a look.
 
Let us starting with Layout.XML file.Let's create activity_main.xml you can choose your own name and set the id to the parent layout.Here I gave the name "relFullScreen" don't forget to set the id to parent layout this is very important we see it later on.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relFullScreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary">

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="@mipmap/ic_launcher_round" />

<TextView
android:id="@+id/txtOpenDialog"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:background="@color/colorAccent"
android:padding="7dp"
android:text="Open"
android:textColor="#fff"
android:textSize="18dp"
android:textStyle="bold" />

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:src="@mipmap/ic_launcher" />

<!-- ======== CUSTOM ALERT DIALOG ========= -->
 
<RelativeLayout
android:id="@+id/relCustomDialog"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#800000000"
android:clickable="true"
android:visibility="gone">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="30dp"
android:background="#ffffff"
android:orientation="vertical"
android:padding="20dp">

<!-- ======== TITLE ========= -->
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Blur"
android:textSize="22dp"
android:textStyle="bold" />

<!-- ======== DESCRIPTION ========= -->
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="This is blur background demo."
android:textSize="18dp" />

<!-- ======== CLOSE DIALOG ========= -->
 
<TextView
android:id="@+id/txtClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:background="@color/colorPrimaryDark"
android:padding="7dp"
android:text="Close"
android:textColor="#fff"
android:textSize="18dp"
android:textStyle="bold" />

</LinearLayout>
</RelativeLayout>
</RelativeLayout>

Now, let us create MainActivity and initialize all the variable.Now let us create a method name with captureScreenShot() which capture the screenshot of the screen using parent layout id which we declare early with the name of relFullScreen.

public Bitmap captureScreenShot(View view)
{
    /*
     * Creating a Bitmap of view with ARGB_4444.
     * */
     Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(),   Bitmap.Config.ARGB_4444);
    Canvas canvas = new Canvas(bitmap);
    Drawable backgroundDrawable = view.getBackground();
    if (backgroundDrawable != null)
   {
        backgroundDrawable.draw(canvas);
   }
   else
   {
       canvas.drawColor(Color.parseColor("#80000000"));
   }
   view.draw(canvas);
   return bitmap;
} 
From the above method first we are creating a bitmap of the view which we are passing.We convert the bitmap into ARGB_4444 which is very low quality you can choose your own but for my advice it is good to use ARGB_4444 which use less heap size so it prevent from the memory leak.We are passing our relFullScreen object to this function which generate bitmap.

Now, Let us create another function for blur the bitmap.

public static Bitmap blur(Context context, Bitmap image)
{
float BITMAP_SCALE = 0.4f;
float BLUR_RADIUS = 7.5f;

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;
}

Thanks to Norman Peitek for this blur function.You can follow this link for more information regarding this blur function.Now lets quickly copy this both the function in MainActivity.Now on txtOpenDialog click event call both of this function and set BitmapDrawable to relFullScreen and its done.
relCustomDialog.setBackgroundDrawable(new BitmapDrawable(getResources(), blur(MainActivity.this, captureScreenShot(relFullScreen))));
relCustomDialog.setVisibility(View.VISIBLE);

See the full code below.

package com.droid.firstandroidapp;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;
import android.view.View;
import android.widget.RelativeLayout;

public class MainActivity extends Activity
{
   private RelativeLayout relFullScreen;
   private RelativeLayout relCustomDialog;

  @Override
  protected void onCreate(Bundle savedInstanceState)
  {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     relFullScreen = (RelativeLayout) findViewById(R.id.relFullScreen);
     relCustomDialog = (RelativeLayout) findViewById(R.id.relCustomDialog); 

findViewById(R.id.txtOpenDialog).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
relCustomDialog.setBackgroundDrawable(new  BitmapDrawable(getResources(), blur(MainActivity.this, captureScreenShot(relFullScreen))));
relCustomDialog.setVisibility(View.VISIBLE);
   }
});

findViewById(R.id.txtClose).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
relCustomDialog.setVisibility(View.GONE);
}
});
}

public Bitmap captureScreenShot(View view) {
/*
* Creating a Bitmap of view with ARGB_4444.
* */
Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_4444);
Canvas canvas = new Canvas(bitmap);
Drawable backgroundDrawable = view.getBackground();
if (backgroundDrawable != null) {
backgroundDrawable.draw(canvas);
} else {
canvas.drawColor(Color.parseColor("#80000000"));
}
view.draw(canvas);
return bitmap;
}

public static Bitmap blur(Context context, Bitmap image)
{
float BITMAP_SCALE = 0.4f;
float BLUR_RADIUS = 7.5f;

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;
}
}

 Note: You can adjust BITMAP_SCALE & BLUR_RADIUS according to your need.
  • Image without Blur background.


  • Image with Blur Background.
 

Comments

Post a Comment

Popular posts from this blog

Upload Image using okHttp

Many developer facing the problem with upload image using okHttp.So here is the clear solution which works with every OS.You just need to implement this " Multipart Request " class. OPTION 1 : First of all Download the OkHttp dependency and paste it into your build.gradle file. dependencies {    compile 'com.squareup.okhttp3:okhttp:3.7.0' } OPTION 2 : Or If you have .jar file for OkHttp then put it into libs folder and then paste the below code in build.gradle file. dependencies {    compile files('libs/okhttp-3.7.0.jar') }   You can choose any option from above either options 1 dependency or option 2 jar file choice is yours. Now, add useLibrary Http legacy in build.gradle file inside android method. android {     useLibrary 'org.apache.http.legacy' } Now let us create a class with the name of " MultipartRequest " and paste the below code. import android.content.Context; import android.util.Log; import org.apache.http.Ht
Read more

How to remove a particular activity from android stack?

             Most common problem face, when developing the application which has the circular flow or you can say loop flow. For E.g. Suppose if you move from A ➜ B ➜ C ➜ D ➜ E then from E ➜ C in C you click on some button and move to C ➜ D.             Now when you move from E ➜ C ➜ D it will create another copy of C activity and D activity to stack.So whenever you press back button your flow look like this D [New Activity] ➜ C [New Activity ] ➜ E ➜ D [Old Activity] .So to overcome this issue here is the simple solution. First of all lets create HashMap static object with name of " screenStack ".   public static HashMap<String, Activity> screenStack; Now, create method addActivities() which add the activity in screenStack. // Add activity public static void addActivity(String activityName, Activity activity) {     if (Config.screenStack == null)         Config.screenStack = new HashMap<String, Activity>();     if (activity != null)   
Read more