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

Source: Internet
Author: User

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= " 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,

/** * */package;import;import;import Android.content.context;import;import;import;import;import;import;import;import;import;import;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(; 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 (;        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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.