CODEWITHSUNDEEP
javaandroidimageoverlayandroid-canvas
Siddhpura Amit
Siddhpura Amit

Reputation: 15078

combine two images which is overlay

Hello i have a two image view one with picture which is selected from camera and another imageview is only with TEXT like "Made Hawk Nelson" the image of two imageview is below

enter image description here

xml code is below

  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="7"
    android:scaleType="fitXY" >

    <ImageView
        android:id="@+id/imgSelectedPhoto"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY" />

    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/txt_made_hawk_nelson"
        android:layout_centerInParent="true" />

</RelativeLayout>

Above is half screen code and above image is also half screen

Now i want to save this picture can any body help me how can i do that? may be CANVAS will help me but i do not know how to do that so please can any body help me

Upvotes: 0

Views: 2896

Answers (4)

Stive
Stive

Reputation: 6888

Please try this, it works well

BufferedImage img1 = ImageIO.read(new File(pathtoImage)); //first image
BufferedImage img2 = ImageIO.read(new File(pathtoOverlay)); //overlay text image
BufferedImage combinedImage = new BufferedImage(img1.getWidth(),img1.getHeight(),BufferedImage.TYPE_INT_RGB);

    Graphics g = combinedImage.getGraphics();

    g.drawImage(img1, 0, 0, null);
    g.drawImage(img2, 0, 0, null);
    ImageIO.write(combinedImage,"JPG",new File(pathToBeSaved,"combined.jpg");

Upvotes: 1

Ankitkumar Makwana
Ankitkumar Makwana

Reputation: 3485

this may Helps you , Here need to change function with Required String,and pass your Background drawable Image, and Adjust font Size,TextColor,And Alignment Using Canvas And Create one Single Bitmap and check it.

private Bitmap getThumb(String strangle, String strnote, int width, int height) {

  //Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.transperet_bg);
  Bitmap bmOverlay = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

  Canvas canvas = new Canvas(bmOverlay);
  Paint paint = new Paint();

  paint.setColor(Color.WHITE);
  paint.setTextSize(20);
  paint.setFlags(Paint.ANTI_ALIAS_FLAG);
  // if the background image is defined in main.xml, omit this line
  canvas.drawARGB(140, 0, 0, 0);
  //canvas.drawBitmap(mBitmap, 0, 0, null);
  // draw the text and the point
  paint.setTextAlign(Paint.Align.LEFT);

  canvas.drawText("Head Angel = " + strangle, 10, 20, paint);

  strnote = edtnote.getText().toString();
  if (TextUtils.isEmpty(strnote)) {
   strnote = "Note";
  }
  canvas.drawText(strnote, 10, 50, paint);
  paint.setTextAlign(Paint.Align.RIGHT);

  canvas.drawText("www.moovemtb.com", width-60, 50, paint);
  canvas.drawText("Head Angel App", width-60, 20, paint);

  canvas.drawPoint(30.0f, height/2, paint);
  return bmOverlay;
 }

Upvotes: 1

Qadir Hussain
Qadir Hussain

Reputation: 8856

Change the layout as

<Framelayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="7" >

<ImageView
    android:id="@+id/imgSelectedPhoto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="fitXY" />

<ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/txt_made_hawk_nelson"
    android:layout_centerInParent="true" />

set setDrawingCacheEnabled(true); and create bitmap from it as.

Bitmap bitmap;
// frmCaptureThis is the root framelayout (this contains your imageviews)
View v1 = frmCaptureThis; 
v1.setDrawingCacheEnabled(true);
bitmap = Bitmap.createBitmap(v1.getDrawingCache());
v1.setDrawingCacheEnabled(false);
saveImgToSDcard(bitmap); // function to saves the image to sd card

Upvotes: 1

Budius
Budius

Reputation: 39836

You have the right idea. The canvas would be the simplest way of doing it.

But you have to understand first that those ImageViews are only on-screen representation and to create a Bitmap with those two images over-layered have little to do with the on-screen representation of it.

As in memory representations of the images you'll have Drawables (which are pre-scaled according to the screen size so their size will vary from device to device as per ldpi, mdpi, hdpi and xhdpi folders) and Bitmaps, which are absolute representations.

And all that I just said will vary as per your application and I won't be giving you the exact solution but explain you all the concepts:

Just as example, let's say you have both the background and the text as Bitmaps object, so your code would be:

// Init our overlay bitmap
Bitmap bmp = backgroundBitmap.copy(Bitmap.Config.ARGB_8888, true);
// Init the canvas
Canvas canvas = new Canvas(bmp);
// Draw the text on top of the canvas
canvas.drawBitmap(textBitmap, 0, 0, null);

// now bmp have the two overlayed:

you can (and should) do some math and use the values 0, 0 from the drawBitmap() method to center the text on the canvas.

Alternatively, if you have a drawable (e.g. getResources.getDrawable(R.drawable.bkgr); ) you can use the draw() method to draw to the canvas and use the getIntrinsicHeight and getIntrinsicWidth to create the bitmap using this method

happy coding!

Upvotes: 1

Related Questions