Android High Imitation micro-letter voice Chat page Gaussian blur (hair glass effect) _android

The current application market, the use of hair glass effect of the app everywhere, such as the use of micro-letter voice chat can be found, voice chat page using a Gaussian blur effect.

First look at the effect of the picture:

With a closer look at the image above, we can see that the background image is based on the user's avatar as a Gaussian blur, which is used as the back color of the entire page.

About Android How to quickly achieve Gaussian blur (hair glass effect), a pile of related information on the web, can refer to the following article a rapid –android of the virtual effect of glass. The following is given directly to the obfuscation tool class (validated):

Import Android.graphics.Bitmap; /** * Quick Blur tool * * public class Fastblur {public static Bitmap Doblur (Bitmap sentbitmap, int radius, Boolean canreuseinbitm AP) {Bitmap Bitmap; if (canreuseinbitmap) {Bitmap = Sentbitmap;} else {Bitmap = Sentbitmap.copy (Sentbitmap.getconfig ()
, true);
} if (Radius < 1) {return (null);} int w = Bitmap.getwidth ();
int h = bitmap.getheight ();
int[] pix = new int[w * h];
Bitmap.getpixels (pix, 0, W, 0, 0, W, h);
int wm = W-1;
int HM = H-1;
int WH = w * h;
int div = radius + radius + 1;
int r[] = new INT[WH];
int g[] = new INT[WH];
int b[] = new INT[WH];
int rsum, gsum, Bsum, x, Y, I, p, yp, Yi, yw;
int vmin[] = new Int[math.max (W, h)];
int divsum = (div + 1) >> 1;
Divsum *= divsum;
int dv[] = new int[256 * Divsum];
for (i = 0; i < 256 * divsum. i++) {Dv[i] = (i/divsum);} yw = Yi = 0;
int[][] stack = new INT[DIV][3];
int stackpointer;
int Stackstart;
Int[] Sir;
int RBS;
int r1 = radius + 1;
int routsum, goutsum, boutsum; int Rinsum, ginSum, binsum; for (y = 0; y < h; y++) {rinsum = Ginsum = Binsum = Routsum = Goutsum = Boutsum = Rsum = gsum = bsum = 0; for (i =-ra Dius I <= radius; i++) {p = pix[yi + math.min (WM, Math.max (i, 0))]; sir = stack[i + radius]; sir[0] = (P & 0xff0000) >> sir[1
= (P & 0x00ff00) >> 8;
SIR[2] = (P & 0x0000ff);
RBS = R1-math.abs (i);
Rsum + = sir[0] * RBS;
Gsum + = sir[1] * RBS;
Bsum + = sir[2] * RBS; if (i > 0) {rinsum + = sir[0]; Ginsum + = sir[1]; Binsum + = sir[2];} else {routsum = sir[0]; goutsum = sir[1]; bouts
Um + = sir[2];
} stackpointer = radius; for (x = 0; x < W; x + +) {R[yi] = Dv[rsum]; G[yi] = Dv[gsum]; B[yi] = dv[bsum]; rsum = routsum; gsum-= Goutsum; bsum
-= Boutsum;
Stackstart = Stackpointer-radius + div;
sir = Stack[stackstart% div];
Routsum-= sir[0];
Goutsum-= sir[1];
Boutsum-= sir[2];
if (y = = 0) {Vmin[x] = math.min (x + radius + 1, WM);} p = Pix[yw + vmin[x]];
Sir[0] = (P & 0xff0000) >> 16; SIR[1] = (P & 0x00FF00) >> 8;
SIR[2] = (P & 0x0000ff);
Rinsum + = sir[0];
Ginsum + = sir[1];
Binsum + = sir[2];
Rsum + = Rinsum;
Gsum + = Ginsum;
Bsum + = Binsum;
Stackpointer = (stackpointer + 1)% Div;
sir = stack[(stackpointer)% div];
Routsum + = sir[0];
Goutsum + = sir[1];
Boutsum + = sir[2];
Rinsum-= sir[0];
Ginsum-= sir[1];
Binsum-= sir[2];
yi++;
} yw + = W; for (x = 0; x < W x + +) {rinsum = Ginsum = Binsum = Routsum = Goutsum = Boutsum = Rsum = gsum = bsum = 0; YP =-radi
US * W; for (i =-radius i <= radius; i++) {Yi = Math.max (0, YP) + x; sir = stack[i + radius]; sir[0] = R[yi]; sir[1] = G[yi]
;
SIR[2] = B[yi];
RBS = R1-math.abs (i);
Rsum + = r[yi] * RBS;
Gsum + = g[yi] * RBS;
Bsum + = b[yi] * RBS; if (i > 0) {rinsum + = sir[0]; Ginsum + = sir[1]; Binsum + = sir[2];} else {routsum = sir[0]; goutsum = sir[1]; bouts
Um + = sir[2];
if (I < HM) {YP + = W;}}
Yi = x;
Stackpointer = radius; for (y = 0; y < h; y++) {//Preserve alpha channel: (0xff000000 & Pix[yi]) pix[Yi] = (0xff000000 & Pix[yi]) | (Dv[rsum] << 16) | (Dv[gsum] << 8) |
Dv[bsum];
Rsum-= routsum;
Gsum-= goutsum;
Bsum-= boutsum;
Stackstart = Stackpointer-radius + div;
sir = Stack[stackstart% div];
Routsum-= sir[0];
Goutsum-= sir[1];
Boutsum-= sir[2];
if (x = = 0) {Vmin[y] = math.min (y + r1, HM) * W;} p = x + vmin[y];
Sir[0] = r[p];
SIR[1] = g[p];
SIR[2] = b[p];
Rinsum + = sir[0];
Ginsum + = sir[1];
Binsum + = sir[2];
Rsum + = Rinsum;
Gsum + = Ginsum;
Bsum + = Binsum;
Stackpointer = (stackpointer + 1)% Div;
sir = Stack[stackpointer];
Routsum + = sir[0];
Goutsum + = sir[1];
Boutsum + = sir[2];
Rinsum-= sir[0];
Ginsum-= sir[1];
Binsum-= sir[2];
Yi + W;
} bitmap.setpixels (pix, 0, W, 0, 0, W, h);
return (bitmap); }
}

So, can we use this tool class to get a high profile Chat page? The answer is no.

Let's look at what you can do directly using the tool class:

We can see that, through the tool class, can achieve the image of the hair glass effect, but not ideal, because the background color of micro-letter is dark, and we blurred the picture color is light. The effect is somewhat unsatisfactory. People who know about iOS may know that iOS realizes Gaussian blur with direct api:uiblureffectstyleextralight, Uiblureffectstylelight, Uiblureffectstyledark, and Uiblureffectstyledark can directly achieve a relatively dark glass effect. So what do you do with the Android side?

I use here is "curve to seek the country" strategy, want to background color is darker, we use framelayout layout, in which add a relatively dark one layer view, can realize.

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" Match_parent "android:fitssystemwindows=" true
"android:orientation=" vertical "> <imageview android:id=" @+id/imgbg "android:layout_width=" Match_parent " android:layout_height= "Match_parent" android:adjustviewbounds= "true" android:maxheight= "1500DP" android:maxWidth= "1000DP" android:scaletype= "Centercrop"/> <imageview android:layout_width= "Match_parent" Android:layout_ height= "Match_parent" android:background= "#90000000"/> <relativelayout android:id= "@+id/rootview" Android: Layout_width= "Match_parent" android:layout_height= "Match_parent" android:fitssystemwindows= "true" Android:o rientation= "vertical" > <imageview android:id= "@+id/imguserhead" android:layout_width= "100DP" Android:layout_ height= "100DP" android:layout_centerhorizontal= "true" android:layout_margintop= "80DP" android:scaletype= "F"Itxy "android:src=" @mipmap/ic_launcher "/> <textview android:id=" @+id/textusername "android:layout_width=" Wrap_content "android:layout_height=" wrap_content "android:layout_below=" @id/imguserhead "Android:layout_
Centerhorizontal= "true" android:layout_margintop= "30DP" android:gravity= "Center_horizontal" android:text= "mute" Android:textcolor= "#ffffff" android:textsize= "24DP"/> </RelativeLayout> </FrameLayout>

As you can see in the code above, we have added such a imageview:

<imageview
android:layout_width= "match_parent"
android:layout_height= "Match_parent"
android: background= "#90000000"/>

The results of the most important implementation are shown below:

Source Address: Https://github.com/zuiwuyuan/FastBlur_VoiceChat

The above is a small set to introduce the Android high imitation micro-letter voice chat page Gaussian blur effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!