I have a list of items where I am displaying a bitmap next to the item's name. This bitmap is to be created from 2 images, I have a background image with a smaller foreground image to add on top of the background.
I am seeing that the background image appears to not be present on some of my rows in my list. It is not consistent when and which row has the combined bitmap without the background. It is not always the same row where the combined bitmap does not have the background and it is not always the first or not always the last row where the bitmap does not have the background. And sometimes the whole list has every row with the correct image.
The image below is a mockup showing my issue.
My code for creating the combined bitmap is as follows.
Bitmap combinedBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas combinedCanvas = new Canvas(combinedBitmap);
// Add the first bitmap to the canvas (this is my background and this is what appears to be
// missing on some rows in my list on some occasions)
combinedCanvas.drawBitmap(backgroundBitmap, 0, 0, null);
// my second smaller image, on top of the first image but 1 pixel in
// from the left and 20 pixels down from the top
combinedCanvas.drawBitmap(foregroundBitmap, 1, 20, null);
return combinedBitmap;
Note: My backgroundBitmap is generated from a Drawable using the following code
Bitmap backgroundBitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
drawable.getMinimumHeight(),
Bitmap.Config.ARGB_8888);
backgroundBitmap.setDensity(resources.getDisplayMetrics().densityDpi);
Canvas canvas = new Canvas(backgroundBitmap);
drawable.draw(canvas);
Any suggestions of what I have wrong or even where to look to try and resolve this would be greatly appreciated.
EDIT: I have tested adding a colour to the background of my combinedCanvas to try and see where the image generation is going wrong by adding the following code
// TEMP: fill the canvas in red for now so I can see which combinedBitmaps are missing
// the background image
combinedCanvas.drawColor(Color.RED);
Now the rows which do not have the background are coloured in red. This indicates that the code above to create the combined canvas is somehow not adding the backgroundBitmap. I have checked and my background image is not null for every row in my list.
This method works fine for me. It's in C# (Xamarin), you'll have to translate it to Java I'm afraid.
public static Bitmap CombineImages(Bitmap background, Bitmap foreground)
{
int width = background.Width, height = background.Height;
Bitmap cs = Bitmap.CreateBitmap(width, height, Bitmap.Config.Argb8888);
Canvas comboImage = new Canvas(cs);
background = Bitmap.CreateScaledBitmap(background, width, height, true);
comboImage.DrawBitmap(background, 0, 0, null);
int top = (int)(0.05 * height);
int left = (int)(width - (foreground.Width + (width * 0.05)));
comboImage.DrawBitmap(foreground, left, top, null);
return cs;
}
The left and top are hardcoded for my requirements, it would be better to pass them in as arguments.
Related
I need to increase the size of a bitmap in Android, like in this image:
Basically, the user save the Image1. Then, the user can open again Image1 but I need that the Image2 (that is just a white rectangle) is added to the top of the Image1. So, I need to create another image, that is the Image1 plus another image.
How can I do that?
However, I just need to "increase" the Image1 size, so if there's another way to do that please let me know.
Thanks a lot
Since you only need the rectangle on top you can do this, but replace drawRect by some drawBitmap if you want to draw another image on top.
Bitmap i1 = //load the one
int w = i1.getWidth(), h = i1.getHeight();
Bitmap i3 = Bitmap.createBitmap(i1.getConfig(), w, h + 200); //200 will be the white
Canvas surface = new Canvas(i3);
Paint white = new Paint();
white.setColor(Color.WHITE);
surface.drawRect(0, 0, 200, w, white);
surface.drawBitmap(i1, 0, 200, w, h, white);
About increasing height, you can do this with the BitmapConfig.Options, but that will streth the result to match your proportions.
I have to crop a bitmap image. For this, I am using
Bitmap bitmap = Bitmap.createBitmap(imgView.getWidth(),imgView.getHeight(), Bitmap.Config.RGB_565);
Bitmap result =Bitmap.createBitmap(bitmap,imgView.getLeft()+10, imgView.getTop()+50, imgView.getWidth()-20, imgView.getHeight()-100);
bitmap.recycle();
Canvas canvas = new Canvas(result);
imgView.draw(canvas);
But it cuts the bottom and right of the bitmap. Top and Left part of the bitmap exists in the output. That means x and y position has no effect.
I am searched for good documentation. But I couldn't.
Thanks in Advance
What is the problem here and how to solve?
Basically your problem arises form the fact that you create a bitmap. You don't put anything in it. You then create a smaller bitmap and then you render an imageView to that smaller bitmap.
This cuts off the bottom 100 pixels and right 20 pixels.
You need to Create the large bitmap. Add the imageview data to that bitmap. Then resize it.
The following code should work:
Bitmap bitmap = Bitmap.createBitmap(imgView.getWidth(),imgView.getHeight(), Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
imgView.draw(canvas);
Bitmap result =Bitmap.createBitmap(bitmap,imgView.getLeft()+10, imgView.getTop()+50, imgView.getWidth()-20, imgView.getHeight()-100);
bitmap.recycle();
I need to "compute" the resulting bitmap obtained from overlapping two different bitmaps that have an alpha value somewhere between 0 and 255. I need to do this in java code, not xml, because bitmaps are being loaded dinamically and not from resources.
Here is my first try (which always yields a black bitmap...):
private Drawable composeBitmaps(int alpha1, BitmapDrawable bm1,
int alpha2, BitmapDrawable bm2)
{
Canvas c = new Canvas();
Bitmap b1 = bm1.getBitmap();
BitmapDrawable draw1 = new BitmapDrawable(b1.copy(b1.getConfig(), true));
draw1.setAlpha(alpha1);
c.setBitmap(draw1.getBitmap());
Paint p = new Paint();
p.setAlpha(alpha2);
c.drawBitmap(bm2.getBitmap(), 0, 0, p);
return draw1;
}
...
View v = // whatever
v.setBackgroundDrawable(composeBitmaps(100, bdrawable1, 150, bdrawable2));
And the view goes black background. What am I doing wrong?
My code above is absolutely correct. The bug that made the bitmap go black was elsewhere. Found it, fixed it, now it works.
The only thing to note is that my code is slow as hell and it cannot be used to crossfade two fullscreen bitmaps at a reasonable fps rate.
in my application I have a lit view. each row includes thumbnail image in left and some text in right.
I can get image from server and inflate rows. everything about the list correct. it is like this image:
when user click on rows video will play. I need to add video sign to image simething like:
on top of each image. Is it possible to add this image on top of my imageview?
Thank you for your helping
Say, your play icon is transparent, then use overlay technique to draw this play icon on your imageview image. Just use the following function:
public Bitmap putOverlay(Bitmap bmp1, Bitmap overlay) {
Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bmOverlay);
Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG);
canvas.drawBitmap(bmp1, 0, 0, null);
canvas.drawBitmap(overlay, 0, 0, null);
return bmOverlay;
}
Pass image of your corresponding imageview and another image(for ex: play icon), it returns a merged image which you can set to your imageview. You can also extend ImageView class and override onDraw method to accomplish it.
You can add moive simbol/icon like this
public Bitmap putOverlay(Bitmap source) {
Canvas canvas = new Canvas(source);
Bitmap icon = BitmapFactory.decodeResource(MainApplication.getInstance().getResources(), R.drawable.video_icon);
float left = (source.getWidth() / 2) - (icon.getWidth() / 2);
float top = (source.getHeight() / 2) - (icon.getHeight() / 2);
canvas.drawBitmap(icon, left, top, null);
return source;
}
I wanted to create an app by taking images from the sd card and add caption to it. Also I wanted to move the caption as per our wish and place it somewhere as desired and save it .can you please suggest an idea for doing this. Also if we want to add a caption to the existing image from SD card then , do we need to have database for doing this. or can it be saved directly to the SD card.
Refer This Answer
You can put an EditText and Write into it and after writting you first convert it to Bitmap like
Bitmap bmp = Bitmap.createBitmap(mEditText.getDrawingCache());
Now you can add created image bmp to your original image like this
call :
Bitmap combined = combineImages(bgBitmap,bmp);
public Bitmap combineImages(Bitmap background, Bitmap foreground) {
int width = 0, height = 0;
Bitmap cs;
width = getWindowManager().getDefaultDisplay().getWidth();
height = getWindowManager().getDefaultDisplay().getHeight();
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
background = Bitmap.createScaledBitmap(background, width, height, true);
comboImage.drawBitmap(background, 0, 0, null);
comboImage.drawBitmap(foreground, matrix, null);
return cs;
}
Use canvas (Custom Views) for it..
I think this is the only way to make one view (Image in one canvas) on other view (caption in other canvas) on it. So in this you have to complete knowledge of how views draw on canvas and how to move to that views. And using canvas you can also smoothly move your views on screen.
After creating custom views you can save those views in Bitmap, now you can also combine those images to one bitmap..
(Here Customeviews are ImageViews, TextViews, EditText etc..)
All the best. :-)
USe like this.
cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas comboImage = new Canvas(cs);
background = Bitmap.createScaledBitmap(background, width, height, true);
comboImage.drawBitmap(background, 0, 0, null);
comboImage.drawText("title", x, y, paint);