I'm a beginner/intermediate java-student and I just started working with android 2D programming. I'm working in surfaceView and want to set a backgroud, but the problem is I dont know how to make the background fill 100% of the screen, this is how I draw my background:
public GFXSurface(Context context) {
super(context);
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.roadtest);
getHolder().addCallback(this);
mThread = new ViewThread(this);
}
public void doDraw(Canvas canvas){
canvas.drawBitmap(mBitmap, 0, 0, null);
}
Something like that should do the trick, place it after obtaining your bitmap
float scale = (float)mBitmap.getHeight()/(float)getHeight();
int newWidth = Math.round(mBitmap.getWidth()/scale);
int newHeight = Math.round(mBitmap.getHeight()/scale);
Bitmap scaledBitmap = Bitmap.createScaledBitmap(mBitmap, newWidth, newHeight, true);
then draw it like you already do :)
Related
im building a game, when i use OnDraw my app do work, but i saw people in youtube drawing without it so im trying to draw some bitmaps without an OnDraw in a SurfaceView.
thank you for your help :)
public Graphics(Game activity) {
super(activity);
this.activity = activity;
left = BitmapFactory.decodeResource(getResources(), R.drawable.left_button);
right = BitmapFactory.decodeResource(getResources(), R.drawable.right_button);
shootUp = BitmapFactory.decodeResource(getResources(), R.drawable.shoot_up_button);
shootSide = BitmapFactory.decodeResource(getResources(), R.drawable.shoot_side_button);
this.setBackgroundResource(R.drawable.background);
paint = new Paint();
ninja = new Ninja(screenW * 5 / 12, upY, screenW / 18, buttonH, getResources());
createEnemies();
resize();
resume();
}
public void draw() {
if (getHolder().getSurface().isValid()) {
Canvas canvas = getHolder().lockCanvas();
canvas.drawBitmap(ninja.main, ninja.x, ninja.y, paint);
canvas.drawBitmap(left,leftX,leftY,paint);
canvas.drawBitmap(right,rightX,rightY,paint);
canvas.drawBitmap(shootUp,upX,upY,paint);
canvas.drawBitmap(shootSide,sideX,sideY,paint);
System.out.println("drawing");
getHolder().unlockCanvasAndPost(canvas);
}
}
I need a bit of help. I have an ImageView with a touch listener, and I am able to capture all touch inputs into a matrix, and apply that matrix to the ImageView and VOILA! the image pans and zooms appropriately.
Here is the trouble: I'd now like to CROP the image in such a way that it ALWAYS ends up the same size; eg a 300x300 image.
In other words, suppose I have a 300x300 square in the middle of my screen, a user pans and zooms an image until an item of interest fits into that square, and hits "next". I would like to have a resulting image that has cropped the photo to only be the 300x300 portion that was contained in the box.
Make sense?? Please help! Thanks comrades! See a bit of code below for what I have tried thus far.
float[] matrixVals = new float[9];
ImageTouchListener.persistedMatrix.getValues(matrixVals);
model.setCurrentBitmap(Bitmap.createBitmap(model.getOriginalBitmap(), 0, 0, model.getTargetWidth(), model.getTargetHeight(), ImageTouchListener.persistedMatrix, true));
model.setCurrentBitmap(Bitmap.createBitmap(model.getCurrentBitmap(), Math.round(matrixVals[Matrix.MTRANS_X]), Math.round(matrixVals[Matrix.MTRANS_Y]), model.getTargetWidth(), model.getTargetHeight(), null, false));
Finally, I would also like to be able to SHRINK the image into the box, where the edges may actually need to be filled in with black or white or some kind of border... So far, everything I do other than no pan or zoom at all crashes when I hit next.
Thanks again!
see this custom ImageView, the most important part is onTouchEvent where cropped Bitmap is created and saved to /sdcard for verification:
class IV extends ImageView {
Paint paint = new Paint();
Rect crop = new Rect();
public IV(Context context) {
super(context);
paint.setColor(0x660000ff);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
crop.set(w / 2, h / 2, w / 2, h / 2);
crop.inset(-75, -75);
}
#Override
public void setImageResource(int resId) {
super.setImageResource(resId);
setScaleType(ScaleType.MATRIX);
Matrix m = getImageMatrix();
m.postScale(2, 2);
m.postTranslate(40, 30);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
Bitmap croppedBitmap = Bitmap.createBitmap(crop.width(), crop.height(), Config.ARGB_8888);
Canvas c = new Canvas(croppedBitmap);
c.translate(-crop.left, -crop.top);
c.concat(getImageMatrix());
getDrawable().draw(c);
// just save it for test verification
try {
OutputStream stream = new FileOutputStream("/sdcard/test.png");
croppedBitmap.compress(CompressFormat.PNG, 100, stream);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
return false;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(crop, paint);
}
}
It's not really clear for me what your problem is, a calculation or a drawing problem ... if it is a drawing problem I might have the solution ...
Create a new bitmap, get the canvas and draw the correct rect of the big image into the new smaller one ....
Bitmap bigPicture; //your big picture
Bitmap bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bitmap);
Rect source = ...
Rect dest = ...
c.drawBitmap(bigPicture, source, dest, paint);
Now if your problem is a calculation problem I might have a solution too ...
I have created a custom surface view class with threads and I added the custom surface view in my main activity inside a relative layout. Now I declare a bitmap in the custom surface view class constructor.
public static Bitmap mbitmap;
public Surface(Context ctx, AttributeSet attrSet) {
super(ctx, attrSet);
context = ctx;
mbitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.abc);
SurfaceHolder holder = getHolder();
holder.addCallback(this);
}
And I have drawn it in canvas
public void doDraw(Canvas canvas) {
canvas.drawBitmap(mbitmap, 0, 0, null);
}
I get the successful drawing. But it occupies the whole screen
<RelativeLayout
android:id="#+id/outer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.cg.Surface
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="#+id/processing_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</RelativeLayout>
</RelativeLayout>
even though I use Wrap_Content for Height and Width I get the whole screen drawn at the back. How to draw the bitmap image with appropriate size alone? Is that possible with this override method in Custom Surface View Class :
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height)
{ }
If no how to use setMeasuredDimension within it and restrict the size of surfaceview within the Bitmap?
We can use a rectangle, and draw an image inside it using Matrix, so we can achieve
public void doDraw(Canvas canvas)
{
int width = mbitmap.getWidth();
int height = mbitmap.getHeight();
float h= (float) height;
float w= (float) width;
Matrix mat=new Matrix();
mat.setTranslate( 500, 500 );
mat.setScale(800/w ,800/h);
canvas.drawBitmap(mbitmap, mat, null);
}
we can achieve that using the
public void drawBitmap (Bitmap bitmap, Rect src, Rect dst, Paint paint);
I mean :
canvas.drawBitmap(bitmap, src, dst, paint);
method in onDraw with
Rect src = new Rect(0, 0, width, height);
Rect dst = new Rect(x, y, x + width, y + height);
makes it done I hope. I thought this might help others, since a long time I awaited to reach this solution of myself.
hello guys i'm trying to get an image(Frame from resources) to overlay it over the original bitmap. so far i couldn't make my Bitmap goes into the frame as the frame always empty. the original bitmap is now showing inside the frame.
here is my code that i'm using to accomplish this.
Canvas canvas = new Canvas();
Bitmap border = null;
Bitmap scaledBorder = null;
border = BitmapFactory.decodeResource(getResources(), R.drawable.frame1);
int width = bmp.getWidth();
int height = bmp.getHeight();
scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0, new Paint());
view.setImageBitmap(scaledBorder);
bmp as my original Bitmap from Gallery or Camera. i can't find away to put them together. only the frame will appear but not the bmp.
thanks in advance.
thanks man i figured it out by own. using this
void hm1(){
Bitmap border = BitmapFactory.decodeResource(getResources(), R.drawable.vignette2);
int width = bmp.getWidth();
int height = bmp.getHeight();
change = Bitmap.createScaledBitmap(change, width, height, false);
Canvas canvas = new Canvas(change);
Bitmap scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0,null);
//canvas.drawBitmap(k, 0, 0, null);
view.setImageBitmap(change);
}
by adding this method on any click button , menu etc you can draw two bitmaps over each other.
P.S : Bitmap change is another bitmap from the original one as i don't want the user to apply the Overlay on the original method but on the changed one.
hope the answer helps someone. thanks
Bottom line, first you need to add your original image to the canvas, then the border, then place the canvas on the view. Your best bet is to do this in an onDraw() method. Something like this should work:
#Override
void onDraw (Canvas canvas)
{
canvas.drawBitmap(bmp,0,0,new Paint())
Bitmap border = null;
Bitmap scaledBorder = null;
border = BitmapFactory.decodeResource(getResources(), R.drawable.frame1);
int width = bmp.getWidth();
int height = bmp.getHeight();
scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0, new Paint());
}
Alternatively, you could call the draw() function from the view.
canvas.drawBitmap(bmp,0,0,new Paint())
Bitmap border = null;
Bitmap scaledBorder = null;
border = BitmapFactory.decodeResource(getResources(), R.drawable.frame1);
int width = bmp.getWidth();
int height = bmp.getHeight();
scaledBorder = Bitmap.createScaledBitmap(border,width,height, false);
canvas.drawBitmap(scaledBorder, 0, 0, new Paint());
view.draw(canvas);
I have an image which I'm using as a background for a RelativeLayout. The image needs to be tiled horizontally to make a pattern.
I'm able to get the image to tile horizontally by using this code:
BitmapDrawable b3 = (BitmapDrawable)getResources().getDrawable(R.drawable.background);
b3.setTileModeX(Shader.TileMode.REPEAT);
v.findViewById(R.id.layout).setBackgroundDrawable(b3);
The problem is that the image also tiles vertically. It seems to tile in the "clamp" mode in the vertical, but "repeat" mode in the horizontal. Here is a screenshot:
As you can see, the image is just a little bit smaller than the space it occupies, and the bottom edge is "clamped".
How can I set the image to stretch vertically but tile horizontally?
This method invokes creation of new bitmap but it looks like it's acrhiving your goal
View view = findViewById(R.id.layout);
BitmapDrawable bd = (BitmapDrawable) getResources().getDrawable(R.drawable.tile);
int width = view.getWidth();
int intrinsicHeight = bd.getIntrinsicHeight();
Rect bounds = new Rect(0,0,width,intrinsicHeight);
bd.setTileModeX(TileMode.REPEAT);
bd.setBounds(bounds);
Bitmap bitmap = Bitmap.createBitmap(bounds.width(), bounds.height(), bd.getBitmap().getConfig());
Canvas canvas = new Canvas(bitmap);
bd.draw(canvas);
BitmapDrawable bitmapDrawable = new BitmapDrawable(getResources(), bitmap);
view.setBackground(bitmapDrawable);
Please note that it only works if view was already layouted, so a method lile onWindowFocusChanged is a good place for this code.
I feel it is straight forward:(This code will tile in Y and repeat in x)
In your onWindowFoucsChanged you call:
public void onWindowFocusChanged(boolean hasFocus) {
// TODO Auto-generated method stub
super.onWindowFocusChanged(hasFocus);
Drawable d = getRepeatingBG(this, R.drawable.image_that_you_want_to_repeat);
body_view.setBackgroundDrawable(d);
}
private Drawable getRepeatingBG(Activity activity, int center)
{
DisplayMetrics dm = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(dm);
BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled=true;
Bitmap center_bmp = BitmapFactory.decodeResource(activity.getResources(), center, options);
center_bmp.setDensity(Bitmap.DENSITY_NONE);
center_bmp=Bitmap.createScaledBitmap(center_bmp, dm.widthPixels , center_bmp.getHeight(), true);
BitmapDrawable center_drawable = new BitmapDrawable(activity.getResources(),center_bmp);
//change here setTileModeY to setTileModeX if you want to repear in X
center_drawable.setTileModeY(Shader.TileMode.REPEAT);
return center_drawable;
}
Far too late for you, but may be useful for others.
You can create a custom View in order to do this. Simply scale your source bitmap to be as high as your view and then draw it repeatedly on the canvas:
public class RepeatingXImageView extends View {
Bitmap bitmap;
Paint paint;
public RepeatingXImageView(Context context) {
super(context);
}
public RepeatingXImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RepeatingXImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if(changed) {
paint = new Paint();
bitmap = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.seekbar_overlay);
bitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth(), bottom - top, false);
}
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(bitmap == null) return;
int left = 0;
while(left < getWidth()) {
canvas.drawBitmap(bitmap, left, 0, paint);
left += bitmap.getWidth();
}
}
}
Having the same problem myself. Tried using 9patch image but it seems you cannot use 9patch images along with tiling, the 9patch stretches the image no matter what you define in the tiling property.
At the end what i will do is ask the creator of the image to stretch it vertically or do it myself. I would love a better solution if anyone finds one.