How can I create animation for moving a image like a curve from top to bottom? Here I used TranslateAnimation for this,
But it will move the image from top to bottom depends on the x, y co-ordinates. But, I want to move the image like a curve.
But in my code, it moves like a line.
public class ImageMoveActivity extends Activity {
/** Called when the activity is first created. */
TranslateAnimation transform;
TextView tv;
ImageView im1,im2,im3;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
transform = new TranslateAnimation(0, 150, 0, 300);
//transform = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 20, Animation.RELATIVE_TO_PARENT, 50, Animation.RELATIVE_TO_PARENT, 0);
//im1 = (ImageView)findViewById(R.id.imageView1);
im1 = (ImageView)findViewById(R.id.imageView1);
im2 = (ImageView)findViewById(R.id.imageView2);
im3 = (ImageView)findViewById(R.id.imageView3);
tv = (TextView)findViewById(R.id.Textview);
Bitmap bitmap = BitmapFactory.decodeResource(this
.getResources(), R.drawable.xxl);
/* set other image top of the first icon */
Bitmap bitmapStar = BitmapFactory.decodeResource(this
.getResources(), R.drawable.icon);
Bitmap bmOverlay = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
// Bitmap bmOverlay1 = Bitmap.createBitmap(bitmapStar.getWidth(),
// bitmapStar.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(bmOverlay);
//Canvas canvas1 = new Canvas(bmOverlay1);
canvas.drawARGB(0x00, 0, 0, 0);
canvas.drawBitmap(bitmap, 0, 0, null);
//canvas1.drawARGB(0x00, 0, 0, 0);
canvas.drawBitmap(bitmapStar, 0, 0, null);
BitmapDrawable dr = new BitmapDrawable(bmOverlay);
//BitmapDrawable dr1 = new BitmapDrawable(bmOverlay1);
dr.setBounds(10, 30, 10, 30);
//dr1.setBounds(10, 30, 10, 30);
im1.setImageDrawable(dr);
//im3.setImageDrawable(dr1);
//im1.setImageDrawable(R.drawable.xxl);
im1.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
start();
hide();
}
private void start() {
// TODO Auto-generated method stub
im1.startAnimation(transform);
transform.setDuration(1000);
//transform.setFillAfter(true);
}
private void hide() {
// TODO Auto-generated method stub
im1.setVisibility(View.GONE);
}
});
}
}
Can any one help me on this?
TranslateAnimation can move Views from one point to another in a straight line. As far as I know you can't give any other path to it. Try using custom views and canvas for the the this, where you can pass x and y coordinates while drawing and invalidating the view. You need to override the following method while extending the View class. The changeCoordinate() method here can change the x,y coordinates in a curve.
public void onDraw(Canvas canvas){
canvas.drawBitmap(bitmap,x,y,null);
changeCoordinate();
invalidate()
}
You can create a series of translate animation from one point to another on curve and apply the animation to views.
Like if we have an imageView which is to be animated, and a1, and a2 are animations to be applied:
imgView.clearAnimation();
imgView.startAnimation(a1);
imgView.clearAnimation();
imgView.startAnimation(a2);
Related
I am instantiating the canvas variable in the onCreate function and if i draw a line in onCreate function, it is displayed fine. However, if i draw the line in an onClick function of a button, it does not work. What could be the reason.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
imageView = (ImageView) this.findViewById(R.id.imageView);
BitmapDrawable drawable = (BitmapDrawable) imageView.getDrawable();
Bitmap bitmap = drawable.getBitmap();
Bitmap mutableBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);
canvas = new Canvas(mutableBitmap);
imageView.setImageBitmap(mutableBitmap);
paint = new Paint();
paint.setColor(Color.rgb(255, 153, 51));
paint.setStrokeWidth(10);
}
public void displayLine(View view) {
canvas.drawLine(10, 20, 400, 500, paint);
}
Not that I would necessarily do it this way... but have you tried adding an invalidate call? i.e.:
public void displayLine(View view) {
canvas.drawLine(10, 20, 400, 500, paint);
view.invalidate();
}
For example: myPos.getCoordX() is 0 and myPos.getCoordY() is 0
When I update the variable, myPos.getCoordX() is 50 and myPos.getCoordY() is 100
Then I call the showPosition() method again.
I want to: start a moving animation from 0,0 to 50,100
private void showPosition() {
Bitmap floorPlan = BitmapFactory.decodeResource(getResources(),
R.drawable.wallpaper).copy(Bitmap.Config.ARGB_4444, true);
Bitmap point = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_launcher).copy(Bitmap.Config.ARGB_4444, true);
Bitmap PositionOnFloorplan = overlay(floorPlan, point);
// 1
PositionOnFloorplan = floorPlan.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(PositionOnFloorplan);
canvas.drawBitmap(point, (float) (myPos.getCoordX()),
(float) (myPos.getCoordY()), null);
ImageView imageView = (ImageView) findViewById(R.id.imggg);
imageView.setAdjustViewBounds(true);
imageView.setImageBitmap(PositionOnFloorplan);
}
private Bitmap overlay(Bitmap floorPlan, Bitmap point) {
Bitmap bmOverlay = Bitmap.createBitmap(floorPlan.getWidth(),
floorPlan.getHeight(), floorPlan.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(floorPlan, new Matrix(), null);
canvas.drawBitmap(point, (float) (myPos.getCoordX()),
(float) (myPos.getCoordY()), null);
return bmOverlay;
}
As you aren't using a custom view and the onDraw method to update your canvas, I recommend using a property animator to animate the canvas drawing.
Below is code for an example animation that moves a view in the X with canvas.translate(value,0);. You will need to add in the Y value, example: canvas.translate(valueX,valueY);. Just define another ValueAnimator for the Y, create an AnimatorSet, and do animatorSet.playTogether(valueanimatorX, valueanimatorY) instead, finishing with animatorSet.start();
public void doCanvas(){
//Create our resources
Bitmap bitmap = Bitmap.createBitmap(mLittleChef.getWidth(), mLittleChef.getHeight(), Bitmap.Config.ARGB_8888);
final Canvas canvas = new Canvas(bitmap);
final Bitmap chefBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.dish_special);
final Bitmap starBitmap= BitmapFactory.decodeResource(getResources(),R.drawable.star);
//Link the canvas to our ImageView
mLittleChef.setImageBitmap(bitmap);
//animate from canvas width, to 0, and back to canvas width
ValueAnimator animation= ValueAnimator.ofInt(canvas.getWidth(),0,canvas.getWidth());
animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int value = (Integer) animation.getAnimatedValue();
//Clear the canvas
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
canvas.drawBitmap(chefBitmap, 0, 0, null);
canvas.save();
canvas.translate(value,0);
canvas.drawBitmap(starBitmap, 0, 0, null);
canvas.restore();
//Need to manually call invalidate to redraw the view
mLittleChef.invalidate();
}
});
animation.addListener(new AnimatorListenerAdapter(){
#Override
public void onAnimationEnd(Animator animation) {
simpleLock= false;
}
});
animation.setInterpolator(new LinearInterpolator());
animation.setDuration(mShortAnimationDuration);
animation.start();
}
I have multiple rectangles in the middle of the view (canvas). I want to move them all to the edges of the screen smoothly simultaneously. This is not a jump, i need to see the between positions from start to end so it appear as a smooth transition.
Whats the best way to do that?
Try this code :
public class animatedView extends View {
Bitmap i;
int x=0;
int y=0;
public animatedView(Context context) {
super(context);
// TODO Auto-generated constructor stub
i = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
Rect bk = new Rect();
bk.set(0, 0, canvas.getWidth(), canvas.getHeight());
Paint pBk = new Paint();
pBk.setStyle(Paint.Style.FILL);
pBk.setColor(Color.BLUE);
canvas.drawRect(bk, pBk);
canvas.drawBitmap(i, x, y, pBk);
x+=10;
invalidate();
}
}
Hope it helps !
I need to be able to create a custom image through code, and then set that image to an imageview
I want this image to have a solid background colour, a title and an icon.
I want it to be customisable so that I can call to create an image with values
for example
createImage(String bckgColourHex, String title, int iconResource){
// create image using value here
return image.
}
Then I can use the drawable to set it to my imageView
This is what I am trying so far
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView image = (ImageView) findViewById(R.id.imageView1);
BitmapDrawable customImage = writeOnDrawable(R.drawable.background_gradient, "TEXT GOES HERE");
image.setBackgroundDrawable(customImage);
}
public BitmapDrawable writeOnDrawable(int drawableId, String text){
Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.BLACK);
paint.setTextSize(20);
Canvas canvas = new Canvas(bm);
canvas.drawText(text, 0, bm.getHeight()/2, paint);
return new BitmapDrawable(bm);
}
Thank you
public static Drawable makeBorderedDrawable(Context mContext, int width, String xCode, Boolean unAvail) {
Paint p = new Paint();
Bitmap bkg = null;
final int FULL_ALPHA = 0xFF123456; // of whatever color you want
int pixel = FULL_ALPHA;
// first create a mutable bitmap
bkg = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bkg);
p.setColor(pixel);
c.drawCircle(width / 2, width / 2, width / 2, p);
// or draw rect, or lines, or drawtext....or whatever
return new BitmapDrawable(mContext.getResources(), bkg);
// or you could return a Bitmap if you prefer.
}
I am Getting a problem drawing rectangle over imageview. Here is the peace of code. Xml is also there . my whole concern is if we can draw rect over imageview.??
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cropimage);
paint=new Paint();
bobj = new BaldBooth1();
bm = BaldBooth1.bMap;
d = new BitmapDrawable(bm);
iv = ((ImageView) findViewById(R.id.image));
iv.setImageDrawable(d);
createRectInView(iv);
((ImageButton) findViewById(R.id.next)).setOnClickListener(this);
}
public void createRectInView(View v) {
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas=new Canvas();
canvas.drawRect(50, 50, 80, 80, paint);
v.draw(canvas);
}
Your method createRectInView(View v) does not draw a rectangle over ImageView, it just create a canvas, draw a rectangle on that canvas, then draw the content of ImageView on that canvas, so it does not do what you expect.
Here is one possible resolution: you can extend ImageView and override its onDraw() method, for example..
public class ExtendedImageView extends ImageView {
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3);
canvas.drawRect(50, 50, 80, 80, paint);
}
}
Updated:
Hi arun, I just test the code, and it works fine. Here are the details: for example, you can create the ExtendedImageView in package com.abc.widget, so in your cropImage.xml file, replace the <ImageView android:id="#+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content"> to <com.abc.widget.ExtendedImageView android:id="#+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content">. As you see, you only need to change the class name. Then changed the onCreate() method as:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cropimage);
bobj = new BaldBooth1();
bm = BaldBooth1.bMap;
d = new BitmapDrawable(bm);
iv = ((ImageView) findViewById(R.id.image));
iv.setImageDrawable(d);
((ImageButton) findViewById(R.id.next)).setOnClickListener(this);
}