Develop Reference

Android: How to draw this custom shape

I'm new to Android, and I would like to know how to draw this blue shape:
Without using images, of course.
Thanks!

The easy way would be your suggested solution, ie. drawing all circles with no alpha to a bitmap, then draw that bitmap to another one using the desired alpha.
The hard way would be using blend modes, specifically PorterDuff.Mode in Android. An example can be found here.
Also Check this http://softwyer.wordpress.com/2012/01/21/1009/
An example
Bitmap bitmap = Bitmap.createBitmap(b.getWidth(), b.getHeight(), b.getConfig());
Canvas canvas = new Canvas(bitmap);
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setColor(Color.BLACK);
canvas.drawRoundRect(new RectF(0, 0, b.getWidth(), b.getHeight()), borderRadius, borderRadius, p);
p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(b, 0, 0, p);

How to draw multiple bitmap using paint?

I am trying to draw multiple bitmap using this code.
Paint paint = new Paint();
Path path = new Path(); // path of crop
for (int i = 0; i < Crop.points.size(); i++) {
path.lineTo(Crop.points.get(i).x, Crop.points.get(i).y);
canvas.drawPath(path, paint);
bitmap1= highlightImage(bitmap1); //bitmap1 drawn completely
canvas.drawBitmap(bitmap1, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));// select inside part of crop
canvas.drawBitmap(bitmap2, 0, 0, paint);// draw crop part
highlightImage is a method for blurring a bitmap. This canvas first draw bitmap1 that is blurred and then draw bitmap2.
The problem is, when I use only this code:
bitmap1= highlightImage(bitmap1);
canvas.drawBitmap(bitmap1, 0, 0, paint);
the bitmap1 is blurred and drawn correctly, but when I use this
bitmap1= highlightImage(bitmap1);
canvas.drawBitmap(bitmap1, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap2, 0, 0, paint);
the bitmap1 is drawn but without the blur effect. What's the problem?
the first image is the image of blur bitmap
the second one is for the time that two bit map is drawn. you can see that is transparent without blur effect.
[first ][1]
[second ][2]
[what I want][3]

Draw text with a shape mask?

I am drawing text on a canvas. I would like to draw a solid circle of color over the text, and only have the circle be painted where it intersects the text. Example:
and what I want to do:
I'm not sure if this is possible, my draw code is simply:
public void onDraw(Canvas canvas) {
canvas.drawText("Hello", x, y, paint);
paint.setColor(orange);
canvas.drawOval(...);
}
I suppose I would need to apply some masking, but not sure how to get started.

follow this tutorial from a googler...
android-shaders-filters
BitmapShader may help you

You can use PorterDuffXfermode in Android to achieve this.
If you use below code it will work fine:
Bitmap original = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(),
Bitmap.Config.ARGB_8888); // Created from Canvas
Bitmap mask =
Bitmap.createBitmap(getContext().getResources(),R.drawable.mask_image);
Bitmap result = Bitmap.createBitmap(mask.getWidth(), mask.getHeight(),
Config.ARGB_8888);
Canvas tempCanvas = new Canvas(result);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
tempCanvas.drawBitmap(original, 0, 0, null);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
tempCanvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);
canvas.drawBitmap(result, 0, 0, new Paint());
What does PorterDuff.Mode mean in android graphics.What does it do?

Android Mask two Bitmap clear border

I'm using the mask a bitmap with another. The operation succeeds well, unfortunately the result of masking seen a slight black border, as you can see in the image:
How do I remove this border? in the source image is not there.
I'll post the code I'm using:
public Bitmap mask(Bitmap source) {
Bitmap targetBitmap = Bitmap.createBitmap(getWidth(),getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
paint.setAntiAlias(true);
paint.setDither(true);
canvas.drawBitmap(source, 0, 0, null);
canvas.drawBitmap(getMask(), 0, 0, paint);
paint.setXfermode(null);
return targetBitmap;
}
where getMask () returns the Bitmap that represents the figure of the Puzzle.
I hope to receive your help, thank you all
Sorry for my english :-)
UPDATE:
the black border is what I point out in this picture:
UPDATE:
place the sequence of transformation. The third image would be identical to the first but without color. The problem is the black edge of the puzzle.
I hope to be more clear:

The way I draw images with mask is kind of the other way around from what you do.
public Bitmap mask(Bitmap source) {
Bitmap targetBitmap = Bitmap.createBitmap(getWidth(),getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
// paint.setAntiAlias(true); // you've already set this in the constructor
paint.setDither(true);
canvas.drawBitmap(getMask(), 0, 0, null);
canvas.drawBitmap(source, 0, 0, paint);
// paint.setXfermode(null); // no need for this
return targetBitmap;
}
Note that PorterDuff.Mode is set to SRC_IN (not DST_in) and that the mask is drawn first and then the image on top of that mask. With this approach you can also draw the previous source as the base mask, add the new (puzzle) mask and then draw the final source/image on top of that with SRC_IN paint to add new puzzle pieces each time.
If that doesn't solve the black border, check that your mask doesn't have feathered (transparent) edges that might be causing these problems.
Also, ANTI_ALIAS_FLAG doesn't do anything on textures. If you want smoothly scaled textures use paint.setFilterBitmap(true);

Android - Crop an image from multipoints

I need to crop a Bitmap, but instead of having a rectangular cropped image (which I managed successfully to do), I need it to be any form defined by coordinates.
I'm following the answer from this thread: Cutting a multipoint ploygon out of Bitmap and placing it on transparency , and trying to implement it, but unfortunatly it does not clip the image.
I did as in the description, but it seems there's a bug somewhere. The image is drawn in rectangular way.
Am I missing something?
Bitmap originalBitmap=BitmapFactory.decodeResource(getResources(), R.drawable.test_image);
// Image cropped
Bitmap croppedBitmap=Bitmap.createBitmap(originalBitmap, 10, 10, 200, 200);
Canvas canvas=new Canvas(croppedBitmap);
// Create a path
Path path=new Path();
path.setFillType(FillType.INVERSE_EVEN_ODD);
path.moveTo(0, 0);
path.moveTo(0, 100);
path.moveTo(100, 0);
path.moveTo(0, 0);
// Paint with Xfermode
Paint paint=new Paint();
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
// Draw the path
canvas.drawPath(path, paint);
imageView.setImageBitmap(croppedBitmap);

I was very close to the solution. Here it is:
compositeImageView = (ImageView) findViewById(R.id.imageView);
Bitmap bitmap1=BitmapFactory.decodeResource(getResources(), R.drawable.batman_ad);
Bitmap bitmap2=BitmapFactory.decodeResource(getResources(), R.drawable.logo);
Bitmap resultingImage=Bitmap.createBitmap(320, 480, bitmap1.getConfig());
Canvas canvas = new Canvas(resultingImage);
Paint paint = new Paint();
paint.setAntiAlias(true);
Path path=new Path();
path.lineTo(150, 0);
path.lineTo(230, 120);
path.lineTo(70, 120);
path.lineTo(150, 0);
canvas.drawPath(path, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap2, 0, 0, paint);
compositeImageView.setImageBitmap(resultingImage);