I have an image of a floor plan displayed on screen, My Question how do I overlay another image on that.
see the image from another thread where I asked a how to here
/**
* floor plan drawing.
*
* #param canvas the canvas on which the background will be drawn
*/
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Bitmap temp = BitmapFactory.decodeResource(getResources(), R.drawable.floorplan);
image= Bitmap.createScaledBitmap(temp, canvas.getWidth(), canvas.getHeight(), true);
canvas.drawBitmap(image, 0, 0, null);
}
What about adding the second image over the first one?
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Bitmap temp = BitmapFactory.decodeResource(getResources(), R.drawable.floorplan);
image = Bitmap.createScaledBitmap(temp, canvas.getWidth(), canvas.getHeight(), true);
canvas.drawBitmap(image, 0, 0, null);
Bitmap over = BitmapFactory.decodeResource(getResources(), R.drawable.overlay);
image = Bitmap.createScaledBitmap(over, canvas.getWidth(), canvas.getHeight(), true);
canvas.drawBitmap(image, 0, 0, null);
}
This is my method, to overlay two images into an ImageView:
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Using this method:
public static Bitmap overlayBitmap(Bitmap bitmapBackground, Bitmap bitmapImage) {
int bitmap1Width = bitmapBackground.getWidth();
int bitmap1Height = bitmapBackground.getHeight();
int bitmap2Width = bitmapImage.getWidth();
int bitmap2Height = bitmapImage.getHeight();
float marginLeft = (float) (bitmap1Width * 0.5 - bitmap2Width * 0.5);
float marginTop = (float) (bitmap1Height * 0.5 - bitmap2Height * 0.5);
Bitmap overlayBitmap = Bitmap.createBitmap(bitmap1Width, bitmap1Height, bitmapBackground.getConfig());
Canvas canvas = new Canvas(overlayBitmap);
canvas.drawBitmap(bitmapBackground, new Matrix(), null);
canvas.drawBitmap(bitmapImage, marginLeft, marginTop, null);
return overlayBitmap;
}
get the references and bitmaps to make de overlay!
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Bitmap background = BitmapFactory.decodeResource(getResources(), R.drawable.background);
Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.androide);
Bitmap bmpImages = overlayBitmap(background, image);
imageView.setImageBitmap(bmpImages);
to have this as a result:
Download the complete sample.
Related
now I am getting only one Text over the image I am using Canvas and Bitmap :
here is my code :
public Bitmap drawTextArrayToBitmap(Context mContext, int resourceId,String mText) {
try {
Resources resources = mContext.getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap = BitmapFactory.decodeResource(resources, resourceId);
android.graphics.Bitmap.Config bitmapConfig = bitmap.getConfig();
if(bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.rgb(110,110, 110));
paint.setTextSize((int) (12 * scale));
paint.setShadowLayer(1f, 0f, 1f, Color.DKGRAY);
Rect bounds = new Rect();
paint.getTextBounds(mText, 0, mText.length(), bounds);
/* int x = (bitmap.getWidth() - bounds.width())/6;
int y = (bitmap.getHeight() + bounds.height())/5;*/
int x = 100, y = 100;
for(int i=0;i<20;i++)
{
canvas.drawText(mText, x * scale, y * scale, paint);
}
return bitmap;
} catch (Exception e) {
// TODO: handle exception
return null;
}
}
inside oncreate ;
ImageView mImageView = (ImageView)findViewById(R.id.imageView1);
// Bitmap bmp =drawTextToBitmap(this,R.drawable.man,"Hello Android");
Bitmap bmp =drawTextArrayToBitmap(this,R.drawable.man,"Smile");
mImageView.setImageBitmap(bmp);
In this above code, I want to add multiple texts on random position over Image and different style I have tried much time I could not get succeed yet. I have tried inside loop also.
Thank you in Advance I would appreciate your effort
here is my code :
ImageView mImageView = (ImageView)findViewById(R.id.imageView1);
// Bitmap bmp =drawTextToBitmap(this,R.drawable.man,"Hello Android");
Bitmap bmp =drawTextArrayToBitmap(this,R.drawable.man,"Smile");
mImageView.setImageBitmap(bmp);
now here is my method :
public Bitmap drawTextArrayToBitmap(Context mContext, int resourceId,String mText) {
try {
Resources resources = mContext.getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap = BitmapFactory.decodeResource(resources, resourceId);
android.graphics.Bitmap.Config bitmapConfig = bitmap.getConfig();
if(bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.rgb(110,110, 110));
paint.setTextSize((int) (12 * scale));
paint.setShadowLayer(1f, 0f, 1f, Color.DKGRAY);
Rect bounds = new Rect();
paint.getTextBounds(mText, 0, mText.length(), bounds);
/* int x = (bitmap.getWidth() - bounds.width())/6;
int y = (bitmap.getHeight() + bounds.height())/5;*/
int x = 100, y = 100;
for(int i=0;i<20;i++)
{
canvas.drawText(mText, x * scale, y * scale, paint);
}
return bitmap;
} catch (Exception e) {
// TODO: handle exception
return null;
}
}
}
I am working on an android application like image filter I want to make an image like this after using a filter over an image
After searching on StackOverflow I got this solution only and this is not like as I want to implement: I got like this
canvas.drawText("This is", 100, 100, mTextPaint);
canvas.drawText("multi-line", 100, 150, mTextPaint);
canvas.drawText("text", 100, 200, mTextPaint);
I do not want to do like this : please help me I would approciate your answers and suggestion
I have an ImageView. I have done some manipulation to make it circular. All is good. But, I realize that the image is not centered. Apparently, the image is positioned from the top left of the ImageView. How can I make this image centered to the circular ImageView?
Here is my code:
// Decode the Byte[] into bitmap
Bitmap bmp = BitmapFactory.decodeByteArray(data, 0, data.length);
// Set the Bitmap into the imageView
mImage.setImageBitmap(bmp);
//circle img
int wbmp = bmp.getWidth();
int hbmp = bmp.getHeight();
int diameter;
if (wbmp > hbmp) {
diameter = hbmp;
} else {
diameter = wbmp;
}
Bitmap resized = Bitmap.createScaledBitmap(bmp, wbmp, hbmp, true);
Bitmap conv_bm = ImageHelper.getRoundedRectBitmap(resized, diameter);
mImage.setImageBitmap(conv_bm);
// TODO Auto-generated method stub
//circle img ends
and this is the ImageHelper:
public class ImageHelper {
//circle image
public static Bitmap getRoundedRectBitmap(Bitmap bitmap, int radius) {
Bitmap result = null;
try {
Bitmap sbitmap;
if(bitmap.getWidth() != radius || bitmap.getHeight() != radius) sbitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,false);
else sbitmap = bitmap;
result = Bitmap.createBitmap(sbitmap.getWidth(), sbitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(result);
int color = 0xff424242;
Paint paint = new Paint();
Rect rect = new Rect(0, 0, sbitmap.getWidth(), sbitmap.getHeight());
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawCircle(sbitmap.getWidth() / 2, sbitmap.getHeight() / 2,
sbitmap.getWidth() / 2, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
} catch (NullPointerException e) {
} catch (OutOfMemoryError o) {
}
return result;
}
//circle image ends
}
I want to add a string on bitmap image.I have a metod drawTextToBitmap,this method working success place string on bitmap image.But my bitmap image is very small like pinmark image.This function set the string based on the bitmap height and width.I want to place the string exceed than the bitmap image.So Please help me to solve the problem.
Following method i am using to get bitmap :
public Bitmap drawTextToBitmap(Context gContext, int gResId, String gText) {
Resources resources = gContext.getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap = BitmapFactory.decodeResource(resources, gResId);
android.graphics.Bitmap.Config bitmapConfig = bitmap.getConfig();
// set default bitmap config if none
if (bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
// resource bitmaps are imutable,
// so we need to convert it to mutable one
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
// new antialised Paint
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
// text color - #3D3D3D
paint.setColor(Color.BLACK);
// text size in pixels
paint.setTextSize((int) (70 * scale));
// text shadow
paint.setShadowLayer(1f, 0f, 1f, Color.BLACK);
// draw text to the Canvas center
Rect bounds = new Rect();
paint.getTextBounds(gText, 0, gText.length(), bounds);
int m = (bitmap.getWidth() - bounds.width()) / 2;
int l = (bitmap.getHeight() + bounds.height()) / 2;
canvas.drawText(gText, 1000, l, paint);
return bitmap;
}
Try this:
public static Bitmap drawStringonBitmap(Bitmap src, String string, Point location, int color, int alpha, int size, boolean underline,int width ,int height) {
Bitmap result = Bitmap.createBitmap(width, height, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setColor(color);
paint.setAlpha(alpha);
paint.setTextSize(size);
paint.setAntiAlias(true);
paint.setUnderlineText(underline);
canvas.drawText(string, location.x, location.y, paint);
return result;
}
I am trying to overlay 2 images on on top of other.
One image i getting from other class:
Bitmap bitmap = (Bitmap) intent.getParcelableExtra("BitmapImage");
The other image is from drawable:
Bitmap icon = BitmapFactory.decodeResource(getApplicationContext().getResources(),R.drawable.topshow);
Then I get the overlay:
Bitmap overLay = (overlay(bitmap,icon));
Overlay func:
public static Bitmap overlay(Bitmap bmp1, Bitmap bmp2)
{
Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), bmp1.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, new Matrix(), null);
canvas.drawBitmap(bmp2, 0, 0, null);
return bmOverlay;
}
And save the overlay as jpg:
overLay.compress(Bitmap.CompressFormat.JPEG, 80,new FileOutputStream(file_name + ".jpg"));
The problem is the image I get look not so good. On the border of the overlay image is interference and it looks like low quality.
Both images are 288x384. They both look good before the overlay. What can you suggest me?
Try this code. I hope it will help you.
Bitmap bMap = null;
Bitmap tempbMap = null;
tempbMap = Constants.wholeBitmap;
bMap = Bitmap.createScaledBitmap(tempbMap, 320, 320, true);
int BORDER_WIDTH = 0;
int BORDER_COLOR = Color.parseColor("#00000000");
Bitmap res = Bitmap.createBitmap(bMap.getWidth() + 2 * BORDER_WIDTH,
bMap.getHeight() + 2 * BORDER_WIDTH,
bMap.getConfig());
Canvas c = new Canvas(res);
Paint p = new Paint();
p.setColor(BORDER_COLOR);
c.drawRect(0, 0, res.getWidth(), res.getHeight(), p);
p = new Paint(Paint.FILTER_BITMAP_FLAG);
c.drawBitmap(bMap, BORDER_WIDTH, BORDER_WIDTH, p);
Bitmap bMapFinal = Bitmap.createBitmap(res, 0, 0, res.getWidth(), res.getHeight(), null, true);
Bitmap bitmapOverlay = BitmapFactory.decodeResource(getResources(), R.drawable.overlay_3_large);
int width = 293;
int height = 55;
int w = (int) (bMapFinal.getWidth()/2);
int h = (int) ((w * height) / width);
Bitmap scaled = Bitmap.createScaledBitmap(bitmapOverlay, w, h, true);
c.drawBitmap(scaled, bMapFinal.getWidth() - scaled.getWidth(), bMapFinal.getHeight() - scaled.getHeight(), p);
Bitmap bMapFinal_new = Bitmap.createBitmap(res, 0, 0, res.getWidth(), res.getHeight(), null, true);
ivImageMain.setImageBitmap(null);
ivImageMain.destroyDrawingCache();
Constants.finalBitmapForShare = bMapFinal_new;
ivImageMain.setImageBitmap(bMapFinal_new);
Thank you.