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