Android	  Drawing	  and	  Anima-on	                  Jussi	  Pohjolainen	      Tampere	  University	  of	  Applied	  Scien...
Android	  Graphics	  •  Custom	  2D	  Graphics	      –  android.graphics.drawable	  package	  •  OpenGL	  ES	  1.0	  high	...
DRAWABLES	  AND	  SCREEN	  SIZES	  
Drawables	  •  A	  Drawable	  is	  a	  general	  abstrac-on	  for	     “something	  that	  can	  be	  drawn”	      –  Bitm...
1.	  Use	  image	  saved	  to	  project	  resources	  •  Supported	  types:	  PNG	  (preferred),	  JPG	       (acceptable)...
Save	  Image	  to	  Project	  
Screen	  Sizes	  •  Android	  supports	  different	  screen	  sizes	  •  Simplifying	  developer’s	  work:	         –  4	  ...
Emulators	  for	  different	  Screen	  Sizes	  
Resources	  res/layout/my_layout.xml            //   layout   for   normal screen sizeres/layout-small/my_layout.xml      ...
Displaying	  Image	  using	  Java	  public class DrawingExamples extends Activity {    /** Called when the activity is fir...
Easier	  way	  public class DrawingExamples extends Activity {    public void onCreate(Bundle savedInstanceState) {       ...
Or	  use	  it	  via	  the	  XML	  <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.androi...
2D	  DRAWING	  
Drawing	  on	  a	  View	  •  If	  no	  significant	  frame-­‐rate	  speed	  needed,	     draw	  to	  custom	  View•  Extend...
Simple	  2D	  Drawing:	  View	  public class CustomDrawableView extends View {    public CustomDrawableView(Context contex...
Simple	  2D	  Drawing:	  View	  <fi.tamk.CustomDrawableView    android:layout_width="fill_parent"    android:layout_height...
ShapeDrawable•  With	  ShapeDrawable,	  one	  can	  draw	  primi-ve	     2D	  shapes	     –  ArcShape, OvalShape, RoundRec...
Shape	  Drawable	  in	  Java	  // Drawing primitive 2D shapespublic class CustomDrawableView extends View {    private Sha...
Shape	  Drawable	  in	  XML	  // res/drawable-xxx/myshapes.xml<?xml version="1.0" encoding="utf-8"?><shape    xmlns:androi...
Shape	  Drawable	  in	  XML	  // res/layout/main.xml<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="htt...
Result	  
ANIMATION	  
About	  Anima-on	  –  1)	  View	  Anima<on	     •  Any	  View	  object	  to	  perform	  tweened	  anima-on	  and	  frame	 ...
Differences	  •  View	      +	  Less	  -me	  to	  setup	      +	  Less	  code	  to	  write	      -­‐	  Only	  View	  object...
VIEW	  ANIMATION	  
About	  View	  Anima-on	  •  View	  anima-on	  can	  be	  1)	  tween	  or	  2)	  frame	  by	     frame	  anima-on	  •  Twe...
1)	  Tween	  anima-on	  •  Preferred	  way:	  Define	  in	  XML	  •  Anima-on	  xml	  is	  stored	  in	  res/anim	  directo...
Tween	  Anima-on:	  XML	  <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/and...
Tween	  Anima-on:	  Java	  TextView v = (TextView) findViewById(R.id.textview1);Animation myanimation =   AnimationUtils.l...
Basic	  Defini-ons	  •  <alpha>  –  fade-­‐in	  or	  fade-­‐out	  anima-ons.	  	  •  <scale>  –  Resizing	  anima-on.	  	  ...
Example	  of	  Translate	  <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/an...
Scale	  <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"     android:...
Rotate	  <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"     android...
Alpha	  <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"     android:...
Using	  Several	  Anima-ons	  <?xml	  version="1.0"	  encoding="um-­‐8"?>	                                     <scale<set	...
Interpola-on	  •  Interpola-on	  is	  an	  anima-on	  modifier	  defined	     in	  xml	  •  Rate	  of	  change	  in	  anima-...
Example	  of	  Interpola-on	  <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res...
Different	  Interpola-ons	  
2)	  Frame	  Anima-on	  •  Create	  XML	  file	  that	  consists	  of	  sequence	  of	       different	  images	  •  Root-­‐...
Example	  <?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"...
Star-ng	  the	  Frame	  Anima-on	  ImageView player = (ImageView) findViewById(R.id.player);player.setImageResource(R.draw...
Honeycomb	  Feature!	  PROPERTY	  ANIMATION	  
Property	  Anima-on	  •  Extend	  anima-on	  beyond	  Views!	     –  Also	  limited	  scope:	  move,	  rotate,	  scale,	  ...
ValueAnimator	  •  To	  animate	  values	  0.0	  –	  1.0	      –  ValueAnimator anim = ValueAnimator.ofInt(0, 100);    –  ...
ObjectAnimator:	  animate	  objects!	  MyPoint myobject = new MyPoint(0,0);// Animate myobject’s x-attribute from default ...
View	  class	  in	  Honeycomb	  •  In	  Honeycomb,	  View	  class	  has	  several	  set/get	     methods..	  For	  example...
Value/Object	  Animator	  Methods	  •    setStartDelay(long)•    setRepeatCount(int)•    setRepeatMode(int)•    setInterPo...
Example	  anima-ng	  View	  // Getting reference to TextView defined in xmltv = (TextView) findViewById(R.id.textview1);Ob...
AnimatorSet	  •  Choreograph	  mul-ple	  anima-ons	  •  Play	  several	  anima-ons	  together	     –  playTogether(Animato...
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Upcoming SlideShare
Loading in...5
×

Android 2D Drawing and Animation Framework

8,952

Published on

Published in: Technology, News & Politics
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,952
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
255
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  
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×