I'm trying to set a background on a view, which should be an image with a single rounded corner and a gradient tint overlayed
I feel like I'm close, I'm just missing the rounded corner. I have made a minimal working example project here: https://github.com/RandomStuffAndCode/AndroidCanvas
From https://github.com/RandomStuffAndCode/AndroidCanvas/blob/master/app/src/main/java/com/randomcodeandstuff/androidcanvas/MainActivity.java :
RoundedBitmapDrawable dr = RoundedBitmapDrawableFactory.create(getResources(), src);
dr.setCornerRadius(convertToPixels(context, CORNER_RADIUS));
Bitmap drBitmap = drawableToBitmap(dr);
Paint drPaint = new Paint();
drPaint.setAntiAlias(true);
drPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(drBitmap, 0,0,drPaint);
This obviously gives me 4 rounded corners instead of just 1. I considered drawing a rectangle on top of the other rounded corners, but because of the gradient overlay this does not look good.
How do i get rid of the 3 other rounded corners? Screenshot of the code here:
If you're targeting API level 21+, a possible option would be to use a normal ImageView, but set an ViewOutlineProvider on it. The Outline you provide will probably have to be the convexPath option, so you'd have to tinker with that for your specific use-case.
Related
I have a custom view wich contain some bitmaps and I want to set shadows for them, for that, I use this code:
shadowPaints=new Paint(Paint.ANTI_ALIAS_FLAG);
shadowPaints.setShadowLayer(10.0f, 3.0f, 2.0f, Color.BLACK);
canvas.drawBitmap(bmp, matrix, shadowPaints);
setLayerType(LAYER_TYPE_SOFTWARE, shadowPaints);
and my result is
as you can see my shadow actually is another bitmap with different x and y position but what I want is my shadow be a solid color
bitmap.
can anyone help me about this?
setShadowLayer is actually meant for putting shadows on text.
If you already know the bitmap you want to draw, you can just add a shadow in PhotoShop and draw the bitmap and shadow all at once.
If you don't want to do that, you could make a shadow by making a copy of the image, using a PorterDuff filter to make it all grey, use Renderscript to blur the image, and draw it on the canvas at an x,y offset before drawing the actual image on top of it.
Personally, I think PhotoShop is a lot easier.
I have a stack of bitmaps that I need to render one above the other. I achieve this with a relative layout and several ImageViews on top of each other which all have a Bitmap assigned to it.
This works great, but when the top layers is semi-transparent, the colours of the lower bitmap are off.
All my bitmaps use Config.ARGB_8888.
Say the top layer is red with an alpha of 50% and the bottom layer is green with an alpha of 100%.
I can either set the colour of the bitmap to red, then the alpha of the ImageView to 0.5f and it will render the green colour below fine (darker green with some red mixed in).
If I set the bitmap pixels to a 50% red like this: bmp.eraseColor(0x7Fff0000); and leave the imageView alpha on 100%, the green below will be displayed as yellow, mixing red and green, rather than overlaying it.
Unfortunately I can not use the (working) fist version because the alpha on the Bitmap above is not going to be uniform.
Is there a blend mode setting to use true colours when using semi transparent pixels in a Bitmap?
EDIT: I have also tried to set several PorterDuffXfermodes to the ImageViews but none gives the right result.
Paint paint = new Paint();
paint.setXfermode(new PorterDuffXfermode(Mode.MULTIPLY)); //OVERLAY//ADD//SCREEN//DARKEN//LIGHTEN
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, paint);
Got it, needed to premultiply the alpha to get the desired result.
Imagine that I have a rectangle image. How could I create a style like the next one?
I mean, cropping the image into a circle, add the border, the shadow and the gross /shine effect. Until now, I only have tried this snippet code to crop the image: Cropping circular area from bitmap in Android but just that. I have no idea how to do the remaining components in Android.
An easy way to achieve this effect is to use Canvas.drawCircle() and a BitmapShader:
BitmapShader s = new BitmapShader(myPhoto, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
Paint p = new Paint();
p.setShader(s);
myCanvas.drawCircle(centerX, centerY, radius, p);
To do the shadow, simply call Paint.setShadowLayer() on the paint (this will only work if you draw the effect into an offscreen Bitmap or if your View uses a software layer – set by calling View.setLayerType() –).
The border can be drawn by drawing another circle on top, using the Paint.Style.STROKE style (that you can set by calling Paint.setStyle()).
Finally you can draw the gloss by drawing a circle, oval or Path on top of your very first circle. You'll need to use a LinearGradient shader on your paint and you'll also need to clip the gloss. You can do this in two ways:
If you are drawing the entire effect into a Bitmap, which is what I would recommend, simply set the paint's Xfermode to a new PorterDuffXfermode(PorterDuff.Mode.SRC_IN).
If you are drawing the effect directly on screen you can simply use Canvas.clipPath() to set a circular clip. Note that this will work with hardware acceleration only as of Android 4.3.
I want to create a little scratch game. The problem is, that I can't figure out how to erase pixels from an image in android (like the eraser in gimp / photoshop).
The image is an .png with alpha channel.
AIUI, drawing operations on a canvas blend a transparent pixel with the prior value of the pixel. This is by default, and you can see it by setting a canvas to black and drawing a fully transparent shape onto it, and then drawing the underlying bitmap over an image of another canvas (result: a fully black canvas), or by setting a canvas to a partially transparent color and, drawing a shape of another partially transparent color, and then drawing this over an image (result: the original image is tinted by the first color, outside the shape; within the shape, it's tinted by both transparent colors). I don't know the blending method used by default, and looking through the docs just makes me wish I knew what book to buy so I can understand how to use what's available.
So I would set pixels to transparent by setting them 'directly', with Bitmap methods, rather than with canvas operations. Although if you need to punch a transparent shape into an overlay, you can draw the shape with a solid non-transparent color, and then manipulate the bitmap directly, mapping this color to the transparent color.
Bitmap docs. Prefer getPixels() and setPixels() to a method-call per pixel.
EDIT: ...er, did I misunderstand? You want to 'erase' pixels as in a paint program? Then just draw whatever the background color is. There's no erasure involved.
I have this image that comes back from an API, which represents the users avatar:
However, my graphics department has designed the app to mask the image to make it look like this at runtime (to match our existing design of sharp edges, etc):
Notice the small edge cutout on the bottom left?
I'd love to be able to create a custom ImageView that handled this for me. Unfortunately I'm not sure how to go about doing that. How can I create the bottom image in a custom ImageView. Is this possible? Do I mask it? If so, how?
Thanks!
Using Path and xfer modes to draw on canvas can do the trick. Check this answer how to draw pic to Closed curve area
I think the easiest way to do is to use 2 ImageViews, one with the photo and other above it with a mask for the photo, in your case it would be all transparent except the bottom left to create the cutout with the background color.
You may be able to use android.graphics.Path to draw the complex shape you want. I found this very helpful for a simple custom View, but it seems like you can do a lot with it:
http://developer.android.com/reference/android/graphics/Path.html
Simple code sample for a shaded rectangle:
private Path mRectanglePath;
...
// draw the path
mRectanglePath = new Path();
mRectanglePath.addRect(mLeft, mTop, mRight, mBottom, Path.Direction.CW);
// draw the fill
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setAlpha(64);
canvas.drawPath(mRectanglePath, paint);