SlideShare ist ein Scribd-Unternehmen logo
1 von 58
Downloaden Sie, um offline zu lesen
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	
  
Android 2D Drawing and Animation Framework
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>
Android 2D Drawing and Animation Framework
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>
Android 2D Drawing and Animation Framework
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>
Android 2D Drawing and Animation Framework
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"	
  />	
  
Android 2D Drawing and Animation Framework
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>
Android 2D Drawing and Animation Framework
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();
Honeycomb	
  Feature!	
  

PROPERTY	
  ANIMATION	
  
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();
Android 2D Drawing and Animation Framework
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	
  
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework

Weitere ähnliche Inhalte

Was ist angesagt?

HTML5 and SVG
HTML5 and SVGHTML5 and SVG
HTML5 and SVGyarcub
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersOswald Campesato
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicAkila Iroshan
 
HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web GamesHTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Gameslivedoor
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive GraphicsBlazing Cloud
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Ontico
 
Building Mosaics
Building MosaicsBuilding Mosaics
Building MosaicsEsri
 
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagDavid Voyles
 
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Marakana Inc.
 
Android UI Tips & Tricks
Android UI Tips & TricksAndroid UI Tips & Tricks
Android UI Tips & TricksDroidConTLV
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientBin Shao
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsNaman Dwivedi
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutesJos Dirksen
 

Was ist angesagt? (18)

HTML5 and SVG
HTML5 and SVGHTML5 and SVG
HTML5 and SVG
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web GamesHTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Games
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
 
Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)Илья Пухальский (EPAM Systems)
Илья Пухальский (EPAM Systems)
 
Building Mosaics
Building MosaicsBuilding Mosaics
Building Mosaics
 
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
 
Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)Graphicsand animations devoxx2010 (1)
Graphicsand animations devoxx2010 (1)
 
Android UI Tips & Tricks
Android UI Tips & TricksAndroid UI Tips & Tricks
Android UI Tips & Tricks
 
Android custom views
Android custom viewsAndroid custom views
Android custom views
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
 
D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
Enhancing UI/UX using Java animations
Enhancing UI/UX using Java animationsEnhancing UI/UX using Java animations
Enhancing UI/UX using Java animations
 
Mpdf51demo
Mpdf51demoMpdf51demo
Mpdf51demo
 
Intro to Canva
Intro to CanvaIntro to Canva
Intro to Canva
 
Learn D3.js in 90 minutes
Learn D3.js in 90 minutesLearn D3.js in 90 minutes
Learn D3.js in 90 minutes
 

Andere mochten auch

Android Vector drawable
Android Vector drawableAndroid Vector drawable
Android Vector drawableOleg Osipenko
 
Революционный Android. Ищем замену фрагментам
Революционный Android. Ищем замену фрагментамРеволюционный Android. Ищем замену фрагментам
Революционный Android. Ищем замену фрагментамRambler Android
 
Vector Drawable API. Возможности применения
Vector Drawable API. Возможности примененияVector Drawable API. Возможности применения
Vector Drawable API. Возможности примененияRambler Android
 
Android Http Connection and SAX Parsing
Android Http Connection and SAX ParsingAndroid Http Connection and SAX Parsing
Android Http Connection and SAX ParsingJussi Pohjolainen
 
Android Security, Signing and Publishing
Android Security, Signing and PublishingAndroid Security, Signing and Publishing
Android Security, Signing and PublishingJussi Pohjolainen
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android DevelopmentJussi Pohjolainen
 
Android Wi-Fi Manager and Bluetooth Connection
Android Wi-Fi Manager and Bluetooth ConnectionAndroid Wi-Fi Manager and Bluetooth Connection
Android Wi-Fi Manager and Bluetooth ConnectionJussi Pohjolainen
 
00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.ppt00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.pptJussi Pohjolainen
 
Android Telephony Manager and SMS
Android Telephony Manager and SMSAndroid Telephony Manager and SMS
Android Telephony Manager and SMSJussi Pohjolainen
 

Andere mochten auch (20)

Android Vector drawable
Android Vector drawableAndroid Vector drawable
Android Vector drawable
 
Революционный Android. Ищем замену фрагментам
Революционный Android. Ищем замену фрагментамРеволюционный Android. Ищем замену фрагментам
Революционный Android. Ищем замену фрагментам
 
Vector Drawable API. Возможности применения
Vector Drawable API. Возможности примененияVector Drawable API. Возможности применения
Vector Drawable API. Возможности применения
 
Android Http Connection and SAX Parsing
Android Http Connection and SAX ParsingAndroid Http Connection and SAX Parsing
Android Http Connection and SAX Parsing
 
Qt Translations
Qt TranslationsQt Translations
Qt Translations
 
Responsive Web Site Design
Responsive Web Site DesignResponsive Web Site Design
Responsive Web Site Design
 
C# for Java Developers
C# for Java DevelopersC# for Java Developers
C# for Java Developers
 
Android Essential Tools
Android Essential ToolsAndroid Essential Tools
Android Essential Tools
 
Android Security, Signing and Publishing
Android Security, Signing and PublishingAndroid Security, Signing and Publishing
Android Security, Signing and Publishing
 
Quick Intro to Android Development
Quick Intro to Android DevelopmentQuick Intro to Android Development
Quick Intro to Android Development
 
Building Web Services
Building Web ServicesBuilding Web Services
Building Web Services
 
Android Wi-Fi Manager and Bluetooth Connection
Android Wi-Fi Manager and Bluetooth ConnectionAndroid Wi-Fi Manager and Bluetooth Connection
Android Wi-Fi Manager and Bluetooth Connection
 
00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.ppt00 introduction-mobile-programming-course.ppt
00 introduction-mobile-programming-course.ppt
 
Android UI Development
Android UI DevelopmentAndroid UI Development
Android UI Development
 
Android Location and Maps
Android Location and MapsAndroid Location and Maps
Android Location and Maps
 
Android Threading
Android ThreadingAndroid Threading
Android Threading
 
Android Data Persistence
Android Data PersistenceAndroid Data Persistence
Android Data Persistence
 
Android Sensors
Android SensorsAndroid Sensors
Android Sensors
 
Android Multimedia Support
Android Multimedia SupportAndroid Multimedia Support
Android Multimedia Support
 
Android Telephony Manager and SMS
Android Telephony Manager and SMSAndroid Telephony Manager and SMS
Android Telephony Manager and SMS
 

Ähnlich wie Android 2D Drawing and Animation Framework

Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101Fernando Gallego
 
Best Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsBest Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsRapidValue
 
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROIDMaterial Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROIDJordan Open Source Association
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Basic Android Animation
Basic Android Animation Basic Android Animation
Basic Android Animation Shilu Shrestha
 
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionBuild 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionWindows Developer
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty grittyMario Noble
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
Android webinar class_4
Android webinar class_4Android webinar class_4
Android webinar class_4Edureka!
 
performance optimization: UI
performance optimization: UIperformance optimization: UI
performance optimization: UI晓东 杜
 
Bootstrap 3 training
Bootstrap 3 trainingBootstrap 3 training
Bootstrap 3 trainingVison Sunon
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVGSpeedPartner GmbH
 

Ähnlich wie Android 2D Drawing and Animation Framework (20)

Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101Fernando F. Gallego - Efficient Android Resources 101
Fernando F. Gallego - Efficient Android Resources 101
 
Best Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsBest Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue Solutions
 
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROIDMaterial Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
Material Design (The Technical Essentials) by Mohammad Aljobairi @AMMxDROID
 
Android Materials Design
Android Materials Design Android Materials Design
Android Materials Design
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Basic Android Animation
Basic Android Animation Basic Android Animation
Basic Android Animation
 
Supercharge your ui
Supercharge your uiSupercharge your ui
Supercharge your ui
 
Android layouts
Android layoutsAndroid layouts
Android layouts
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionBuild 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
 
Material Design Android
Material Design AndroidMaterial Design Android
Material Design Android
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
Android webinar class_4
Android webinar class_4Android webinar class_4
Android webinar class_4
 
performance optimization: UI
performance optimization: UIperformance optimization: UI
performance optimization: UI
 
Bootstrap 3 training
Bootstrap 3 trainingBootstrap 3 training
Bootstrap 3 training
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Professional reports with SVG
Professional reports with SVGProfessional reports with SVG
Professional reports with SVG
 
Android view animation in android-chapter18
Android view animation in android-chapter18Android view animation in android-chapter18
Android view animation in android-chapter18
 

Mehr von Jussi Pohjolainen

libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferencesJussi Pohjolainen
 
libGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationlibGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationJussi Pohjolainen
 
Intro to Building Android Games using libGDX
Intro to Building Android Games using libGDXIntro to Building Android Games using libGDX
Intro to Building Android Games using libGDXJussi Pohjolainen
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript DevelopmentJussi Pohjolainen
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame AnimationJussi Pohjolainen
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame AnimationJussi Pohjolainen
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDXJussi Pohjolainen
 
Building Android games using LibGDX
Building Android games using LibGDXBuilding Android games using LibGDX
Building Android games using LibGDXJussi Pohjolainen
 
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesCreating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesJussi Pohjolainen
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platformJussi Pohjolainen
 
Intro to Java ME and Asha Platform
Intro to Java ME and Asha PlatformIntro to Java ME and Asha Platform
Intro to Java ME and Asha PlatformJussi Pohjolainen
 

Mehr von Jussi Pohjolainen (20)

Moved to Speakerdeck
Moved to SpeakerdeckMoved to Speakerdeck
Moved to Speakerdeck
 
Java Web Services
Java Web ServicesJava Web Services
Java Web Services
 
Box2D and libGDX
Box2D and libGDXBox2D and libGDX
Box2D and libGDX
 
libGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and PreferenceslibGDX: Screens, Fonts and Preferences
libGDX: Screens, Fonts and Preferences
 
libGDX: Tiled Maps
libGDX: Tiled MapslibGDX: Tiled Maps
libGDX: Tiled Maps
 
libGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame AnimationlibGDX: User Input and Frame by Frame Animation
libGDX: User Input and Frame by Frame Animation
 
Intro to Building Android Games using libGDX
Intro to Building Android Games using libGDXIntro to Building Android Games using libGDX
Intro to Building Android Games using libGDX
 
Advanced JavaScript Development
Advanced JavaScript DevelopmentAdvanced JavaScript Development
Advanced JavaScript Development
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
 
libGDX: Scene2D
libGDX: Scene2DlibGDX: Scene2D
libGDX: Scene2D
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame Animation
 
libGDX: Simple Frame Animation
libGDX: Simple Frame AnimationlibGDX: Simple Frame Animation
libGDX: Simple Frame Animation
 
libGDX: User Input
libGDX: User InputlibGDX: User Input
libGDX: User Input
 
Implementing a Simple Game using libGDX
Implementing a Simple Game using libGDXImplementing a Simple Game using libGDX
Implementing a Simple Game using libGDX
 
Building Android games using LibGDX
Building Android games using LibGDXBuilding Android games using LibGDX
Building Android games using LibGDX
 
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and GesturesCreating Asha Games: Game Pausing, Orientation, Sensors and Gestures
Creating Asha Games: Game Pausing, Orientation, Sensors and Gestures
 
Creating Games for Asha - platform
Creating Games for Asha - platformCreating Games for Asha - platform
Creating Games for Asha - platform
 
Intro to Asha UI
Intro to Asha UIIntro to Asha UI
Intro to Asha UI
 
Intro to Java ME and Asha Platform
Intro to Java ME and Asha PlatformIntro to Java ME and Asha Platform
Intro to Java ME and Asha Platform
 

Kürzlich hochgeladen

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 

Kürzlich hochgeladen (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 

Android 2D Drawing and Animation Framework

  • 1. Android  Drawing  and  Anima-on   Jussi  Pohjolainen   Tampere  University  of  Applied  Sciences  
  • 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  
  • 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. 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. Save  Image  to  Project  
  • 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. Emulators  for  different  Screen  Sizes  
  • 9. 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
  • 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. 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. 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>
  • 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. 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. Simple  2D  Drawing:  View   <fi.tamk.CustomDrawableView android:layout_width="fill_parent" android:layout_height="wrap_content" />
  • 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. 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);     } }
  • 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. 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>
  • 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. 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  
  • 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. 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. 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. Tween  Anima-on:  Java   TextView v = (TextView) findViewById(R.id.textview1); Animation myanimation = AnimationUtils.loadAnimation(this, R.anim.myanimation); v.startAnimation(myanimation);
  • 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. 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  
  • 33. 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>
  • 35. 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>
  • 37. 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>
  • 39. 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"  />  
  • 41. Interpola-on   •  Interpola-on  is  an  anima-on  modifier  defined   in  xml   •  Rate  of  change  in  anima-on   –  Accelerate,  decelerate,  bounce…  
  • 42. 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>
  • 45. 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>    
  • 46. 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>
  • 47. 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();
  • 49. 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    
  • 50. 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... –          } –      });
  • 51. 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  
  • 52. 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!  
  • 53. Value/Object  Animator  Methods   •  setStartDelay(long) •  setRepeatCount(int) •  setRepeatMode(int) •  setInterPolator(TimeInterpolator)
  • 54. 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();
  • 56. 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