1. CS499 – Mobile Application Development
Fall 2013
Animation & Graphics

2. 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

3. 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

4. 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()); 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, …

5. Drawing in Android - XML
/res/drawable/simplerectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="
<solid android:color="#FF0000FF" />
</shape>
/res/layout/xmldrawable.xml
<ScrollView xmlns: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"
/>
</LinearLayout>
</ScrollView>
Drawing in Android - XML

6. 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

7. TransitionDrawable /res/drawable/shape_transition.xml
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android=" >
<item
android:right="50px"/>
android:left="50px"/>
</transition>
/res/layout/main.xml
<RelativeLayout xmlns:android="
android:layout_width="match_parent" android:layout_height="match_parent"
android:gravity="center">
</RelativeLayout>

8. TransitionDrawable
public class AnimationTransitionActivity extends Activity 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); }

9. 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

10. Animation Class /res/anim/icon_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="
<alpha android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="3000" />
<rotate android:fromDegrees="0" android:toDegrees="360"
android:pivotX="50%" android:pivotY="50%" android:duration="3000"
android:startOffset="3000" />
<translate android:fromXDelta="0" android:toXDelta="50"
android:fromYDelta="0" android:toYDelta="50" android:startOffset="6000"
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"
/>
<alpha android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="1000" android:startOffset="10000"
/>
</set>

11. 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="
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent"
<ImageView android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

12. 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()

13. 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. 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()

14. 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(); }

15. 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); 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