Android  Drawing  and  Anima-on  

Jussi  Pohjolainen  Tampere  University  of  Applied  Sciences  

Android  Graphics  

•  Custom  2D  Graphics  – android.graphics.drawable  package  

•  OpenGL  ES  1.0  high  performance  3D  graphics  – javax.microedition.khronos.opengles  package  

•  In  this  lecture,  we  will  concentrate  on  the  2D  graphics  

DRAWABLES  AND  SCREEN  SIZES  

Drawables  

•  A  Drawable  is  a  general  abstrac-on  for  “something  that  can  be  drawn”  – BitmapDrawable, ShapeDrawable, LayerDrawable …

•  How  to  define  and  instan-ate  Drawable?  1.  Use  image  saved  to  project  resources  2.  XML  file  that  defines  drawable  proper-es  3.  In  Java  

1.  Use  image  saved  to  project  resources  

•  Supported  types:  PNG  (preferred),  JPG  (acceptable)  and  GIF  (discoured)  

•  Add  the  file  to  res/drawable  •  Refer  using  the  R  –  class  •  Use  it  from  Java  or  XML    

Save  Image  to  Project  

Screen  Sizes  

•  Android  supports  different  screen  sizes  •  Simplifying  developer’s  work:  – 4  generalized  sizes:  small,  normal,  large,  xlarge  – 4  generalized  densi-es:  ldpi,  mdpi,  hdpi,  xhdpi  

 

Emulators  for  different  Screen  Sizes  

Resources  res/layout/my_layout.xml            // layout for normal screen size

res/layout-small/my_layout.xml      // layout for small screen size

res/layout-large/my_layout.xml      // layout for large screen size

res/layout-large-land/my_layout.xml // layout for large screen size in landscape mode

res/layout-xlarge/my_layout.xml     // layout for extra large screen size

res/drawable-lhdpi/my_icon.png      // image for low density

res/drawable-mdpi/my_icon.png   // image for medium density

res/drawable-hdpi/my_icon.png       // image for high density

res/drawable-nodpi/composite.xml    // density independent resource

Displaying  Image  using  Java  public class DrawingExamples extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Context mContext = getApplicationContext(); Resources res = mContext.getResources(); Drawable drawable = res.getDrawable(R.drawable.androidlogo); ImageView imageview = new ImageView(this); imageview.setImageDrawable(drawable); setContentView(imageview); } }

Easier  way  public class DrawingExamples extends Activity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

ImageView imageview = new ImageView(this);

imageview.setImageResource(R.drawable.androidlogo);

setContentView(imageview);

}

}

Or  use  it  via  the  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”>

<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/androidlogo" /> </LinearLayout>

2D  DRAWING  

Drawing  on  a  View  

•  If  no  significant  frame-­‐rate  speed  needed,  draw  to  custom  View

•  Extend  View  and  define  onDraw  –  method  •  onDraw() is  called  automa-cally  •  Redraw:  invalidate() •  Inside  onDraw(),  Canvas  is  given  

Simple  2D  Drawing:  View  public class CustomDrawableView extends View { public CustomDrawableView(Context context, AttributeSet attr) { super(context, attr); } protected void onDraw(Canvas canvas) { // Paint class holds style information Paint myPaint = new Paint(); myPaint.setStrokeWidth(3); myPaint.setColor(0xFF097286); canvas.drawCircle(200, 200, 50, myPaint); invalidate(); } }

Simple  2D  Drawing:  View  

<fi.tamk.CustomDrawableView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

/>

ShapeDrawable

•  With  ShapeDrawable,  one  can  draw  primi-ve  2D  shapes  – ArcShape, OvalShape, RoundRectShape, PathShape, RectShape

•  ShapeDrawable  takes  Shape  object  and  manages  it  into  screen  

•  Shapes  can  be  defined  in  XML  

Shape  Drawable  in  Java  // Drawing primitive 2D shapes public class CustomDrawableView extends View {     private ShapeDrawable mDrawable;     public CustomDrawableView(Context context) {         super(context);         int x = 10;         int y = 10;         int width = 300;         int height = 50;         mDrawable = new ShapeDrawable(new OvalShape());         mDrawable.getPaint().setColor(0xff74AC23);         mDrawable.setBounds(x, y, x + width, y + height);     }     protected void onDraw(Canvas canvas) {         mDrawable.draw(canvas);     } }

Shape  Drawable  in  XML  // res/drawable-xxx/myshapes.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <gradient android:angle="90" android:startColor="#ffffff" android:endColor="#ff0000" android:type="linear" /> <size android:width="60dp" android:height="40dp" /> </shape>

Shape  Drawable  in  XML  // 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" >

<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/myshapes" /> </LinearLayout>

Result  

ANIMATION  

About  Anima-on  

–  1)  View  Anima<on  •  Any  View  object  to  perform  tweened  anima-on  and  frame  

by  frame  anima-on  •  Tween  anima-on  calculates  anima-on  given  informa-on:  

start,  end,  size,  rota-on  and  other  •  Frame  by  frame:  series  of  drawables  one  ader  another  

–  2)  Property  Anima<on  System  (Android  3.x)  •  “Animate  almost  anything”  •  Define  anima-on  to  change  any  object  property  over  -me,  

whether  in  screen  or  not    

Differences  

•  View  +  Less  -me  to  setup  +  Less  code  to  write  -­‐  Only  View  objects  -­‐  Only  certain  aspects  to  animate  (scaling,  rota-ng..)  -­‐  View  itself  is  not  modified  when  anima-ng  

•  Property  anima<on  system  +  Anima-ng  also  non  View  objects  +  Anima-ng  any  property  of  any  object  -­‐  More  work  

VIEW  ANIMATION  

About  View  Anima-on  

•  View  anima-on  can  be  1)  tween  or  2)  frame  by  frame  anima-on  

•  Tween  anima-on  –  Can  perform  series  of  simple  transforma-ons  (posi-on,  size,  rota-on,  transparency)  on  View  object  

–  In  XML  or  in  code  

•  Frame  anima-on  –  Sequence  of  different  images  –  In  XML  or  in  code  

1)  Tween  anima-on  

•  Preferred  way:  Define  in  XML  •  Anima-on  xml  is  stored  in  res/anim  directory  •  Root  element  can  be:  alpha,  scale,  translate,  rotate  or  set  that  holds  groups  of  these  elements  

Tween  Anima-on:  XML  <?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@[package:]anim/interpolator_resource"     android:shareInterpolator=["true" | "false"] >

    <alpha

        android:fromAlpha="float"

        android:toAlpha="float" />

    <scale

        android:fromXScale="float"         android:toXScale="float"

        android:fromYScale="float"

        android:toYScale="float"

        android:pivotX="float"

        android:pivotY="float" />

    <translate

        android:fromXDelta="float"

        android:toXDelta="float"

        android:fromYDelta="float"

        android:toYDelta="float" />

    <rotate

        android:fromDegrees="float"

        android:toDegrees="float"         android:pivotX="float"

        android:pivotY="float" />

    <set>

        ...

    </set>

</set>

Tween  Anima-on:  Java  

TextView v = (TextView) findViewById(R.id.textview1);

Animation myanimation =

AnimationUtils.loadAnimation(this, R.anim.myanimation);

v.startAnimation(myanimation);

Basic  Defini-ons  

•  <alpha> –  fade-­‐in  or  fade-­‐out  anima-ons.    

•  <scale> – Resizing  anima-on.    

•  <translate> – Ver-cal  and  or  horizontal  movement.  

•  <rotate> – A  rota-on  of  an  anima-on  

Example  of  Translate  <?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="false">

<translate android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="0"

android:toYDelta="100%p"

android:duration="700"

android:repeatMode="reverse"

android:repeatCount="1"

/>

</set>

Start  from  0,0  End  to  0,  100%  from  parent  

Dura-on  is  700  Repeat  in  reverse  one  -me  

Scale  <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <scale android:fromXScale="1" android:fromYScale="1" android:toXScale="6" android:toYScale="6" android:duration="700" android:repeatMode="reverse" android:repeatCount="1" /> </set>

Rotate  <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <rotate android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="700" /> </set>

Alpha  <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <alpha

android:fromAlpha = "1" android:toAlpha = "0" android:duration = "1000" android:repeatMode = "reverse" android:repeatCount= "1" />

</set>

Using  Several  Anima-ons  

<?xml  version="1.0"  encoding="um-­‐8"?>  <set  xmlns:android="hpp://schemas.android.com/apk/res/android"            android:shareInterpolator="false">                                    <alpha                android:fromAlpha    =  "1"                android:toAlpha        =  "0"                android:dura-on      =  "1000"                android:repeatMode  =  "reverse"                android:repeatCount=  "1"  />                    <rotate                android:fromDegrees  =  "0"                android:toDegrees      =  "360"                android:pivotX            =  "50%"                android:pivotY            =  "50%"                android:dura-on        =  "1000"                  android:repeatMode    =  "reverse"                android:repeatCount  =  "1"  />  

<scale

android:fromXScale = "1"

android:fromYScale = "1"

android:toXScale = "6"

android:toYScale = "6"

android:pivotX = "50%"

android:pivotY = "50%"

android:duration = "1000"

android:repeatMode = "reverse"

android:repeatCount = "1" />

</set>

Interpola-on  

•  Interpola-on  is  an  anima-on  modifier  defined  in  xml  

•  Rate  of  change  in  anima-on  – Accelerate,  decelerate,  bounce…  

Example  of  Interpola-on  <?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="true"

android:interpolator="@android:anim/bounce_interpolator"

>

<translate android:fromXDelta="0"

android:fromYDelta="0"

android:toXDelta="0"

android:toYDelta="100%p"

android:duration="700" />

</set>

Different  Interpola-ons  

2)  Frame  Anima-on  

•  Create  XML  file  that  consists  of  sequence  of  different  images  

•  Root-­‐element:  <anima-on-­‐list>  and  series  of  child  elements  <item>  

 

Example  <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/a1" android:duration="200" /> <item android:drawable="@drawable/a2" android:duration="200" /> <item android:drawable="@drawable/a3" android:duration="200" /> <item android:drawable="@drawable/a4" android:duration="200" /> <item android:drawable="@drawable/a5" android:duration="200" /> <item android:drawable="@drawable/a6" android:duration="200" /> <item android:drawable="@drawable/a7" android:duration="200" /> <item android:drawable="@drawable/a8" android:duration="200" /> </animation-list>

Star-ng  the  Frame  Anima-on  ImageView player = (ImageView) findViewById(R.id.player);

player.setImageResource(R.drawable.frameanimation);

AnimationDrawable anim = (AnimationDrawable) player.getDrawable();

anim.start();

PROPERTY  ANIMATION  Honeycomb  Feature!  

Property  Anima-on  

•  Extend  anima-on  beyond  Views!  – Also  limited  scope:  move,  rotate,  scale,  alpha.  That’s  it.  

•  With  Property  Anima-on,  you  can  animate  almost  anything  

•  Changes  the  object  itself  •  Anima-ng  values  over  <me    

ValueAnimator  

•  To  animate  values  0.0  –  1.0  –  ValueAnimator anim = ValueAnimator.ofInt(0, 100); –  anim.setDuration(500); –  anim.start();

•  It  animates,  but  nothing  can  be  seen.  Add  listener!  –  anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { –          public void onAnimationUpdate(ValueAnimator animation) { –              int value = (Integer) animation.getAnimatedValue(); –              // do something with value... –          } –      });

ObjectAnimator:  animate  objects!  MyPoint myobject = new MyPoint(0,0);

// Animate myobject’s x-attribute from default value

// to 20!

ObjectAnimator anim2 =

ObjectAnimator.ofInt(myobject, "x", 20);

anim2.setDuration(2500);

anim2.start(); Assumes  that  myobject  has  getX()  and  setX(int  x)  

methods1  

View  class  in  Honeycomb  

•  In  Honeycomb,  View  class  has  several  set/get  methods..  For  example  – setAlpha  (float  alpha)  – float  getAlpha  ()  

•  So  by  using  Object  Animator,  you  can  animate  the  alpha  (transparency)  for  every  view!  

Value/Object  Animator  Methods  

•  setStartDelay(long) •  setRepeatCount(int) •  setRepeatMode(int) •  setInterPolator(TimeInterpolator)

Example  anima-ng  View  // Getting reference to TextView defined in xml

tv = (TextView) findViewById(R.id.textview1);

ObjectAnimator anim =

ObjectAnimator.ofFloat(tv, "alpha", 0);

anim.setDuration(1000);

anim.setRepeatCount(ObjectAnimator.INFINITE);

anim.setRepeatMode(ObjectAnimator.REVERSE);

anim.start();

AnimatorSet  

•  Choreograph  mul-ple  anima-ons  •  Play  several  anima-ons  together  – playTogether(Animator…)  

•  Play  anima-ons  one  ader  another  – playSequen-ally(Animator…)  

•  Or  combina-on  of  above  – with(),  before(),  ader()  methods