I am creating an app with ListView like that of Google Hangout. The list item consists of Imageview on the left and some text on the right. See the image below.
I don't know how to show these images. When there is single person i want to show only one circular. However, if there are more persons I want to show images as per above photograph. Please help me out. How can I do this?
I solved this problem myself.
There are two ways to solve this problem.
Use canvas to generate a Bitmap will be a combined bitmap of all the images. Below is the code for generating Bitmap of four people (four circles).
public static Bitmap customImageFour(Context context, Bitmap[] bitmaps, int size) {
Bitmap bmp1 = Bitmap.createScaledBitmap(bitmaps[0], size/2, size/2, false);
Bitmap bmp2 = Bitmap.createScaledBitmap(bitmaps[1], size/2, size/2, false);
Bitmap bmp3 = Bitmap.createScaledBitmap(bitmaps[2], size/2, size/2, false);
Bitmap bmp4 = Bitmap.createScaledBitmap(bitmaps[3], size/2, size/2, false);
Bitmap.Config conf = Bitmap.Config.ARGB_8888;
Bitmap bitmap1 = Bitmap.createBitmap(bmp1);
bitmap1 = getRoundedCornerBitmap(bitmap1, bitmap1.getWidth()/2);
Bitmap bitmap2 = Bitmap.createBitmap(bmp2);
bitmap2 = getRoundedCornerBitmap(bitmap2, bitmap2.getWidth()/2);
Bitmap bitmap3 = Bitmap.createBitmap(bmp3);
bitmap3 = getRoundedCornerBitmap(bitmap3, bitmap3.getWidth()/2);
Bitmap bitmap4 = Bitmap.createBitmap(bmp4);
bitmap4 = getRoundedCornerBitmap(bitmap4, bitmap4.getWidth()/2);
Bitmap finalBitmap = Bitmap.createBitmap(size, size, conf);
Canvas canvas = new Canvas(finalBitmap);
canvas.drawBitmap(bitmap1, 0f, 0f, null);
canvas.drawBitmap(bitmap2, bitmap1.getWidth(), 0f, null);
canvas.drawBitmap(bitmap3, 0f, bitmap1.getHeight(), null);
canvas.drawBitmap(bitmap4, bitmap1.getWidth(), bitmap1.getHeight(), null);
return finalBitmap;
}
Another way is, instead of using single ImageView you can use a RelativeLayout and add ImageViews in it through code. If there are two people then create two ImageViews and add them in the layout, if there are four people then create four ImageViews and add them in the layout.
Related
I am developing an Android application for image processing. In that, I first need to generate an ortho image by stitching 100+ images together. I have tried it in Android using Bitmap and Canvas. I first did it for 3 images. Is it the right way to generate an ortho or is there any better solution for this? Here is the code that I have used for stitching 3 images:
private void joinImages(File first, File second , File third) throws IOException
{
Bitmap bmp1, bmp2, bmp3;
bmp1 = BitmapFactory.decodeFile(first.getPath());
bmp2 = BitmapFactory.decodeFile(second.getPath());
bmp3 = BitmapFactory.decodeFile(third.getPath());
int height = bmp1.getHeight()+bmp2.getHeight()+bmp3.getHeight();
String height1 = height+"";
Log.d(height1,"heght");
Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bmp1, 0, 0, null);
canvas.drawBitmap(bmp2, bmp1.getHeight(), 0, null);
canvas.drawBitmap(bmp3,bmp1.getHeight()+bmp2.getHeight() , 0, null);
FileOutputStream out = new FileOutputStream("/storage/emulated/0/DCIM/final.jpg");
bmOverlay.compress(Bitmap.CompressFormat.JPEG, 80, out);
out.close();
}
As I am new to Android as well as image processing, I also want to know the difference between image stitching and 2D-orthomosaic generation. Kindly help me with this issue.
I have a png image which I want to use as a frame for images in ImageView.
Sorry, it's white that's why invisible
Like this but with sides curved
What is the solution?
I've tried by converting png to patch 9, setting background of parent and source of image view, but none worked. Image doesn't fit inside.
I've done it using PorterDuff. Designed an extra image just with curved border and applied PorterDuff.Mode.SRC_OVER inside setImageResource of Custom Image View.
Here is the overriden function
#Override
public void setImageResource(int resId) {
Bitmap rawBmp = BitmapFactory.decodeResource(getContext().getResources(), resId);
Bitmap rawMask = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image_frame_arc_filled);
Bitmap rawBorderMask = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.image_frame_arc);
Bitmap bmp = Bitmap.createScaledBitmap(rawBmp, rawBmp.getWidth(), rawBmp.getHeight(), true);
Bitmap mask = Bitmap.createScaledBitmap(rawMask, bmp.getWidth(), bmp.getHeight(), true);
Bitmap borderMask = Bitmap.createScaledBitmap(rawBorderMask, mask.getWidth(), mask.getHeight(), true);
Bitmap bitmap = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(bmp, 0, 0, null);
Paint maskPaint = new Paint();
maskPaint.setXfermode(
new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(mask, 0, 0, maskPaint);
maskPaint = new Paint();
maskPaint.setXfermode(
new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
canvas.drawBitmap(borderMask, 0, 0, maskPaint);
this.setImageBitmap(bitmap);
}
How to mask image such as we can scale/zoom/rotate the background image but not the mask?
I should be able to zoom the image in this mask but it is scaling whole image.
Suggest me a way to achieve this, I'm creating a photo collage app.
Blue color is background of Layout.
The white color is for mask
I'm able to achieve this type of layout with masking, but when I apply MultiTouchListener to scale and zoom, it will scale the whole image with mask and not the image inside it.
private void getMaskedBitmap() {
Bitmap bgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.background_drawable);
ImageView bg = (ImageView) findViewById(R.id.bg);
bg.setImageBitmap(bgBitmap);
Bitmap.Config conf = Bitmap.Config.ARGB_8888;
Bitmap emptyBitmap = Bitmap.createBitmap(bgBitmap.getWidth(), bgBitmap.getHeight(), conf);
Canvas canvasBmp = new Canvas(bgBitmap);
ImageView mImageView = (ImageView) findViewById(R.id.troll_face);
Bitmap original = BitmapFactory.decodeResource(getResources(), R.drawable.random_drawable);
Bitmap mask = BitmapFactory.decodeResource(getResources(), R.drawable.mask_drawable);
original = Bitmap.createScaledBitmap(original, mask.getWidth(), mask.getHeight(), true);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(), Config.ARGB_8888);
Canvas mCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mCanvas.drawBitmap(original, 0, 0, null);
mCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
mImageView.setImageBitmap(result);
//mImageView.setScaleType(ScaleType.FIT_XY);
mImageView.setBackgroundResource(R.drawable.background_drawable);
bg.setOnTouchListener(new MultiTouchListener());
mImageView.invalidate();
}
Exception on line
Canvas canvasBmp = new Canvas(bgBitmap);
java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor
I cannot provide you code but here is what you should do:
Get background image as bitmap and draw it on view's canvas.
Create an new (empty) bitmap of same size (use Bitmap.Config.ARGB_8888) and get its canvas, here you will draw mask.
Canvas canvasBmp = new Canvas(bmp);
Now draw bmp on view's canvas. So, that you can get mask effect on image.
Zoom (re-size etc whatever you want) background bitmap image.
Invalidate your view, and follow all steps again
I have a two image one image is containing body without face and one image contain with face only...
now I want to merge this two images.... the first image which contain only body without face is in that the face is transparent.....
So how can I detect that transparent area and place face over there in transparent area?
I am combining two images with below code.. but it is not proper way to place face over transparent area
My code is given below,
public Bitmap combineImages(Bitmap c, Bitmap s) {
Bitmap cs = null;
int width, height = 0;
if (c.getWidth() > s.getWidth()) {
width = c.getWidth() + s.getWidth();
height = c.getHeight();
} else {
width = s.getWidth() + s.getWidth();
height = c.getHeight();
}
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
comboImage.drawBitmap(c, 0f, 0f, null);
comboImage.drawBitmap(s, 0f, 0f, null);
return cs;
}
Merge two or more images in android by using Canvas its simple to merge image by using below code,
first create bitmap for particular image which you want to merge it.
get X and Y axis position for which area you want to merge images.
mComboImage = new Canvas(mBackground);
mComboImage.drawBitmap(c, x-axis position in f, y-axis position in f, null);
mComboImage.drawBitmap(c, 0f, 0f, null);
mComboImage.drawBitmap(s, 200f, 200f, null);
mBitmapDrawable = new BitmapDrawable(mBackground);
Bitmap mNewSaving = ((BitmapDrawable)mBitmapDrawable).getBitmap();
set this new bitmap in imageview.
imageView.setImageBitmap(mNewSaving);
Here in this method two image bitmap combine in one bitmap which return bitmap of new merge image.Also save this image on sdcard.As below code
public Bitmap combineImages(Bitmap c, Bitmap s) {
Bitmap cs = null;
int width, height = 0;
if(c.getWidth() > s.getWidth()) {
width = c.getWidth();
height = c.getHeight() + s.getHeight();
} else {
width = s.getWidth();
height = c.getHeight() + s.getHeight();
}
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
comboImage.drawBitmap(c, new Matrix(), null);
comboImage.drawBitmap(s, new Matrix(), null);
// this is an extra bit I added, just incase you want to save the new image somewhere and then return the location.
return cs;
}
}
Here is the proper way to merge two bitmaps:
public Bitmap combineImages(Bitmap topImage, Bitmap bottomImage) {
Bitmap overlay = Bitmap.createBitmap(bottomImage.getWidth(), bottomImage.getHeight(), bottomImage.getConfig());
Canvas canvas = new Canvas(overlay);
canvas.drawBitmap(bottomImage, new Matrix(), null);
canvas.drawBitmap(topImage, 0, 0, null);
return overlay;
}
I have some question about water mark within android code!
Following code showed my idea about WaterMark!
However,It does not work normally.
e.g. only the image end with .png can be watered mark
Is there a scheme about water mark(.jpeg, .jpg, .wbmp, .bmp, .png or others)
protected static Bitmap getDrmPicture(Context context,String path){
BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
Bitmap originMap = BitmapFactory.decodeFile (path,options);
Bitmap waterMark = BitmapFactory.decodeResource(context.getResources(), R.drawable.close);
InputStream input;
byte[] b;
Bitmap waterMark = null;
try {
input = context.getResources().openRawResource(R.drawable.lock);
b = new byte[input.available()];
input.read(b);
waterMark = DecodeUtils.requestDecode(jc, b, null);
}catch(IOException e){
}
int w = originMap.getWidth();
int h = originMap.getHeight();
int ww = waterMark.getWidth();
int wh = waterMark.getHeight();
Bitmap newb = Bitmap.createBitmap(w, h,Bitmap.Config.ARGB_8888;);
Canvas cv = new Canvas(newb);
cv.drawBitmap(originMap, 0, 0, null);
cv.drawBitmap(waterMark, w - ww, h - wh, null);
cv.save(Canvas.ALL_SAVE_FLAG);
cv.restore();
return newb;
}
Thanks !
This is the code I use to apply watermark to a jpeg, it should work for you too,
public Bitmap applyWatermarkColorFilter(Drawable drawable) {
Bitmap image = ((BitmapDrawable)drawable).getBitmap();
Bitmap result = Bitmap.createBitmap(image.getWidth(), image.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(result);
canvas.drawBitmap(image, 0, 0, null);
Bitmap watermark = BitmapFactory.decodeResource(getResources(), R.drawable.watermark);
canvas.drawBitmap(watermark, image.getWidth()/2 - watermark.getWidth()/2,
image.getHeight()/2 - watermark.getHeight()/2,
null);
return result;
}
Basically after this u have to use Bitmap.compress(<arguments>) to get a jpg out of it.
Din't try for the other formats. May be it might be possible if you can extract the Bitmap out of them like how we do for jpg and png.
https://stackoverflow.com/questions/6756975/draw-multi-line-text-to-canvas
Measure height of multiline text
To center text vertically we need to know text height. Instantiate StaticLayout with text width according to your needs, for us it is simple the width of Bitmap/Canvas minus 16dp padding. The getHeight() then returns height of text.
Positioning text on Canvas
There are four simple steps to position text on Canvas:
Save the current matrix and clip with Canvas.save().
Apply translation to Canvas matrix with Canvas.translate(x,y).
Draw StaticLayout on Canvas with StaticLayout.draw(canvas).
Revert matrix translation with Canvas.restore() method.