combine two images which is overlay - java

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
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

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!

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

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;
}

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");

Related

How can I put the contents of Layout 1 as the background of Layout 2?

In the first layout, several text views and image views are set. How can I set the background of the second layout with the image I capture from the first layout by clicking a button?
I used this code
binding.cardLAYOUT.setDrawingCacheEnabled(true);
binding.cardLAYOUT.buildDrawingCache();
Bitmap bitmap =
Bitmap.createBitmap(binding.cardLAYOUT.getWidth(),
binding.cardLAYOUT.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Drawable bgDrawable = binding.cardLAYOUT.getBackground();
bgDrawable.draw(canvas);
binding.cardLAYOUT.draw(canvas);
BitmapDrawable drawable = new BitmapDrawable(getResources(), bitmap);
binding.cardbacklayout.setBackground(drawable);

Android: How to make a percentage of a bitmap black and white, retaining color in the rest?

I've got a bitmap displayed in an ImageView, and I want to be able to make a certain percentage of the image black and white, and have the other part retain it's color. For example, if 60% is the target percentage, the image would look like this: . Thanks.
I've got a bitmap displayed in an ImageView, and I want to be able to
make a certain percentage of the image black and white, and have the
other part retain it's color. For example, if 60% is the target
percentage.
It seems (from your image) you mean monochrome (i.e. greyscale), not black and white.
Something like this should do it (tested o.k.):
void doIt(ImageView image)
{
//get bitmap from your ImageView (image)
Bitmap originalBitmap = ((BitmapDrawable)image.getDrawable()).getBitmap();
int height = originalBitmap.getHeight();
int fortyPercentHeight = (int) Math.floor(height * 40.0 / 100.0);
//create a bitmap of the top 40% of image height that we will make black and white
Bitmap croppedBitmap = Bitmap.createBitmap(originalBitmap, 0, 0, originalBitmap.getWidth() , fortyPercentHeight );
//make it monochrome
Bitmap blackAndWhiteBitmap = monoChrome(croppedBitmap);
//copy the monochrome bmp (blackAndWhiteBitmap) to the original bmp (originalBitmap)
originalBitmap = overlay(originalBitmap, blackAndWhiteBitmap);
//set imageview to new bitmap
image.setImageBitmap(originalBitmap );
}
Bitmap monoChrome(Bitmap bitmap)
{
Bitmap bmpMonochrome = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmpMonochrome);
ColorMatrix ma = new ColorMatrix();
ma.setSaturation(0);
Paint paint = new Paint();
paint.setColorFilter(new ColorMatrixColorFilter(ma));
canvas.drawBitmap(bitmap, 0, 0, paint);
return bmpMonochrome;
}
Bitmap overlay(Bitmap bmp1, Bitmap bmp2)
{
Bitmap bmp3 = bmp1.copy(Bitmap.Config.ARGB_8888,true);//mutable copy
Canvas canvas = new Canvas(bmp3 );
canvas.drawBitmap(bmp2, new Matrix(), null);
return bmp3 ;
}

Android Converting Ninepatch Resource To Bitmap

I have a 9 patch drawable as XML. When I try to use BitmapFactory.decode to get bitmap out of it, it returns null. Is there anyway to get a bitmap from this resource?
nine_patch.xml:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/empty_icon_video" >
</nine-patch>
and the code is:
BitmapFactory.decodeResource(mResources, resId);
Bitmap bmp = Bitmap.createBitmap(yourWidth, yourHeight, Bitmap.Config.ARGB_8888);
Drawable drawable = getResources().getDrawable(R.drawable.resId);
Canvas canvas = new Canvas(bmp);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
Try this. Now the bitmap will be having the ninepatch drawn over it. You can supply a different width and height.
You need to use a NinePatchDrawable API here -
NinePatchDrawable npDrawable = (NinePatchDrawable)getResources().getDrawable(R.drawable.empty_icon_video);

How can I crop a bitmap for ImageView?

I know this should be simple , but android:scaleType="centerCrop" doesn't crop Image
I got image 1950 pixels wide and need it to be cropped by parent's width. But android:scaleType="centerCrop" doesn't crop Image. What do I need to do in layout to show only first 400 pixels, for instance or whatever screen/parent width is
Sorry for simple question - tried to Google it - only complicated questions there. And I'm new, so don't downvote please)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rl1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color">
<ImageView
android:id="#+id/ver_bottompanelprayer"
android:layout_width="match_parent"
android:layout_height="227px"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:scaleType="matrix"
android:background="#drawable/ver_bottom_panel_tiled_long" />
</RelativeLayout>
if there's only way is to programmaticaly crop it - please give me an advice with a method
Alright, I will paste the comment as answer :) ->
RelativeLayout rl = (RelativeLayout) findViewById(R.id.rl1);
final Options bitmapOptions=new Options();
DisplayMetrics metrics = getResources().getDisplayMetrics();
bitmapOptions.inDensity = metrics.densityDpi;
bitmapOptions.inTargetDensity=1;
/*`final` modifier might be necessary for the Bitmap*/
Bitmap bmp= BitmapFactory.decodeResource(getResources(), R.drawable.ver_bottom_panel_tiled_long, bitmapOptions);
bmp.setDensity(Bitmap.DENSITY_NONE);
bmp = Bitmap.createBitmap(bmp, 0, 0, rl.getWidth(), bmp.getHeight());
Then in the code:
ImageView iv = (ImageView)v.findViewById(R.id.ver_bottompanelprayer);
if (iv != null){
iv.setImageBitmap(bmp);
}
Cheers :)
You can also crop image by programmatically using createBitmap.
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
bm = Bitmap.createBitmap(bm, 0, 0, 400, 400);
your_imageview.setImageBitmap(bm);
Here 400 is your width & height you can change as per your requirement.
Make it android:scaleType="fitStart" and for android:layout_height="400px"
You can do this programmatically (this ensures you get the right height/width):
ImageView image = (ImageView) findVieById(R.id.ver_bottompanelprayer);
DisplayMetrics dm = getResources().getDisplayMetrics();
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(1950, dm.heightPixels);
params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
image.setLayoutParams(params);
image.setScaleType(ScaleType.FIT_XY);

how to merge Android canvas?

I was wondering, how do I merge/join Android canvases. In the code below I have cnv_left which contains a left part of a button. cnv_center contains the center part. And cnv_text contains text.
What I need is to merge them all in cnv_joined , so that
cnv_left would go first.
then cnv_center.
cnv_text would be in center of cnv_center.
and a flipped cnv_left would be the last.
Here's my code so far:
public void drawButt()
{
float buttonScale = 1.0f; /// general button scale ratio
float buttonScaleCnt = 6.0f; /// button's center part stretch ratio
LinearLayout LinLay = (LinearLayout)findViewById(R.id.linearLayout1);
ImageView iv1 = new ImageView(this);
Bitmap bit_left = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_left = new Canvas(bit_left);
cnv_left.scale(buttonScale,buttonScale);
SVG svg_left = SVGParser.getSVGFromResource(getResources(), R.raw.btleft);
Picture picture_left = svg_left.getPicture();
picture_left.draw(cnv_left);
Bitmap bit_center = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_center = new Canvas(bit_center);
cnv_center.scale(buttonScaleCnt, buttonScale);
SVG svg_center = SVGParser.getSVGFromResource(getResources(), R.raw.btcnt);
Picture picture_cnt = svg_center.getPicture();
picture_cnt.draw(cnv_center);
Bitmap bit_text = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
Canvas cnv_text = new Canvas(bit_text);
cnv_text.scale(buttonScale, buttonScale);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(Color.WHITE); paint.setTextSize(20);
cnv_text.drawText("R", 2, 30, paint);
Bitmap bit_joined = Bitmap.createBitmap(200, 200, Bitmap.Config.ARGB_8888);
Canvas cnv_joined = new Canvas(bit_joined);
/// somehow need to somehow join the above canvases into this cnv_joined...
iv1.setImageBitmap(bit_joined);
iv1.setPadding(5, 5, 5, 5);
LinLay.addView(iv1);
}
Any ideas? Oh, and one more thing, when I create empty bitmaps for my canvas ( Bitmap.createBitmap(100, 100... ), does it matter what size I give them? If yes, where should I get the correct sizes for them?
Thanks!
Size of Bitmaps matter. If you do Picture.draw to canvas smaller than Picture, image will be cropped to size of bitmap.
Call SVG.getBounds to get bounds and put them in Bitmap constructor.
To join Bitmaps together you have to draw bit_left, bit_center and bit_text on cnv_joined using drawBitmap.
Better way will be to draw SVGs and text directly on cnv_joined.

Categories