Android Imitation micro-letter group chat head _android

Source: Internet
Author: User

Work needs to achieve the image of the nail-nail group head of a function, is the personal head together to display, looked at the market on the app like micro-letter group chat Head is a combination of the head of QQ is not, others seem to have no.

To share with you how to achieve it. First, let's look at the effect chart:

Okay, here's how it's going to be done:

Realize the idea

    • 1. Get bitmap Pictures First (local, network)
    • 2. Create a thumbnail of the specified size
    • 3. Combination bitmap picture

Very simple, local pictures need us to read from the local, if it is a network image we can also according to the URL to get bitmap to combine

Specific implementation process

1. layout file:

<linearlayout xmlns:android= "" xmlns:tools= "http:// "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android: paddingleft= "@dimen/activity_horizontal_margin" android:paddingright= "@dimen/activity_horizontal_margin" Android :p addingtop= "@dimen/activity_vertical_margin" android:gravity= "center" android:orientation= "vertical" Android: Background= "#987" android:paddingbottom= "@dimen/activity_vertical_margin" tools:context= ". Mainactivity "> <textview android:background=" #fff "android:layout_width=" Match_parent "Android:layout_ height= "1DP"/> <imageview android:src= "@drawable/j" android:id= "@+id/iv1" android:layout_width= "Wrap_c Ontent "android:layout_height=" wrap_content "/> <textview android:background=" #fff "Android:layout_wid
Th= "Match_parent" android:layout_height= "1DP"/> <imageview android:src= "@drawable/j"    Android:id= "@+id/iv2" android:layout_width= "wrap_content" android:layout_height= "wrap_content"/> <Tex Tview android:background= "#fff" android:layout_width= "match_parent" android:layout_height= "1DP"/> <Ima Geview android:src= "@drawable/j" android:id= "@+id/iv3" android:layout_width= "Wrap_content" Android:layout_ height= "Wrap_content"/> <textview android:background= "#fff" android:layout_width= "Match_parent" Andro id:layout_height= "1DP"/> <imageview android:src= "@drawable/j" android:id= "@+id/iv4" Android:layout_wid Th= "Wrap_content" android:layout_height= "wrap_content"/> <textview "#fff" Android:

 Layout_width= "Match_parent" android:layout_height= "1DP"/> </LinearLayout>

Four ImageView controls, used to display pictures don't say it.

2. Get bitmap, set the properties of the picture

   * Get picture array entity
   * @param count
   * @return
  /private list<bitmapbean> getbitmapentitys (int Count) {
    list<bitmapbean> mlist = new arraylist<> ();
    String value = Propertiesutil.readdata (this, string.valueof (count),;
    string[] arr1 = Value.split (";");
    int length = Arr1.length;
    for (int i = 0; i < length; i++) {
      String content = arr1[i];
      string[] arr2 = Content.split (",");
      Bitmapbean entity = null;
      for (int j = 0; J < Arr2.length J + +) {
        entity = new Bitmapbean ();
        Entity.setx (float.valueof (arr2[0));
        Entity.sety (float.valueof (arr2[1));
        Entity.setwidth (float.valueof (arr2[2));
        Entity.setheight (Float.valueof (arr2[3]));
      Mlist.add (entity);
    return mlist;

3. Create a compressed picture where we use the Extractthumbnail () method in Thumbnailutils, with the parameter bitmap,width,height

/** * Initialization data/private void InitData () {/* get four images array/bitmapBeans1 = Getbitmapentitys (1);
    BitmapBeans2 = Getbitmapentitys (2);
    BITMAPBEANS3 = Getbitmapentitys (3);
    BITMAPBEANS4 = Getbitmapentitys (4); /*bitmap thumbnail */bitmap[] Bitmaps1 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getres
    Ources (), R.DRAWABLE.J), (int) bitmapBeans1. Get (0). GetWidth (), (int) bitmapbeans1.get (0). GetWidth ())}; Bitmap[] Bitmaps2 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getresources (), R.drawab LE.J), (int) bitmapBeans2. Get (0). GetWidth (), (int) bitmapbeans2.get (0). GetWidth ()), Thumbnailutils.extrac Tthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) bitmapBeans2. Get (0). GetWidth (
    ), (int) bitmapbeans2.get (0). GetWidth ())}; Bitmap[] bitmaps3 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getresources (), R.draWABLE.J), (int) bitmapBeans3. Get (0). GetWidth (), (int) bitmapbeans3.get (0). GetWidth ()), Thumbnailutils.ext Ractthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) bitmapBeans3. Get (0). Getwid
            Th (), (int) bitmapbeans3.get (0). GetWidth ()), Thumbnailutils.extractthumbnail (Bitmaputils.getscalebitmap ( Getresources (), R.DRAWABLE.J), (int) bitmapBeans3. Get (0). GetWidth (), (int) bitmapbeans3.get (0). GetWidth ())
    }; Bitmap[] Bitmaps4 = {Thumbnailutils.extractthumbnail Bitmaputils.getscalebitmap (getresources (), R.dr AWABLE.J), (int) bitmapBeans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ()), Thumbnailutil S.extractthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) bitmapBeans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ()), Thumbnailutils.extractthumbnail (bitmaputils.getscalebit Map (gEtresources (), R.DRAWABLE.J), (int) bitmapBeans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ()), Thumbnailutils.extractthumbnail (Bitmaputils.getscalebitmap (Getresources (), R.DRAWABLE.J), (int) BitmapB
 Eans4. Get (0). GetWidth (), (int) bitmapbeans4.get (0). GetWidth ())};

4. Combine bitmap pictures (which is to draw our pictures together with canvas)

   * Get together Bitmap
   * @param mentitylist *
   @param bitmaps * @return *
   * public
  Static Bitmap Getcombinebitmaps (list<bitmapbean> mentitylist,
                      Bitmap ... bitmaps) {Bitmap Newbitmap
    = Bitmap.createbitmap (Bitmap.Config.ARGB_8888);
    for (int i = 0; i < mentitylist.size (); i++) {
      Bitmaps[i] = Getroundedcornerbitmap (bitmaps[i));
      Newbitmap = Mixturebitmap (Newbitmap, bitmaps[i), New PointF (
          mentitylist.get (i), GetX (), Mentitylist.get (i). GetY ()));
    return newbitmap;

Here, I set the picture to be rounded to look good.

/** * Get round bitmap * @param bitmap * * @return * * public static bitmap Getroundedcornerbitmap (bitmap bitmap) { try {Bitmap output = Bitmap.createbitmap (Bitmap.getwidth (), Bitmap.getheight (), Bitmap.Config.ARGB_8
      Canvas Canvas = new Canvas (output);
      Final Paint Paint = new Paint ();
      Final Rect Rect = new Rect (0, 0, bitmap.getwidth (), Bitmap.getheight ());
      Final RECTF RECTF = new RECTF (new Rect (0, 0, bitmap.getwidth (), Bitmap.getheight ()));
      Final float roundpx = 50;
      Paint.setantialias (TRUE);
      Canvas.drawargb (0, 0, 0, 0);
      Paint.setcolor (Color.Black);
      Canvas.drawroundrect (RECTF, ROUNDPX, ROUNDPX, paint);

      Paint.setxfermode (New Porterduffxfermode (PorterDuff.Mode.SRC_IN));

      Final Rect src = new Rect (0, 0, bitmap.getwidth (), Bitmap.getheight ());
      Canvas.drawbitmap (bitmap, SRC, rect, paint);
    return output;
catch (Exception e) {return bitmap;    }


The last to open the painting

 /** *
   * @param
   @param second
   * @param frompoint
   * @return
  /public static Bitmap Mixturebitmap (Bitmap, Bitmap Second,
                    PointF frompoint) {
    if (A-null | | second = NULL | | fromp Oint = = null) {return
    Bitmap Newbitmap = Bitmap.createbitmap (First.getwidth (),
        first.getheight (), Bitmap.Config.ARGB_8888);
    Canvas CV = new Canvas (newbitmap);
    Cv.drawbitmap (0, 0, null);
    Cv.drawbitmap (second, frompoint.x, frompoint.y, null); (Canvas.all_save_flag); Save All Layers
    cv.restore ();
    return newbitmap;

This is simple to achieve the micro-letter group chat avatar effect, of course, need to do some processing of pictures, has prevented Oom, you can also customize it as a view component, small set of time will achieve this.
Finally, let us look at the implementation of small items on the effect bar, no difference, only a few data sources are not the same, is obtained from the network.

Here to write a picture description:

The above is the entire content of this article, I hope to help you learn.

Related Article

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.