title: "Mosaic" (splitted) images - Gmail's letters style
body: <p>On the new versions of gmail, there is a cool imageView that shows multiple contacts images in it (link <a href="http://www.engadget.com/2013/06/05/gmail-for-android-update/" rel="nofollow">here</a> for example) .</p>
  
  <p>for example, if someone has sent me an email, i only see his image:</p>
  
  <pre><code>#######
  #     #
  #  A  #
  #     #
  #######
  </code></pre>
  
  <p>if i've replied to him, i can see my image next to it, but both my image and his are halved and share the same space of the imageView (and i think both have scaleType to be center crop) :</p>
  
  <pre><code>#######
  #  #  #
  # A# B#
  #  #  #
  #######
  </code></pre>
  
  <p>if another person has joined the conversation, it could look like this:</p>
  
  <pre><code>#######
  #  # B#
  # A####
  #  # C#
  #######
  </code></pre>
  
  <p>and if another one has joined, it could look like this:</p>
  
  <pre><code>#######
  # A# C#
  #######
  # B# D#
  #######
  </code></pre>
  
  <p>i'm not sure about the order of the items (and the rules, so everything here is my guess) , and what happens when more people are joining.</p>
  
  <p>the important thing is that i want to know how to achieve this .</p>
  
  <p>does anyone know of a solution for this? how they did it? which view was used?</p>
  
  <p>it's most certainly a custom view, but what's the best way to do it? a way that is probably most efficient and doesn't use a lot of memory ...</p>
  
  <p>i might even want to make the final image to be rounded, so it might be better to handle bitmaps instead of an imageView...</p>
  
  <p>i'm not even sure how to call such a view. i've thought of a "CollageView" or a "MosaicView" . </p>
  
  <p>just to make it clear, i think that such a problem should be handled using the next API : </p>
  
  <pre><code>public static Bitmap createMosaicOfBitmaps(int targetWidth,int targetHeight,ArrayList&lt;Bitmap&gt; imagesToShow)
  </code></pre>
  
  <p>or, if the bitmaps might take too much memory , we could use something like:</p>
  
  <pre><code>public static Bitmap createMosaicOfBitmaps(int targetWidth,int targetHeight,ArrayList&lt;LazyBitmap&gt; imagesToShow)
  
  /**interface for lazy loading of a bitmap, while downscaling the bitmap to the needed size*/
  public interface LazyBitmap{
     public getBitmap(int width,int height);
  }
  </code></pre>
  
  <p>i've come up with 2 solutions, each has its own advantages and disadvantages, but i still need to perform special effects on the final result (especially rounded corners, but maybe other things too ), and this is something that i don't know how to do. </p>
  
  <p>can anyone please help? what do you think google has used on their app ?</p>
  
  <hr>
  
  <p>EDIT: i've come up with a few possible solutions, for each i've written an answer to this thread. i'm not sure which is the best so i've posted them all . i guess each has its own advantages and disadvantages.</p>
  
  <p>none of my current solutions handles a bitmap as i've offered, but they are quite intuitive...</p>
  
  <p>i would still wish for some advice as to how this should be done in your opinion. </p>