CS499 – Mobile Application Development Fall 2013 Animation & Graphics

2D Graphics With a View With a Canvas Simple graphic, no updating Java and/or XML With a Canvas More complex graphics with regular updating

Drawable Represents something that can be drawn, such as a bitmap, color, shape, etc. BitmapDrawable ColorDrawable ShapeDrawable – primitive shapes such as circles, oval, rectangles, … TransitionDrawable – 2-layer graphics – fades between layer 1 and 2

Drawing in Android - Java public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new SimpleView(this)); } private static class SimpleView extends View{ private ShapeDrawable mDrawable = new ShapeDrawable(); public SimpleView(Context context) { super(context); setFocusable(true); this.mDrawable = new ShapeDrawable(new RectShape()); this.mDrawable.getPaint().setColor(0xFFFF0000); @Override protected void onDraw(Canvas canvas) { int x = 10; int y = 10; int width = 300; int height = 50; this.mDrawable.setBounds(x,y,x + width, y + height); this.mDrawable.draw(canvas); y += height + 5; Drawing in Android - Java OvalShape(), PathShape(), RoundRectShape,Shape, …

Drawing in Android - XML /res/drawable/simplerectangle.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FF0000FF" /> </shape> /res/layout/xmldrawable.xml <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"> <LinearLayout android:orientation="vertical" android:layout_height="wrap_content" > <ImageView android:layout_width="fill_parent" android:layout_height="50dip" android:src="@drawable/simplerectangle" /> </LinearLayout> </ScrollView> Drawing in Android - XML

ARGB color values ARGB – Alpha, Red, Green, Blue – common method for defining color values Each color (RGB) defined as a percentage level from 0 to 255 Alpha specifies a level of transparency

TransitionDrawable /res/drawable/shape_transition.xml <?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/cyan_shape" android:right="50px"/> android:drawable="@drawable/magenta_shape" android:left="50px"/> </transition>   /res/layout/main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/main_window" android:gravity="center"> </RelativeLayout>

TransitionDrawable public class AnimationTransitionActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); RelativeLayout rl = (RelativeLayout) findViewById(R.id.main_window); ImageView iv = new ImageView(this); Resources res = getResources(); TransitionDrawable trans = (TransitionDrawable) res .getDrawable(R.drawable.shape_transition); iv.setImageDrawable(trans); rl.addView(iv); trans.setCrossFadeEnabled(true); trans.startTransition(5000); }

Animation Class Animates the contents of a View Animation – a series of timed changes to View properties such as size, position, etc. Manipulate times to give effect of sequential or simultaneous changes

Animation Class /res/anim/icon_animation.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="3000" android:interpolator="@android:anim/linear_interpolator" /> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="3000" android:startOffset="3000" android:interpolator="@android:anim/accelerate_interpolator" /> <translate android:fromXDelta="0" android:toXDelta="50" android:fromYDelta="0" android:toYDelta="50" android:startOffset="6000" android:interpolator="@android:anim/overshoot_interpolator" android:duration="2000" /> <scale android:fromXScale="1" android:toXScale="2" android:fromYScale="1" android:toYScale="2" android:duration="2000" android:pivotX="50%" android:pivotY="50%" android:startOffset="8000" android:interpolator="@android:anim/anticipate_overshoot_interpolator" /> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="1000" android:startOffset="10000" android:interpolator="@android:anim/decelerate_interpolator" /> </set>

Animation Class public class AnimationTweenActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageView iv = (ImageView) findViewById(R.id.icon); Animation anim = AnimationUtils.loadAnimation(this,R.anim.icon_animation); iv.startAnimation(anim); } /res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/frame"> <ImageView android:id="@+id/icon" android:visibility="invisible" android:src="@drawable/b128" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

Canvas Helper class for drawing Bitmaps Bitmap represents a matrix of Pixels Drawing operations additionally require Something to draw (e.g. Rect, Path, Text, Bitmap A paint object (for setting drawing colors & styles) Multiple drawing styles drawText(), drawPoints(), drawColor(), drawOval(), drawBitmap()

Using a Canvas will cause a onDraw() public class BounceAnimationActivity extends Activity { protected static final int GUIUPDATEIDENTIFIER = 0x101; // unique identifier Thread myRefreshThread = null; BounceView myBounceView = null; Handler myGUIUpdateHandler = new Handler () { public void handleMessage(Message msg) { switch (msg.what) { case BounceAnimationActivity.GUIUPDATEIDENTIFIER: myBounceView.invalidate(); break; } super.handleMessage(msg); }; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); this.requestWindowFeature(Window.FEATURE_NO_TITLE); this.myBounceView = new BounceView(this); this.setContentView(this.myBounceView); new Thread(new RefreshRunner()).start(); … Thread class here will cause a onDraw()

More Advanced Animation class RefreshRunner implements Runnable { public void run() { while (!Thread.currentThread().isInterrupted()) { Message message = new Message(); message.what = BounceAnimationActivity.GUIUPDATEIDENTIFIER; BounceAnimationActivity.this.myGUIUpdateHandler.sendMessage(message); try { Thread.sleep(100); } catch (InterruptedException e) { Thread.currentThread().interrupt(); }

public class BounceView extends View { protected Drawable mySprite; protected Point mySpritePos = new Point(0,0); protected enum HorizontalDirection{LEFT, RIGHT}; protected enum VerticalDirection {UP, DOWN} ; protected HorizontalDirection myXDirection = HorizontalDirection.RIGHT; protected VerticalDirection myYDirection = VerticalDirection.UP; public BounceView(Context context) { super(context); this.mySprite = this.getResources().getDrawable(R.drawable.b64); } @Override protected void onDraw(Canvas canvas) { this.mySprite.setBounds(this.mySpritePos.x, this.mySpritePos.y,this.mySpritePos.x+50, this.mySpritePos.y+50); if (mySpritePos.x >= this.getWidth() - mySprite.getBounds().width()) this.myXDirection = HorizontalDirection.LEFT; else if (mySpritePos.x <= 0) this.myXDirection = HorizontalDirection.RIGHT; if (mySpritePos.y >= this.getHeight() - mySprite.getBounds().height()) this.myYDirection = VerticalDirection.UP; else if (mySpritePos.y <= 0) this.myYDirection = VerticalDirection.DOWN; if (this.myXDirection == HorizontalDirection.RIGHT) this.mySpritePos.x += 10; else this.mySpritePos.x -= 10; if (this.myYDirection == VerticalDirection.DOWN) this.mySpritePos.y += 10; else this.mySpritePos.y -= 10; this.mySprite.draw(canvas); BounceView