Replace TRANSPARENT part of image set in imageview with another image? - android

How to change TRANSPARENT part of image set in imageview with another image?
Below is the main image, there is TRANSPARENT portion(here looks white), i want to set another image withing that portion of image.
any idea how to do it?
Question:
How to find TRANSPARENT portion starting point LEFT(x,y), RIGHT (x,y), BOTTOM LEFT (x,y), BOTTOM RIGHT(x,y) ? for image replacement.
How to process bitmap in runtime to add another image to make changes in imageview?
I've tried this to find transparent part of image.

You have a bitmap (B1) and there is only one rectangle transparent zone somewhere. And you want to place another bitmap (B2) inside it.
use monte-carlo method to find any transparent pixel on B1. You know
it's coordinates now.
go [left/right/top/bottom] from transparent pixel and find
first solid pixel. Now you know transparent rectangle coorditates.
There are several ways to put something inside transparent area. You can:
place second imageview (with B2) under the first one (with B1). Set B2 padding inside imageview accordingly transparent zone coordinates.
create new image from B1 and B2 and set it to imageview.
do it some other way...

try this example in this crop image with transparent part it will use full for you.
https://github.com/ketanpatel25/Image-Cropping-In-Transparent-Area

Related

Change image fill color in Android

I have an ImageView with the source being an ImageAsset.
My image is a circle with a plus and I am looking to colour the inside of the circle only. How do I do that?
Using setBackgroundColor colours the whole of the view thus giving a square background like this:
.
You can apply a color tint to your ImageView. This will not affect your background if it's transparent, just the colored part (which is the circle and the plus)
imageView.setColorFilter(ContextCompat.getColor(context, R.color.COLOR_YOUR_COLOR),
android.graphics.PorterDuff.Mode.MULTIPLY);
Update
Using android.graphics.PorterDuff.Mode.SRC_IN will also work (if you don't need to multiply the source and destination pixels)
Update 2
Since the destination part is not colored than the best solution is to use VectorDrawable.
You can use VectorChildFinder to find inner parts of your SVG resource and change its color.
VectorChildFinder vector = new VectorChildFinder(this, R.drawable.my_vector, imageView);
VectorDrawableCompat.VFullPath path1 = vector.findPathByName("path1");
path1.setFillColor(Color.RED);
imageView.invalidate();
to create your SVG, follow these steps :
Just click right button on folder(drawable for ex.) and choose:
then choose:

Bitmap otained is transparent but when set to imageview becomes non-transparent

I'm using OpenCV to implement something simple, that if Mat has color of pixel(x,y) equal to white, it turns to transparent (alpha = 0). After that convert Mat to bitmap.
When debugging the bitmap returned is correct, but when i set it to imageview, the image returned still has white background (as in the original image) instead of the transparent image.
This is the original image (with white background)
And debugging image, with transparent background
Please help me to fix it :(
Add following line in your ImageView,
android:background="#android:color/transparent"

Android, Fit an Image Inside an ImageView

i try to fit any image inside a diamond shape. My image is dynamic, how can i handle this ?
This is what I do:
and this is what I'm trying for:
You should try something like this this creates a custom shape ImageView and then you can use it as you see fit.. then you can add some edge color to have the effect you want

Using ClipDrawable to hide a part of and ImageView

I am trying to hide a part of an image so that the user does not see it. Initially I copied the Bitmap pixels on another Bitmap, without copying only the pixels that I needed and making the second bitmap the correct size at creation. That worked, but I have many large images and that results in OOMs unfortunately. So instead of doing that I thought on using a ClipDrawable to draw the image, and making the pixels that I don't need invisible.
The code is as follows
ClipDrawable clipDrawable = new ClipDrawable(new BitmapDrawable(resources, bitmap), gravity, orientation);
clipDrawable.setLevel(level);
// Cannot use as the imageview source. Must use background or else we don't get anything on the screen.
picture.setBackground(clipDrawable);
// This is super important. Do not modify this! Without it you will not get the fullscreen image working and the ImageView will be deleted
// from the parent layout.
picture.setImageResource(android.R.color.transparent);
The idea is that I calculate the level based on the image size so that I hide the pixels that I don't need. And it's working. Except I don't understand why I need to use
picture.setBackground(clipDrawable);
picture.setImageResource(android.R.color.transparent);
instead of the more normal:
picture.setImageDrawable(clipDrawable);
If I do the second more normal example then I don't get anything in the ImageView, but if I set it as a background and put a transparent image over it, then it works. Since I want to further manipulate the ImageView using a zooming class that needs the picture set as the src and not as background, I cannot have both, either I get the ClipDrawable showing or I get to have zoom on the image.
Any help would be appreciated!
picture.setImageDrawable(new
ClipDrawable(new BitmapDrawable(resources, bitmap), gravity, orientation
));
ClipDrawable clipDrawable = (ClipDrawable) picture.getDrawable();
clipDrawable.setLevel(level);

How to make a blur transparent linear layout

I have a transparent layout in android, and behind the layout there is an image. how to make the linear blur ? I found examples to make the image itself blur but I don't want to make whole image blue, just only the part that is behind the linear layout.
Set a semitransparent Blur image to the linear layout or simplest set a color to linear layout and set it to semitransparent by defining alpha
edited solution
do this...
1.) create a blur copy of the image u have on background.
2.) clip the image by using
Bitmap croppedBmp = Bitmap.createBitmap(originalBmp, startX, startY, widthLayout , heightOfLayout);
3.) set this image in the Linear Layout using an image-view with height and width attribute as fill-parent.
I have pretty complex solution, so there won't be any code. So, here is idea, step by step:
Let's assume that your layout have just single custom LinearLayout. No ImageView as a background.
What we going to do, is draw background drawable of LinearLayout by our own, so it will first draw full image and then draw blurred square from the same image on top. Content of LinearLayout might be moved to desired position using paddings.
So, create something like MyLinearLayout and put it to your layout resource. Provide required constructors.
Override onAttachedToWindow() and onDetachedFromWindow() methods. Inside them we should load our background Bitmap and recycle it accordingly. Let's name it mBackground
Override draw() method. Inside it we're going to first draw our mBackground.
Then, you can use Canvas#clipRect() method to crop drawing area of Canvas to some specified rectangle. In your case, this rectangle should be the area below your content. You can figure it out using View#getPadding*() methods. Don't forget to call canvas#save() before clipping drawing area.
Now you can draw your bitmap once again with blur (I don't know which method exactly you're using, so let's assume that you know how to do it... but you still can share it with us :) ). Cool thing is that you can just draw the same Bitmap once again in full scale - since we had called clipRect before, it will be drawn only within this area. Don't forget to call canvas#restore() after drawing background.
Call super.draw() to draw rest of the stuff, that your LinearLayout contains.

Categories

Resources