Android Development Step by step 58: Draw a circular bubble background effect to the picture

Recently in the development of the project, there is a need for the application icon to draw a circular bubble background, with a color bubble so it looks beautiful, the color of the bubble is the application of the icon color mean, first look at the effect, then I give the demo.

The Demo app icon is like this:

After adding the bubble background is this:

Look closely at the circle background color is the mean value of the icon color.

OK, let's finish this demo.

First step, write page Activity_drawcycle.xml

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:layout_width=" match_parent "    android:layout_height=" match_parent "    android:o rientation= "vertical" >    <imageview        android:id= "@+id/imgcycle"        android:layout_width= "40DP"        android:layout_height= "40DP"        android:src= "@drawable/ic_launcher"/></linearlayout>

Step two, write Activity,drawcycleactivity.java

/** * */package com.figo.study;import com.figo.study.utils.uiutils;import Android.app.activity;import Android.content.context;import Android.graphics.bitmap;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.pixelformat;import Android.graphics.porterduffxfermode;import Android.graphics.bitmap.config;import Android.graphics.RectF;import Android.graphics.drawable.bitmapdrawable;import Android.graphics.drawable.drawable;import Android.os.Bundle; Import android.widget.imageview;/** * @author Figo * */public class Drawcycleactivity extends Activity {@Overrideprotecte d void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (r.layout.activity_                Drawcycle); You need to draw a circular bubble background to the picture drawable img = getresources (). getdrawable (R.drawable.ic_launcher);//Draw round bubbles bitmap bp =                Createcircleimage (Drawabletobitmap (IMG), 40); Draw a good picture assign value to ImageView control ImageView Imgview = (ImageView) Findviewbyid(r.id.imgcycle); Imgview.setimagedrawable (New Bitmapdrawable (BP));} Private Bitmap Drawabletobitmap (drawable drawable) {Bitmap bitmap=null;try {Bitmap = Bitmap.createbitmap ( Drawable.getintrinsicwidth (), Drawable.getintrinsicheight (), drawable.getopacity ()! = Pixelformat.opaque? Bitmap.Config.ARGB_8888:Bitmap.Config.RGB_565); Canvas canvas = new Canvas (bitmap);d rawable.setbounds (0, 0, drawable.getintrinsicwidth (), Drawable.getintrinsicheight ());d Rawable.draw (canvas);} catch (Exception e) {//Todo:handle Exception}return bitmap;} Private Bitmap Createcircleimage (Bitmap source, int sizedp) {Final Paint paint = new paint (); final int NW = Source.getwidt        H ();        Final int nh = Source.getheight ();        Calculates the source picture color average and then takes the mean color as the bubble color int[] pixels = new INT[NW * NH];        Source.getpixels (pixels, 0, NW, 0, 0, NW, NH);        Long rtotal=0;        Long gtotal=0;        Long btotal=0;            for (int i = 0; i < pixels.length; i++) {int p = pixels[i]; int r = (P &Amp            0x00ff0000) >> 16;            int g = (P & 0x0000FF00) >> 8;            int b = (P & 0x000000ff) >> 0;            Rtotal+=r;            gtotal+=g;        Btotal+=b;        } int raverage= (int) (Rtotal/(NW * NH));        int gaverage= (int) (Gtotal/(NW * NH));        int baverage= (int) (Btotal/(NW * NH)); Sets the brush color Paint.setcolor (COLOR.ARGB (255, Raverage, Gaverage, baverage));p Aint.setantialias (true); int sizepix= UIUTILS.DIP2PX (DRAWCYCLEACTIVITY.THIS,SIZEDP);        Bitmap target = Bitmap.createbitmap (Sizepix, Sizepix, config.argb_8888);//Draw a square canvas on canvas canvas = new canvas (target); Draw round canvas.drawcircle in square (SIZEPIX/2, SIZEPIX/2, SIZEPIX/2, paint);//Picture intersection mode, canvas original picture can be understood as the background is DST, the new picture can be The solution for the foreground is Src//src_over is the new picture on the canvas Paint.setxfermode (New Porterduffxfermode (        Android.graphics.PorterDuff.Mode.SRC_OVER));        Calculates the coordinates of the upper-left and lower-right corners of the target graph RECTF dst=new RECTF (); The circular built-in square (the picture area to be drawn) is side length float destrectwidth= (float) math.sqrt (sizEDP*SIZEDP/2)); float left= (sizedp-destrectwidth)/2+1;//null 1dpfloat top=left;float right=sizedp-left;float bottom= Right;//dst.set (uiutils.dip2px (Drawcycleactivity.this, 5.86f), uiutils.dip2px (drawcycleactivity.this,5.86f), UIUTILS.DIP2PX (drawcycleactivity.this,34.14f), uiutils.dip2px (drawcycleactivity.this,34.14f));d St.set ( UIUTILS.DIP2PX (Drawcycleactivity.this,left), uiutils.dip2px (Drawcycleactivity.this,top), UIUtils.dip2px ( Drawcycleactivity.this,right), uiutils.dip2px (Drawcycleactivity.this,bottom)); Canvas.drawbitmap (source, NULL, DST , paint); return target;}}

Android Development Step by step 58: Draw a circular bubble background effect to the picture