overlay two images in android to set an imageview

Question

I am trying to overlay two images in my app  but they seem to crash at my canvas setBitmap   line  What am I doing wrong   private void test         Bitmap mBitmap   BitmapFactory decodeResource getResources    R drawable t       Bitmap mBitmap2   BitmapFactory decodeResource getResources    R drawable tt       Bitmap bmOverlay   Bitmap createBitmap mBitmap getWidth    mBitmap getHeight    mBitmap getConfig         Canvas canvas   new Canvas        canvas setBitmap bmOverlay       canvas drawBitmap mBitmap  new Matrix    null       canvas drawBitmap mBitmap2  new Matrix    null       testimage setImageBitmap bmOverlay

User · Answer

You can use the code below to solve the problem or download demo here

Create two functions to handle each.

First, the canvas is drawn and the images are drawn on top of each other from point (0,0)

On button click

public void buttonMerge(View view) {

        Bitmap bigImage = BitmapFactory.decodeResource(getResources(), R.drawable.img1);
        Bitmap smallImage = BitmapFactory.decodeResource(getResources(), R.drawable.img2);
        Bitmap mergedImages = createSingleImageFromMultipleImages(bigImage, smallImage);

        img.setImageBitmap(mergedImages);
    }

Function to create an overlay.

private Bitmap createSingleImageFromMultipleImages(Bitmap firstImage, Bitmap secondImage){

    Bitmap result = Bitmap.createBitmap(firstImage.getWidth(), firstImage.getHeight(), firstImage.getConfig());
    Canvas canvas = new Canvas(result);
    canvas.drawBitmap(firstImage, 0f, 0f, null);
    canvas.drawBitmap(secondImage, 10, 10, null);
    return result;
}

Read more

User · Answer

You can skip the complex Canvas manipulation and do this entirely with Drawables  using LayerDrawable   You have one of two choices  You can either define it in XML then simply set the image  or you can configure a LayerDrawable dynamically in code   Solution  1  via XML    Create a new Drawable XML file  let s call it layer xml    lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable t    gt       lt item android drawable   drawable tt    gt   lt  layer-list gt    Now set the image using that Drawable   testimage setImageDrawable getResources   getDrawable R layout layer      Solution  2  dynamic    Resources r   getResources    Drawable   layers   new Drawable 2   layers 0    r getDrawable R drawable t   layers 1    r getDrawable R drawable tt   LayerDrawable layerDrawable   new LayerDrawable layers   testimage setImageDrawable layerDrawable      I haven t tested this code so there may be a mistake  but this general outline should work

User · Answer

this is my solution       public Bitmap Blend Bitmap topImage1  Bitmap bottomImage1  PorterDuff Mode Type             Bitmap workingBitmap   Bitmap createBitmap topImage1           Bitmap topImage   workingBitmap copy Bitmap Config ARGB 8888  true            Bitmap workingBitmap2   Bitmap createBitmap bottomImage1           Bitmap bottomImage   workingBitmap2 copy Bitmap Config ARGB 8888  true            Rect dest   new Rect 0  0  bottomImage getWidth    bottomImage getHeight             new BitmapFactory Options   inPreferredConfig   Bitmap Config ARGB 8888          bottomImage setHasAlpha true           Canvas canvas   new Canvas bottomImage           Paint paint   new Paint             paint setXfermode new PorterDuffXfermode Type             paint setFilterBitmap true           canvas drawBitmap topImage  null  dest  paint           return bottomImage          usage    imageView setImageBitmap Blend topBitmap  bottomBitmap  PorterDuff Mode SCREEN      or  imageView setImageBitmap Blend topBitmap  bottomBitmap  PorterDuff Mode OVERLAY      and the results    Overlay mode     Screen mode

User · Answer

Its a bit late answer  but it covers merging images from urls using Picasso  MergeImageView  import android annotation TargetApi  import android content Context  import android graphics Bitmap  import android graphics BitmapFactory  import android graphics Canvas  import android graphics Color  import android os AsyncTask  import android os Build  import android util AttributeSet  import android util SparseArray  import android widget ImageView  import com squareup picasso Picasso   import java io IOException  import java util List   public class MergeImageView extends ImageView        private SparseArray lt Bitmap gt  bitmaps   new SparseArray lt  gt         private Picasso picasso      private final int DEFAULT IMAGE SIZE   50      private int MIN IMAGE SIZE   DEFAULT IMAGE SIZE      private int MAX WIDTH   DEFAULT IMAGE SIZE   2  MAX HEIGHT   DEFAULT IMAGE SIZE   2      private String picassoRequestTag   null       public MergeImageView Context context            super context              public MergeImageView Context context  AttributeSet attrs            super context  attrs              public MergeImageView Context context  AttributeSet attrs  int defStyleAttr            super context  attrs  defStyleAttr               TargetApi Build VERSION CODES LOLLIPOP      public MergeImageView Context context  AttributeSet attrs  int defStyleAttr  int defStyleRes            super context  attrs  defStyleAttr  defStyleRes               Override     public boolean isInEditMode             return true             public void clearResources             if  bitmaps    null                for  int i   0  i  lt  bitmaps size    i                    bitmaps get i  recycle                bitmaps clear                         cancel picasso requests         if  picasso    null  amp  amp  AppUtils ifNotNullEmpty picassoRequestTag               picasso cancelTag picassoRequestTag           picasso   null          bitmaps   null             public void createMergedBitmap Context context  List lt String gt  imageUrls  String picassoTag            picasso   Picasso with context           int count   imageUrls size            picassoRequestTag   picassoTag           boolean isEven   count   2    0             if url size are not even make MIN IMAGE SIZE even         MIN IMAGE SIZE   DEFAULT IMAGE SIZE    isEven   count   2    count   2    1              set MAX WIDTH and MAX HEIGHT to twice of MIN IMAGE SIZE         MAX WIDTH   MAX HEIGHT   MIN IMAGE SIZE   2             in case of odd urls increase MAX HEIGHT         if   isEven  MAX HEIGHT   MAX WIDTH   MIN IMAGE SIZE              create default bitmap         Bitmap bitmap   Bitmap createScaledBitmap BitmapFactory decodeResource context getResources    R drawable ic wallpaper                   MIN IMAGE SIZE  MIN IMAGE SIZE  false               change default height  wrap content  to MAX HEIGHT         int height   Math round AppUtils convertDpToPixel MAX HEIGHT  context            setMinimumHeight height   2               start AsyncTask         for  int index   0  index  lt  count  index                     put default bitmap as a place holder             bitmaps put index  bitmap               new PicassoLoadImage index  imageUrls get index   execute                   if you want parallel execution use                new PicassoLoadImage index  imageUrls get index    AsyncTask THREAD POOL EXECUTOR                        private class PicassoLoadImage extends AsyncTask lt String  Void  Bitmap gt             private int index   0          private String url           PicassoLoadImage int index  String url                this index   index              this url   url                      Override         protected Bitmap doInBackground String    params                try                      synchronous picasso call                 return picasso load url  resize MIN IMAGE SIZE  MIN IMAGE SIZE  tag picassoRequestTag  get                  catch  IOException e                              return null                      Override         protected void onPostExecute Bitmap output                super onPostExecute output               if  output    null                  bitmaps put index  output                   create canvas             Bitmap Config conf   Bitmap Config RGB 565              Bitmap canvasBitmap   Bitmap createBitmap MAX WIDTH  MAX HEIGHT  conf               Canvas canvas   new Canvas canvasBitmap               canvas drawColor Color WHITE                   if height and width are equal we have even images             boolean isEven   MAX HEIGHT    MAX WIDTH              int imageSize   bitmaps size                int count   imageSize                  we have odd images             if   isEven  count   imageSize - 1              for  int i   0  i  lt  count  i                      Bitmap bitmap   bitmaps get i                   canvas drawBitmap bitmap  bitmap getWidth      i   2   bitmap getHeight      i   2   null                                if images are not even set last image width to MAX WIDTH             if   isEven                    Bitmap scaledBitmap   Bitmap createScaledBitmap bitmaps get count   MAX WIDTH  MIN IMAGE SIZE  false                   canvas drawBitmap scaledBitmap  scaledBitmap getWidth      count   2   scaledBitmap getHeight      count   2   null                                set bitmap             setImageBitmap canvasBitmap                       xml   lt com example MergeImageView     android id    id iv thumb      android layout width  wrap content      android layout height  wrap content    gt    Example  List lt String gt  urls   new ArrayList lt  gt     String picassoTag   null     add your urls   MergeImageView findViewById R id iv thumb            createMergedBitmap MainActivity this  urls picassoTag

User · Answer

ok just so you know there is a program out there that s called DroidDraw  It can help you draw objects and try them one on top of the other  I tried your solution but I had animation under the smaller image so that didn t work  But then I tried to place one image in a relative layout that s suppose to be under first and then on top of that I drew the other image that is suppose to overlay and everything worked great  So RelativeLayout  DroidDraw and you are good to go    Simple  no any kind of jiggery pockery    and here is a bit of code for ya    The logo is going to be on top of shazam background image     lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout android id    id widget30  android layout width  fill parent  android layout height  fill parent  xmlns android  http   schemas android com apk res android   gt   lt ImageView android id    id widget39  android layout width  219px  android layout height  225px  android src   drawable shazam bkgd  android layout centerVertical  true  android layout centerHorizontal  true   gt   lt  ImageView gt   lt ImageView android id    id widget37  android layout width  wrap content  android layout height  wrap content  android src   drawable shazam logo  android layout centerVertical  true  android layout centerHorizontal  true   gt   lt  ImageView gt   lt  RelativeLayout gt

[android] overlay two images in android to set an imageview

Examples related to android

Examples related to image