Two images are given blow i call first image as frame image and second image as frame image.Here fst is my Linear Layout and i set the frame-image as background image of it. Now i want to fill the pattern image in my frame image's white area. Outer area of the frame image is transparent and inner area is white.
How can i fill pattern image in my frame-Image. I tryied this code.
private void patternFill(Bitmap tempBitmapColor) {
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.pattern_a);
BitmapDrawable bitmapDrawable = new BitmapDrawable(bmp);
bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
fst.setBackgroundDrawable(bitmapDrawable);
}
but this is giving a square bitmap Image.
and my Imageview is like this in which i want to fill pattern.
pattern image is like this-
I want to fill pattern image in the white area of this image only. I am able to fill the color inside this image frame but not done in case of pattern Images.
can any one help me please ...
UPDATE :-
I read that if we want to set more then one color so we should use shader I updated the current code
public void setPattern(String newPattern){
postInvalidate();
//get pattern
int patternID = getResources().getIdentifier(newPattern, "drawable", "com.akanksha.partternfillexperiment");
//decode
Bitmap patternBMP = BitmapFactory.decodeResource(getResources(), patternID);
//create shader
BitmapShader patternBMPshader = new BitmapShader(patternBMP,
Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
//color and shader
// drawPaint.setColor(0xFFFFFFFF);
drawPaint.setShader(patternBMPshader);
patternset=true;
}
So, Here I am able to set the shader successfully .
After this method OnDraw method will call
#Override
protected void onDraw(Canvas canvas) {
if(patternset){
for (int x = 0; x < canvasBitmap.getWidth(); x++) {
drawPath.moveTo(x, 0);
for (int y = 0; y < canvasBitmap.getHeight(); y++) {
drawPath.lineTo(x, y);
}
drawCanvas.drawPath(drawPath, drawPaint);
drawPath.reset();
invalidate();
canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
canvas.drawPath(drawPath, drawPaint);
}
What is setXfermode
I tried some mode in my setpattern method
like: DST_OVER,DST_IN
drawPaint.setColorFilter(new PorterDuffColorFilter(Color.YELLOW,Mode.MULTIPLY));
drawPaint.setXfermode(new PorterDuffXfermode(Mode.DST_OVER));
but not getting result according to need.
Is any mode can solve my purpose currently I am getting this output
I think I am very close to the result. I can draw the pattern what ever i need now the remaning problem is to set patten only in Inner non transparent area of frame.
I also tried this
if(canvasBitmap.getPixel(x, y) == Color.TRANSPARENT)
to identify transparent area so that i can fill pattern in another nontransparent are but this also not working.
Here I am uploading the Image for more clarification In the blow Image I fill the color in frame-image Now I want to fill pattern in place of Pink color.
Can anyone have any good point to try please share ...
You can have look on the following tutorial for your help
Drawing with Pattern Fills by Sue Smith
Using the above tutorial you can get following output
Related
I am trying to create a XML Drawable which I would use instead of the default marker in OSMDroid.
This is what it should look like in the end:
The black part will be loaded while creating the marker, as every marker will have a different image there. (these will be loaded from a Database if that´s important)
I tried to create a XML Drawable, and it kinda works, but the black part seems to be scaled to fit the image, thus making the marker just a big black square. (without the black part it works fine)
My current XML:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/marker"/> // main
<item android:drawable="#drawable/markerfill" /> // black part
</layer-list>
I tried using a scale for the second item, but as I looked into scales, it looked like I can´t use scales for this.
What I want:
I load the black box into the "main" part, resize it if necessary (while keeping the proportions) and change it from Java-Code.
I will be using this marker for OSMDroid.
What would be the best approach for this?
What I want: I load the black box into the "main" part, resize it if
necessary (while keeping the proportions) and change it from
Java-Code. I will be using this marker for OSMDroid.
If the first layer image will not be resized/scaled when used(I don't know how OSMDroid manages that marker) then you could use the current approach of a LayerDrawable and "place" the dynamic image with LayerDrawable.setLayerInset():
public Drawable makeBasicMarker(Bitmap bitmap) {
Drawable[] layers = new Drawable[2];
layers[0] = new BitmapDrawable(getResources(),
BitmapFactory.decodeResource(getResources(), R.drawable.marker));
layers[1] = new BitmapDrawable(getResources(), bitmap);
LayerDrawable ld = new LayerDrawable(layers);
ld.setLayerInset(1, xx, xx, xx, xx); // xx would be the values needed so bitmap ends in the upper part of the image
return ld;
}
If the image is scaled then you need to make your own Drawable and draw the parts yourself placing them appropriately.
give it a try like this: 1.define a view with the first drawable; 2. draw the second item with drawBitmap() method 3. call the postInvalidate() method to redraw.
drawing mBar on mBG, referring to those:
void onDraw(final Canvas canvas) {
super.onDraw(canvas);
float zoomX = mWidth / (float) mBG.getWidth();
float zoomY = mHeight / (float) mBG.getHeight();
canvas.drawBitmap(mBG, 0, 0, null);
canvas.drawBitmap(mBG, new Rect(0, 0, mBG.getWidth(), mBG.getHeight()),
new RectF(0, 0, mWidth, mHeight), null);
....
canvas.drawBitmap(mBar, new Rect(0, 0, (int) w, (int) h), new RectF(
X_LOCATION * zoomX, Y_LOCATION * zoomY, (X_LOCATION + w)
* zoomX, (Y_LOCATION + h) * zoomY), null);
}
I have been facing a weird problem in the last 2-3 days. The thing I would like to do looks easy but my solutions do not respond in somehow I would like. Let me inform you about what I certainly want.
I have a picture(.png). I have split it in 5 parts and saved them as .png also. My expectation is to have a view objects displaying those 5 pictures as a picture. So I have decided to use canvas.drawBitmap() method to draw that 5 pics in onDraw() method. It works fine. However, when I wanted to resize it I have used createScaledBitmap(bitmap, width, height, boolean). I have applied this way to every 5 differen bitmap object to resize and draw in onDraw() method. Unfortunately, I have got a full picture but between every picture there was a line vercitally. I have changed the boolean value as true in the method createScaledBitmap(bitmap, width, height, boolean) then it was working well with a bad quality of the picture.
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for (int i = 0; i < 5; i++) {
Bitmap image = BitmapFactory.decodeResource(getResources(),
getResources().getIdentifier(
"f" + i, "drawable", getContext().getPackageName()));
image = Bitmap.createScaledBitmap(image, getWidth(), getHeight(), true);
canvas.drawBitmap(image, new Matrix(), null);
}
}
http://imageshack.us/photo/my-images/717/96553428.png
http://imageshack.us/photo/my-images/809/33612864.png
http://imageshack.us/photo/my-images/255/53597408.png
Note : Drawing speed matters. It means it should take less than 500 ms to draw.
Hi every am new to this android development.
Currently am developing drawing application with adding stamps/labels to drawn image.so i have done drawing part so now i have to implement adding stamps/labels to that drawn image.
So please help me out this..
Bitmap Rbitmap = Bitmap.createBitmap(bitmap).copy(Config.ARGB_4444, true);
Canvas canvas = new Canvas(Rbitmap);
canvas.drawBitmap(label, -9, Rbitmap.getHeight()-label.getHeight()-10, null);
canvas.save();
return Rbitmap;
Making your question little more specific will help you more.If I understood is correct this piece of code will help you out to draw a bitmap to a drawn canvas.
private Paint green = new Paint();
private int greenx , greeny;
green.setColor(Color.GREEN);
green.setAntiAlias(false);
canvas.drawCircle(greenx,greeny,20,green);
how to add image in this code replace drawcircle with image how ?
You could be a little more specific, i.e posting some code to show what you have to get more specific answers. Anyway, you can draw a bitmap on top of another bitmap by using something like this:
//You will have a Bitmap bottomBmp, a Bitmap topBmp and a Canvas canvas.
//If you are inside an onDraw() method the canvas will be provided to you, otherwise you will have to create it yourself, use a mutable bitmap of the same size as the bottomBmp.
canvas.drawBitmap(bottomBmp, 0, 0, null); //Draw the bottom bitmap in the upper left corner of the canvas without any special paint effects.
canvas.drawBitmap(topBmp, 0, 0, null); //Draw the top bitmap over the bottom bitmap, change the zeroes to offset this bitmap.
Try with this code:
private Bitmap background;
public birdClass(Context context) {
super(context);
background = BitmapFactory.decodeResource(getResources(),R.drawable.splash );
}
I want to set a background of a View with a tiled bitmap, but the tiling needs to be anchored to the bottom-left, instead of the top-left corner (the default). For example, if the tiles are the smiley faces below, I want it to be tiled like:
Using xml drawables I could achieve either tiling (using tileMode="repeat") or bottom positioning (using gravity="bottom"), but combining both is not possible, even the documentation says so:
android:tileMode
Keyword. Defines the tile mode. When the tile mode is
enabled, the bitmap is repeated. Gravity is ignored when the tile mode
is enabled.
Although it's not internally supported, is there any way to achieve this, perhaps using custom views?
Another way would be to extend BitmapDrawable and override the paint() method:
In this method we avoid creating a new bitmap having the size of the view.
class MyBitmapDrawable extends BitmapDrawable {
private Paint mPaint = new Paint(Paint.FILTER_BITMAP_FLAG | Paint.DITHER_FLAG);
private boolean mRebuildShader = true;
private Matrix mMatrix = new Matrix();
#Override
public void draw(Canvas canvas) {
Bitmap bitmap = getBitmap();
if (bitmap == null) {
return;
}
if (mRebuildShader) {
mPaint.setShader(new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT));
mRebuildShader = false;
}
// Translate down by the remainder
mMatrix.setTranslate(0, getBounds().bottom % getIntrinsicHeight());
canvas.save();
canvas.setMatrix(mMatrix);
canvas.drawRect(getBounds(), mPaint);
canvas.restore();
}
}
It can be set to the view like this:
view.setBackgroundDrawable(new MyBitmapDrawable(getResources().getDrawable(R.drawable.smiley).getBitmap()));
Just a thought, and it's pretty roundabout, but could you flip your image vertically, and then apply a transform to your background to flip that vertically as well?
Using a custom view might involve handling all the drawing yourself, not just the background image.
Instead, I propose to set the view's background programmatically as shown:
// This drawable refers to an image directly and NOT an XML
BitmapDrawable smiley = (BitmapDrawable) getResources().getDrawable(R.drawable.smiley);
// Create a new bitmap with the size of the view
Bitmap bgBitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bgBitmap);
// Translate down by the remainder
Matrix matrix = new Matrix();
matrix.setTranslate(0, view.getHeight() % smiley.getIntrinsicHeight());
canvas.setMatrix(matrix);
// Tile the smileys
Paint paint = new Paint();
paint.setShader(new BitmapShader(smiley.getBitmap(), TileMode.REPEAT, TileMode.REPEAT));
canvas.drawPaint(paint);
view.setBackgroundDrawable(new BitmapDrawable(bgBitmap));
Points to consider:
I'm not sure if view.getWidth() & view.getHeight() are the correct
methods to get the dimensions.
What if smiley size is bigger than the view?
In My application i use canvas to do paint.
Now in this application i want to Draw the Little small logo image at the right-bottom corner of the canvas before saving it in to Bitmap.
So how to make it possible ?
If I understand you correctly, try
context.drawImage(img_elem, x, y);
to insert your image (where img_elem is your image reference and x/y are your destination coordinates).
To use x and y, depending where you wish to insert the image, try something like:
x = canvasWidth-25;
y = canvasHeight-25;
To place it in the bottom right corner.
Then, convert to an image as per normal:
var dataURL = canvas.toDataURL();
After Some googling and searching for code, i got the answer of my question:
I Use this function to got the Image at the right-bottom corner.
public static Bitmap addLogo(Bitmap mainImage, Bitmap logoImage) {
Bitmap finalImage = null;
int width, height = 0;
width = mainImage.getWidth();
height = mainImage.getHeight();
finalImage = Bitmap.createBitmap(width, height, mainImage.getConfig());
Canvas canvas = new Canvas(finalImage);
canvas.drawBitmap(mainImage, 0,0,null);
canvas.drawBitmap(logoImage, canvas.getWidth()-logoImage.getWidth() ,canvas.getHeight()-logoImage.getHeight() ,null);
return finalImage;
}
Hope this code help to anyother.
Thanks.