Android 2D Drawing and Animation Framework

11,636 views

Published on

Published in: Technology, News & Politics
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total views
11,636
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
340
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Android 2D Drawing and Animation Framework

  1. 1. Android  Drawing  and  Anima-on   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  2. 2. 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  
  3. 3. DRAWABLES  AND  SCREEN  SIZES  
  4. 4. 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  
  5. 5. 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    
  6. 6. Save  Image  to  Project  
  7. 7. 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    
  8. 8. Emulators  for  different  Screen  Sizes  
  9. 9. Resources  res/layout/my_layout.xml            // layout for normal screen sizeres/layout-small/my_layout.xml      // layout for small screen sizeres/layout-large/my_layout.xml      // layout for large screen sizeres/layout-large-land/my_layout.xml // layout for large screen size in landscape moderes/layout-xlarge/my_layout.xml     // layout for extra large screen sizeres/drawable-lhdpi/my_icon.png      // image for low densityres/drawable-mdpi/my_icon.png   // image for medium densityres/drawable-hdpi/my_icon.png       // image for high densityres/drawable-nodpi/composite.xml    // density independent resource
  10. 10. 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); }}
  11. 11. 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); }}
  12. 12. 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>
  13. 13. 2D  DRAWING  
  14. 14. 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  
  15. 15. 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(); }}
  16. 16. Simple  2D  Drawing:  View  <fi.tamk.CustomDrawableView android:layout_width="fill_parent" android:layout_height="wrap_content" />
  17. 17. 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  
  18. 18. Shape  Drawable  in  Java  // Drawing primitive 2D shapespublic 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);    }}
  19. 19. 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>
  20. 20. 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>
  21. 21. Result  
  22. 22. ANIMATION  
  23. 23. 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    
  24. 24. 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  
  25. 25. VIEW  ANIMATION  
  26. 26. 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  
  27. 27. 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  
  28. 28. 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>
  29. 29. Tween  Anima-on:  Java  TextView v = (TextView) findViewById(R.id.textview1);Animation myanimation = AnimationUtils.loadAnimation(this, R.anim.myanimation);v.startAnimation(myanimation);
  30. 30. 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  
  31. 31. 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  
  32. 32. 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>
  33. 33. 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>
  34. 34. 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>
  35. 35. Using  Several  Anima-ons  <?xml  version="1.0"  encoding="um-­‐8"?>   <scale<set  xmlns:android="hpp://schemas.android.com/apk/res/ android:fromXScale = "1"android"   android:fromYScale = "1"          android:shareInterpolator="false">             android:toXScale = "6"                        <alpha   android:toYScale = "6"              android:fromAlpha    =  "1"   android:pivotX = "50%"              android:toAlpha        =  "0"   android:pivotY = "50%"              android:dura-on      =  "1000"   android:duration = "1000"              android:repeatMode  =  "reverse"   android:repeatMode = "reverse"              android:repeatCount=  "1"  />   android:repeatCount = "1" />                  <rotate   </set>              android:fromDegrees  =  "0"                android:toDegrees      =  "360"                android:pivotX            =  "50%"                android:pivotY            =  "50%"                android:dura-on        =  "1000"                  android:repeatMode    =  "reverse"                android:repeatCount  =  "1"  />  
  36. 36. Interpola-on  •  Interpola-on  is  an  anima-on  modifier  defined   in  xml  •  Rate  of  change  in  anima-on   –  Accelerate,  decelerate,  bounce…  
  37. 37. 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>
  38. 38. Different  Interpola-ons  
  39. 39. 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>    
  40. 40. 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>
  41. 41. 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();
  42. 42. Honeycomb  Feature!  PROPERTY  ANIMATION  
  43. 43. 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    
  44. 44. 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... –          } –      });
  45. 45. 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  
  46. 46. 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!  
  47. 47. Value/Object  Animator  Methods  •  setStartDelay(long)•  setRepeatCount(int)•  setRepeatMode(int)•  setInterPolator(TimeInterpolator)
  48. 48. Example  anima-ng  View  // Getting reference to TextView defined in xmltv = (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();
  49. 49. 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  

×