How to add stroke/border to transparent png image in android? - java

I have transparent images like shapes,letters which I'm fetch from gallery so I need to give them stroke/outline with black color, I can set border but It's set to whole bitmap like left,right,top and bottom.
Same thing we can do with photoshop is giving outerstroke to image but I want to achieve that in android.
I tried this and this It's give border, But what I want to do is like below
sample image
Original Image
I want like this -->
Does this possible in android?

I have an temporary solution like this
int strokeWidth = 8;
Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.flower_icon);
Bitmap newStrokedBitmap = Bitmap.createBitmap(originalBitmap.getWidth() + 2 * strokeWidth, originalBitmap.getHeight() + 2 * strokeWidth, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newStrokedBitmap);
float scaleX = newStrokedBitmap.getWidth() / originalBitmap.getWidth();
float scaleY = newStrokedBitmap.getHeight() / originalBitmap.getHeight();
Matrix matrix = new Matrix();
matrix.setScale(scaleX, scaleY);
canvas.drawBitmap(originalBitmap, matrix, null);
canvas.drawColor(Color.WHITE, PorterDuff.Mode.SRC_ATOP); //Color.WHITE is stroke color
canvas.drawBitmap(originalBitmap, strokeWidth, strokeWidth, null);
Firstly create a new bitmap with stroke size on left, right, bottom and top.
Secondly a little bit scale bitmap and draw scaled bitmap on newly created bitmap canvas.
Draw a color (your stroke color) with PorterDuff mode SRC_ATOP override original bitmap position with stroke color.
Finally draw your original bitmap on newly create bitmap canvas.

Related

Increase bitmap size without scaling image

I would like to increase the size of a Bitmap in my Android application.
It sounds like a very simple operation but I cannot find how to do so anywhere.
Here is an image to illustrate what I am trying to achieve here:
Basically, I'd like to create a new bitmap that has the same width as the original, but a bigger height. The background of the (new) extra pixels can be black, white or transparent.
How can I do this?
Some like this should do.
// Create a Canvas to draw to
Canvas bitmapCanvas = new Canvas();
// Create a Bitmap to back the Canvas of the new size
Bitmap bitmap = Bitmap.createBitmap(X, Z, Bitmap.Config.ARGB_8888);
bitmapCanvas.setBitmap(bitmap);
// Calculate the new position of bitmap
// Middle of new Z dimension minus half the original height to centre it.
int newY = (Z / 2) - (Y / 2);
// Draw original bitmap to new location
Paint paint = new Paint();
paint.setAntiAlias(true);
bitmapCanvas.drawBitmap(origBitmap, 0, newY, paint);

how to load image as pixel image in android java?

i want to creat an android app
that shows all pixels of an image but when i zoom color of the corners of the pixels blend with other pixels around it i want pixels to show their color perfectly in their squares
( like pixel art or ms paint when you zoom it)
i tried drawing a rectangle on canvas and drawing a bitmap 1×1
with color what i want but it blends
here is a picture and code
upper pic 4×4 what it creates
lower pic what i want
try{
//creating bitmap from other for background
bt2 = Bitmap.createBitmap(bt,i2,i3,i,i);
}
Canvas c=new Canvas(bt2);
c.drawColor(Color.argb(255,255,255,255));
//creating 1×1 image
Bitmap bt3 = Bitmap.createBitmap(bt,0,0,1, 1 );
//blue color to draw for pixel looking
Canvas c2 =new Canvas(bt3);
c2.drawColor(Color.argb(255,0,0,255));
int w=bt2.getWidth();
int h= bt2.getHeight();
//geting pixels so i would use it
btpixels=new int [w*h];
bt2.getPixels(btpixels,
0,w,0,0,w,h );
int j =0;
Paint paint =new Paint();
for(j=0;j<w;j++)
{
paint.setARGB(255,0,255,0);
//drawing blue bitmap on bt2
c.drawBitmap(bt3,j,j,paint) ;
//paint.setColor( btpixels[j]);
/* c.drawRect(
(float)i-1,
(float) i-1,
(float)i,
(float)i,
paint ); */
}
img.setImageBitmap( bt2 );
}catch(IllegalArgumentException e){ }
i understood how to stop pixels from blending. I was using 2×2 image on the screen 300ppi . If i want to show 1 pixel per inch i should use pixel bitmap(here bt3) width as 300
best would be
width of the pixel square =
width of the screen / num of pixels

Android - use bitmap as a gradient mask

I have implemented a flood fill algorithm in an android app. The way I have implemented the algorithm doesn't actually change the source bitmap, but instead creates a new bitmap of the fill area. I.E.
Flood filling this circle with red
Would produce this bitmap (where everything else in the bitmap is transparent)
Which I then combine again into a single bitmap. This works great for solid colors, but I want to be able to implement a gradient flood fill so that if a user fills the same circle, choosing red and blue, the resulting bitmap would look like this
My question is, is there a way that I can use the red circle as some sort of mask to make the desired gradient? or do I have to write a gradient generator myself?
Thanks to pskink's hint, I was able to find an answer.
The idea is that you create a canvas, draw the mask to it, create the gradient that you want, then draw the gradient on top of it using the SRC_IN PorterDuffXfermode. Here's the code:
public Bitmap addGradient(Bitmap src, int color1, int color2)
{
int w = src.getWidth();
int h = src.getHeight();
Bitmap result = Bitmap.createBitmap(w,h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,0,0,h, color1, color2, Shader.TileMode.CLAMP);
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawRect(0,0,w,h,paint);
return result;
}
In this instance, the DST(destination) is the red circle and the SRC(source) is the gradient. The SRC_IN PorterDuff mode means draw the SRC everywhere that it intersects with the DST.
Note that it really doesn't matter what color the mask is, because the PorterDuff mode only pays attention to whether the DST pixel is transparent or not. The color of the resulting bitmap will be a gradient between color1 and color2.

Draw circle over the bitmap with the color same as the under bitmap

I have an image, I can draw an circle over it like the code below:
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.girl).copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(200);
paint.setStyle(Style.STROKE.FILL);
paint.setAntiAlias(true);
canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, 100,
paint);
And the circle will be red color! But because of some reason, I want the color of circle same as its under bitmap. Can I do it? and how? Thanks everyone!
Edited: One more question, How I can get all the pixels inside circle?
why dont you simply remove the paint.setStyle(Style.STROKE.FILL); or try changing the paint.setColor(Color.RED); to Transparent color, that should be it
you can get the color of a specified pixel by the method in this article and then make a RGB Color then set this color instead of the color.RED you mentioned.

Rotated image in ImageView

I want to show an arrow that indicates the direction towards a goal, using the orientation sensor and current GPS position. Everything works well, except that I want to rotate the arrow image in my ImageView.
The current code, which shows the arrow pointing upwards, is this:
ImageViewArrow.setImageResource(R.drawable.arrow);
What is the best solution for showing the arrow, rotated by N degrees?
I tried this, but it gave messed up graphics:
Matrix matrix = new Matrix();
matrix.postRotate(Rotation);
Bitmap bitmapOrg = BitmapFactory.decodeResource(getResources(),
R.drawable.arrow);
Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0,
bitmapOrg.getWidth(),bitmapOrg.getHeight(), matrix, true);
BitmapDrawable bmd = new BitmapDrawable(resizedBitmap);
InfoArrow.setScaleType(ScaleType.CENTER);
InfoArrow.setImageDrawable(bmd);
here you can find a tutorial
http://www.anddev.org/resize_and_rotate_image_-_example-t621.html
There is a matrix parameter in the createBitmap method that can be used for resizing and rotating the image. You could try something like the following:
Matrix matrix = new Matrix();
// to rotate the image bitmap use post Rotate
matrix.postRotate(45);
Bitmap rotatedImage = Bitmap.createBitmap(bitmapOrg, 0, 0,
width, height, matrix, true); `

Categories

Resources