Overlay Bitmap over another Android - android

hello guys i'm trying to get an image(Frame from resources) to overlay it over the original bitmap. so far i couldn't make my Bitmap goes into the frame as the frame always empty. the original bitmap is now showing inside the frame.
here is my code that i'm using to accomplish this.
Canvas canvas = new Canvas();
Bitmap border = null;
Bitmap scaledBorder = null;
border = BitmapFactory.decodeResource(getResources(), R.drawable.frame1);
int width = bmp.getWidth();
int height = bmp.getHeight();
scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0, new Paint());
view.setImageBitmap(scaledBorder);
bmp as my original Bitmap from Gallery or Camera. i can't find away to put them together. only the frame will appear but not the bmp.
thanks in advance.

thanks man i figured it out by own. using this
void hm1(){
Bitmap border = BitmapFactory.decodeResource(getResources(), R.drawable.vignette2);
int width = bmp.getWidth();
int height = bmp.getHeight();
change = Bitmap.createScaledBitmap(change, width, height, false);
Canvas canvas = new Canvas(change);
Bitmap scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0,null);
//canvas.drawBitmap(k, 0, 0, null);
view.setImageBitmap(change);
}
by adding this method on any click button , menu etc you can draw two bitmaps over each other.
P.S : Bitmap change is another bitmap from the original one as i don't want the user to apply the Overlay on the original method but on the changed one.
hope the answer helps someone. thanks

Bottom line, first you need to add your original image to the canvas, then the border, then place the canvas on the view. Your best bet is to do this in an onDraw() method. Something like this should work:
#Override
void onDraw (Canvas canvas)
{
canvas.drawBitmap(bmp,0,0,new Paint())
Bitmap border = null;
Bitmap scaledBorder = null;
border = BitmapFactory.decodeResource(getResources(), R.drawable.frame1);
int width = bmp.getWidth();
int height = bmp.getHeight();
scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0, new Paint());
}
Alternatively, you could call the draw() function from the view.
canvas.drawBitmap(bmp,0,0,new Paint())
Bitmap border = null;
Bitmap scaledBorder = null;
border = BitmapFactory.decodeResource(getResources(), R.drawable.frame1);
int width = bmp.getWidth();
int height = bmp.getHeight();
scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0, new Paint());
view.draw(canvas);

Related

Android magnify view and draw as bitmap

I've a camera and from this I take a photo and save a bitmap. Overlayed to this, there's a view pager, with different layouts. When I take a photo, I want to save the current overlayed layout too.
The problem is that photo and layout are both saved, the layout fix correctly in the bitmap area, but it's smaller in respect as was in the preview camera. I need to magnify the layout (to look as it was before to the photo) and to save it in my bitmap.
Before to take photo:
After (it's ok that the button is still there, it's just a test):
My code:
Bitmap cameraBitmap = BitmapFactory.decodeByteArray
(data, 0, data.length);
int wid = cameraBitmap.getWidth();
int hgt = cameraBitmap.getHeight();
bitmap = Bitmap.createBitmap
(wid, hgt, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(cameraBitmap, 0f, 0f, null);
ViewPager pager = (ViewPager) main_activity.findViewById(R.id.pager);
ScreenSlidePagerAdapter a = (ScreenSlidePagerAdapter) pager.getAdapter();
ScreenSlidePageFragment currFrag = (ScreenSlidePageFragment) a.instantiateItem(pager, a.getFocusedPage());
View currView = currFrag.getView();
Rect rect = new Rect();
rect.set(0, 0, wid, hgt);
//Measure the view at the exact dimensions (otherwise the text won't center correctly)
int widthSpec = View.MeasureSpec.makeMeasureSpec(rect.width(), View.MeasureSpec.EXACTLY);
int heightSpec = View.MeasureSpec.makeMeasureSpec(rect.height(), View.MeasureSpec.EXACTLY);
currView.measure(widthSpec, heightSpec);
//Lay the view out at the rect width and height
currView.layout(0, 0, rect.width(), rect.height());
//Translate the Canvas into position and draw it
canvas.save();
canvas.translate(rect.left, rect.top);
currView.draw(canvas);
canvas.restore();
Why not create the bitmap with porportions. To do so, you need to create a Scalable Bitmap, and make the width like 1/4 of the screen and the height one fourth of the screen height.
To do so, first in the onCreate() method, also add in the following code to get the screenWidth and Height. -
metrics = getResources().getDisplayMetrics();
display = getWindowManager().getDefaultDisplay();
dpi = metrics.densityDpi;
size = new Point();
display.getSize(size);
screenWidth = size.x;
screenHeight = size.y;
To create a scalable bitmap use the following code, but remember to set the width and height values porportional such as the following --
public static int height = MainActivity.screenWidth* 4/10;
public static int width = MainActivity.screenWidth* 4/10;
bg = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
if (width + heigt > 0) {
bg = Bitmap.createScaledBitmap(bg,
(width), (heigt),
false);
}
Also, to make sure the drawable images stay in quality, make sure to create seperate drawable folders, such as 'xxhdpi,and hdpi.'Refer to http://developer.android.com/guide/practices/screens_support.html. Hope that helps. Good luck.
I created a new bitmap with the view and I merged it with the previous bitmap, the result was good:
Bitmap cameraBitmap = BitmapFactory.decodeByteArray
(data, 0, data.length);
int wid = cameraBitmap.getWidth();
int hgt = cameraBitmap.getHeight();
bitmap = Bitmap.createBitmap
(wid, hgt, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
canvas.drawBitmap(cameraBitmap, 0f, 0f, null);
ViewPager pager = (ViewPager) main_activity.findViewById(R.id.pager);
ScreenSlidePagerAdapter a = (ScreenSlidePagerAdapter) pager.getAdapter();
ScreenSlidePageFragment currFrag = (ScreenSlidePageFragment) a.instantiateItem(pager, a.getFocusedPage());
View currView = currFrag.getView();
Bitmap viewBitmap = CustomUtil.loadBitmapFromView(currView);
viewBitmap = Bitmap.createScaledBitmap(viewBitmap, wid, wid, false);
canvas.drawBitmap(viewBitmap, 0f, (hgt-wid)/2 /* to center my square view in my rectangular original bitmap */, null);
An utility method:
public static Bitmap loadBitmapFromView(View view) {
int width = view.getWidth();
int height = view.getHeight();
int measuredWidth = View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY);
int measuredHeight = View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY);
//Cause the view to re-layout
view.measure(measuredWidth, measuredHeight);
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
//Create a bitmap backed Canvas to draw the view into
Bitmap b = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
//Now that the view is laid out and we have a canvas, ask the view to draw itself into the canvas
view.draw(c);
return b;
}

How to take screenshot of visible area of horizontalscrollview in android?

I am working on an android app and I want to take screenshot of a visible area of horizontalscrollview. I am using below code for that :-
public Bitmap screenShot(View view) {
/*Rect rect = new Rect(0, 0,
mDiviceWidth , view.getHeight());*/
/*Rect rect = new Rect(view.getScrollX(), 0,
view.getScrollX() + mDiviceWidth , view.getHeight());*/
Rect scrollBounds = new Rect();
// view.getHitRect(scrollBounds);
// view.getDrawingRect(scrollBounds);
// view.getLocalVisibleRect(scrollBounds);
// view.getGlobalVisibleRect(scrollBounds);
view.getWindowVisibleDisplayFrame(scrollBounds);
Log.e("X Scrolled", ""+view.getScrollX());
Log.e("left", ""+scrollBounds.left);
Log.e("right", ""+scrollBounds.right);
Log.e("top", ""+scrollBounds.top);
Log.e("bottom", ""+scrollBounds.bottom);
/*view.setDrawingCacheEnabled(true);
Bitmap bitmap = view.getDrawingCache();*/
Bitmap bitmap = Bitmap.createBitmap(view.getWidth(),
view.getHeight(), Config.ARGB_8888);
/*float left,right,top,bottom;
left = view.getLeft();
right = mDiviceWidth;
top = 0;
bottom = view.getHeight();*/
Canvas canvas = new Canvas(bitmap);
// canvas.clipRect(left, top,
// right , bottom);
canvas.clipRect(scrollBounds);
view.draw(canvas);
// view.setDrawingCacheEnabled(false);
return bitmap;
}
Above code is taking the screenshot but returning wrong area. Some times it captures visible area but sometimes it captures the random area which is not visible or partial visible. I have already used
// view.getHitRect(scrollBounds);
// view.getDrawingRect(scrollBounds);
// view.getLocalVisibleRect(scrollBounds);
// view.getGlobalVisibleRect(scrollBounds);
methods but not getting the perfect result.
So please help me to resolve this issue.
Use this function:
private static Bitmap takeScreenShot(Activity activity) {
View view = activity.getWindow().getDecorView();
view.setDrawingCacheEnabled(true);
view.buildDrawingCache();
Bitmap b1 = view.getDrawingCache();
Rect frame = new Rect();
activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
int statusBarHeight = frame.top;
int width = activity.getWindowManager().getDefaultDisplay().getWidth();
int height = activity.getWindowManager().getDefaultDisplay().getHeight();
Bitmap b = Bitmap.createBitmap(b1, 0, statusBarHeight, width, height - statusBarHeight);
view.destroyDrawingCache();
return b;
}

Create bitmap overlay with some information

I've created a Bitmap [Thumbnail] which is fetched after picking a video from gallery.
Snippet:-
bm= ThumbnailUtils.createVideoThumbnail(currentFileUri.getPath(), MediaStore.Video.Thumbnails.MICRO_KIND);
I'm putting these bitmap in Gallery adapter which is meant from images only, tht's y i'm creating thumbnail of Video and putting there. But
I want to show some difference between image and video in Gallery Strip which can be done by overlaying VideoThumbnail with something like Play Option.
Tried to OverLay my Bitmap with Small Play Icon but it throws NullPointerException on Bitmap.CreateScaledBitmap(..)
Snippet:-
bm= ThumbnailUtils.createVideoThumbnail(currentFileUri.getPath(), MediaStore.Video.Thumbnails.MICRO_KIND);
Bitmap change = null;
Bitmap border = BitmapFactory.decodeResource(getResources(), android.R.drawable.ic_media_play);
int width = bm.getWidth();
int height = bm.getHeight();
change = Bitmap.createScaledBitmap(change, width, height, false);
Canvas canvas = new Canvas(change);
Bitmap scaledBorder = Bitmap.createScaledBitmap(border,width/2,height/2, false);
canvas.drawBitmap(scaledBorder, 0, 0,null);
Adding that newly Overlay Created bitmap on my adapter.
AddIPDActivity.this.data.add(bm);
Created Overlay BitMap with LayerDrawable
Bitmap on which overlay need to be done.
bm = ThumbnailUtils.createVideoThumbnail(currentFileUri.getPath(),MediaStore.Video.Thumbnails.MICRO_KIND);
LayerDrawable applied on Bitmap with custom image on it.
Resources r = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = new BitmapDrawable(bm);
layers[1] = r.getDrawable(android.R.drawable.ic_media_play);
LayerDrawable layerDrawable = new LayerDrawable(layers);
Added Bitmap on Gallery - Adapter.
this.data.add(drawableToBitmap(geSingleDrawable(layerDrawable))); //data is adapter for Gallery.
Converting LayerDrawable into BitMap:-
LayerDrawable -> Drawable -> BitMap
public static Drawable geSingleDrawable(LayerDrawable layerDrawable){
int resourceBitmapHeight = 136, resourceBitmapWidth = 153;
float widthInInches = 0.9f;
int widthInPixels = (int)(widthInInches * SmartConsultant.getApplication().getResources().getDisplayMetrics().densityDpi);
int heightInPixels = widthInPixels * resourceBitmapHeight / resourceBitmapWidth;
int insetLeft = 10, insetTop = 10, insetRight = 10, insetBottom = 10;
layerDrawable.setLayerInset(1, insetLeft, insetTop, insetRight, insetBottom);
Bitmap bitmap = Bitmap.createBitmap(widthInPixels, heightInPixels, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
layerDrawable.setBounds(0, 0, widthInPixels, heightInPixels);
layerDrawable.draw(canvas);
BitmapDrawable bitmapDrawable = new BitmapDrawable(SmartConsultant.getApplication().getResources(), bitmap);
bitmapDrawable.setBounds(0, 0, widthInPixels, heightInPixels);
return bitmapDrawable;
}
public static Bitmap drawableToBitmap (Drawable drawable) {
if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable)drawable).getBitmap();
}
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
}
u r getting NPE because
Bitmap change = null;
change = Bitmap.createScaledBitmap(change, width, height, false);
change is always null. U r passing a null value.So, before passing change as a parameter of createScaledBitmap(parameters) assign a bitmap to change after that call this
change = Bitmap.createScaledBitmap(change, width, height, false);

How to make bitmap transparent?

/**
* #param bitmap
* The source bitmap.
* #param opacity
* a value between 0 (completely transparent) and 255 (completely
* opaque).
* #return The opacity-adjusted bitmap. If the source bitmap is mutable it
* will be adjusted and returned, otherwise a new bitmap is created.
* Source : http://stackoverflow.com/questions/7392062/android-
* semitransparent-bitmap-background-is-black/14858913#14858913
*/
private Bitmap adjustOpacity(Bitmap bitmap, int opacity) {
Bitmap mutableBitmap = bitmap.isMutable() ? bitmap : bitmap.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(mutableBitmap);
int colour = (opacity & 0xFF) << 24;
canvas.drawColor(colour, PorterDuff.Mode.DST_IN);
return mutableBitmap;
}
Using adjustOpacity, I make ImageView's Bitmap be semi-transparent.
Bitmap newBitmap = adjustOpacity(orignalBitmap, 10);
view.setImageBitmap(newBitmap);
view.setBackgroundColor(Color.WHITE);
However, Imageview show more darkent before not white. How do I make a semi-transparent (white background) Imageview with Bitmap?
// Convert transparentColor to be transparent in a Bitmap.
public static Bitmap makeTransparent(Bitmap bit, Color transparentColor) {
int width = bit.getWidth();
int height = bit.getHeight();
Bitmap myBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
int [] allpixels = new int [ myBitmap.getHeight()*myBitmap.getWidth()];
bit.getPixels(allpixels, 0, myBitmap.getWidth(), 0, 0, myBitmap.getWidth(),myBitmap.getHeight());
myBitmap.setPixels(allpixels, 0, width, 0, 0, width, height);
for(int i =0; i<myBitmap.getHeight()*myBitmap.getWidth();i++){
if( allpixels[i] == transparentColor)
allpixels[i] = Color.alpha(Color.TRANSPARENT);
}
myBitmap.setPixels(allpixels, 0, myBitmap.getWidth(), 0, 0, myBitmap.getWidth(), myBitmap.getHeight());
return myBitmap;
}
The above code will take a Bitmap, and return a Bitmap where every pixel which the color is transparentColor is transparent. This works in API as low as level 8, and I have not tested it in any lower.
I typically use something like Color.RED to make my transparent pixels, because I don't use a lot of RED in my assets, but if I do it's a custom red color.
Making an existing bitmap transparent is too simple.
If you want to make your bitmap transparent before further drawing follow this.
if your bitmap is mBitmap then Just use:-
mBitmap.eraseColor(Color.TRANSPARENT)
Thats it. Good luck !!
Try this. Also note that setAlpha is in 0-255 range
//bmp is your Bitmap object
BitmapDrawable bd = new BitmapDrawable(bmp);
bd.setAlpha(50);
ImageView v = (ImageView) findViewById(R.id.image);
v.setImageDrawable(bd);
Add method
Bitmap bmp; DrawView DrawView;
private static Bitmap makeTransparentBitmap(Bitmap bmp, int alpha) {
Bitmap transBmp = Bitmap.createBitmap(bmp.getWidth(),
bmp.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(transBmp);
final Paint paint = new Paint();
paint.setAlpha(alpha);
canvas.drawBitmap(bmp, 0, 0, paint);
return transBmp;
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.rgb(43,44,45));
bmp = BitmapFactory.decodeResource(getResources(), R.drawable.mouse);
canvas.drawBitmap(bmp, pos_x, pos_y, null);
}
You event:
bmp = makeTransparentBitmap( bmp, 122 );
DrawView.invalidate();
DrawView is
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
DrawView = new DrawView(this);
setContentView( DrawView );
}
I found this answer here
try this,
newBitmap.setImageResource(android.R.color.transparent);
#akaya's answer is the right way except that the constructor is deprecated. The new way since API 4 would be to use:
BitmapDrawable drawable = new BitmapDrawable(getResources(), bitmap);
drawable.setAlpha(100);

clear the canvas draw programmatically Android

well i'v problem with canvas.draw() i'm having multiple frames to overlay on the same bitmap . and i succeed to do this. but the problem is when now it comes to apply another frame using the same methods but different border , the border overlay the old ones.
void hm(){
Bitmap border = BitmapFactory.decodeResource(getResources(), R.drawable.vignette2);
int width = bmp.getWidth();
int height = bmp.getHeight();
change = Bitmap.createScaledBitmap(change, width, height, false);
Canvas canvas = new Canvas(change);
Bitmap scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0,null);
//canvas.drawBitmap(k, 0, 0, null);
view.setImageBitmap(change);
}
and here is the other method:
void hm1(){
Bitmap border = BitmapFactory.decodeResource(getResources(), R.drawable.white);
int width = bmp.getWidth();
int height = bmp.getHeight();
change = Bitmap.createScaledBitmap(change, width, height, false);
Canvas canvas = new Canvas(change);
Bitmap scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0,null);
//canvas.drawBitmap(k, 0, 0, null);
view.setImageBitmap(change);
}
now when i click on button1 the overlay applies to the view. and when i click on button2 it also applies to the view but it doesn't destroy the old border("the Overlay image").
i know that i should use different bitmap to handle every view of the imageview. but i'm using save button which will save the Bitmap change which means i want to apply the borders on this image and display it. without overlaying the old borders.
for example i'm using QuickActionand here is how i'm trying to accomplish the clicks.
if (actionId == border0){
hm();
}
if (actionId == border1 ){
hm1();
}
if (actionId == border2 ){
}
it works but as i said it overlay the old ones .
any help will be thankful.
thanks in advance.
Solved it tomorrow i will post the Answer :).
Well you create a new bitmap based on the old one with this line:
change = Bitmap.createScaledBitmap(change, width, height, false);
So make sure that you somehow reset the change bitmap with the original:
change = Bitmap.createScaledBitmap(originalBitmap, width, height, false);

Categories

Resources