Scribd
Upload
65 views

Lecture 3: Animation & Graphics

The document discusses animation and graphics in Android. It covers different types of animation like drawable animation, view animation, and property animation. It explains how to implement these animations using XML resources and Java code. It also discusses graphics approaches like using drawables or canvas, and how to draw on canvas using a custom view. It provides examples of creating drawable animation, view animation, and custom drawing using canvas.

Uploaded by

Iyesusgetanew
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
65 views

Lecture 3: Animation & Graphics

The document discusses animation and graphics in Android. It covers different types of animation like drawable animation, view animation, and property animation. It explains how to implement these animations using XML resources and Java code. It also discusses graphics approaches like using drawables or canvas, and how to draw on canvas using a custom view. It provides examples of creating drawable animation, view animation, and custom drawing using canvas.

Uploaded by

Iyesusgetanew
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 32

Lecture 3: Animation & Graphics

Topics: Animation, Graphics, Drawing


High Five!

https://youtu.be/uFpoXq73HHY
Concepts
What is Animation?
• To create an illusion of motion or change.
• By rapid succession of sequential, minimally
different images.

By Janke - Own work, CC BY-SA 2.5


https://commons.wikimedia.org/w/index.php?curid=433430
What is (Computer) Graphics?
• To generate/Synthesize images using computers.
• e.g., pixel arts, sprites, vectors, 3D
• Tools/API: OpenGL, Vulkan, Direct3D

A 2D graphic (tree) is
synthesized by using basic
shapes (circles and a rectangle)
What is Computer Vision?
• To understand images using computers.
• e.g., identifying objects in images
• Tools/API: OpenCV, OpenVX

An image is analyzed to detect


and count cars using computer
vision algorithms.

https://www.youtube.com/watch?v=xVwsr9p3irA
What is a GPU?
• Specialized HW for graphics processing.
• Large number of cores and threads.
• Limited features (instruction types, OS interactions)

ALU ALU
Control ALU Control ALU
ALU ALU
Cache Cache
Cache

RAM RAM

CPU GPU
Android: Source and Resource
• Source: e.g. .java
• Resources: e.g. layout, string, bitmap, animation.
• Benefits: multiple languages, multiple screens, easy to manage.

aapt Packed
Resource R.java
tool Resources

Source Compile classes.dex

Libraries

Can you guess how to implement animations in Android?


Android: What is a Drawable?
• Drawable – Something that can be drawn.
• It’s more than just an image/bitmap.
• Drawable ≠ View (e.g. can’t receive events)
Various Types of Drawables

Bitmap Shape
9-Patch State
Transition
Animation
Android Animation
Types of Animation
1. Drawable Animation
2. View Animation
3. Property Animation

Hello World X(t)


1. Drawable Animation
• We can load and display a series of Drawable
resources (e.g. images) one after another.
2. Drawable Animation
• Define animation-list in XML: res/drawable
XML:
<?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/pic1" android:duration=“1000" />
<item android:drawable="@drawable/pic2" android:duration=“1000" />
<item android:drawable="@drawable/pic1" android:duration=“1000" />
<item android:drawable="@drawable/pic2" android:duration=“1000" />
</animation-list>

• Use AnimationDrawable inside your Java code to


start the animation
Java:
someImgView.setBackgroundResource(R.drawable.abovexml);

((AnimationDrawable)someImgView.getBackground()).start();
We’ll try this today:
• Get some images and put into: res/drawable/
• Create an XML file: res/drawable/my_anim_list
• Add an ImageView and set Background
• Use AnimationDrawable to start animation
2. View Animation
• You can animate a View e.g., by scaling, rotating,
and translating an ImageView.
2. View Animation
• Define the Animation in XML: res/anim
XML:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset=“1000"
android:duration="10000"
/>

• Use Animation to fetch it, then apply it to a View.


Java:
Animation x = AnimationUtils.loadAnimation(
getApplicationContext(), R.anim.abovexmlfile );

someView.startAnimation(x);
3. Property Animation (Value)
• Changing value of a variable over a period:

ValueAnimator anim = ValueAnimator.ofFloat(0f, 40f);


anim.setDuration(40);
anim.start();

• Use setInterpolator() to change behavior.

Limitation?
3. Property Animation (Object)
• Changing a property of an object.

Hello World Hello World Hello World

ObjectAnimator anim =
ObjectAnimator.ofFloat(myTextView, “textSize”, 10f, 30f);
anim.setDuration(5000);
anim.start();

Object Variable
Summary of Android Animation
• List of XML tags and Java Classes:
Animation Type XML Tag Java Class
Drawable Animation animation-list AnimationDrawable
View Animation rotate Animation
translate
scale
set
Property Animation ValueAnimator
ObjectAnimator
Android Graphics
Graphics Approches
• Canvas and Drawables
• OpenGL (framework API and NDK)

S2E9
2D Drawing
1. Drawable:
• Put Drawables (in a View)
• Less work, less control, less efficiency
2. Canvas:
• Draw on the Canvas (of a View)
• More work, more control, more efficiency
1. Using Drawables
• Two ways of putting Drawables into a View

Four
ButtonViews

res/drawable/queen.png

res/drawable/tfade.xml
1(a) Image from Project Resource
• Copy images into res/drawable/
• Use it inside the layout xml
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/img1"
android:src="@drawable/my_image"/>

• You can also do the same by writing code:


ImageView i = new ImageView(this);
i.setImageResource(R.drawable.my_image);

LinearLayout ll = new LinearLayout(this);


ll.addView(i);

setContentView(ll); //instead of setContentView(R.layout.somexmllayoutfile)


1(b) XML with drawable properties
• e.g. Transition Drawable: res/drawable/something.xml
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/image1">
<item android:drawable="@drawable/image2">
</transition>

• Now, take an ImageView to show it (them):


TransitionDrawable td;
td = (TransitionDrawable)
getResources().getDrawable(R.drawable.something);
td.setCrossFadeEnabled(true);

ImageView img;
img = (ImageView) findViewById(R.id.img1);
img.setImageDrawable(td);

td.startTransition(5000);
Nine Patch Image
• Regular .png images + defining stretchable regions

From a terminal:
Run the draw9patch command
from your SDK sdk/tools
directory to launch the tool.
2. Using Canvas
• Canvas holds all of your draw*() calls.
• Drawing is performed upon an underlying Bitmap.

drawRect()
drawRect()
drawCircle()
…

Canvas (logical) Bitmap (physical)


2. Using Canvas
• Canvas holds all of your draw*() calls.
• Drawing is performed upon an underlying Bitmap.
Bitmap b = Bitmap.createBitmap(100, 100,
Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
Paint p = new Paint();
p.setColor(Color.GREEN);
c.drawRect(10, 10, 90, 90, p);

• Two ways to use the Canvas of a View:


• Custom View
• Surface View
Custom View
• Good for low frame-rate applications (e.g. chess or
snake game).
• You define a new View and add it in the layout XML
file (like you do for a TextView, ImageView etc.)
• Android provides you the Canvas as you extend a
View and override its onDraw() method.
• To request a redraw, use: invalidate(). Outside main
Activity’s thread, use postInvalidate().
Custom View
• Create your own View Class (CustomView.java)
public class CustomView extends View {
//Declare all four types of constructors here.
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//Use canvas.draw*()
}
}

• Use the View in the layout xml


<edu.unc.nirjon.projectname.CustomView
android:id="@+id/mycustomview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

• To force a redraw: invalidate()


Let’s try this:
• Create 2 Buttons: Up and Down
• Create a Custom View
• Draw a circle at location (X, Y)
• Every time the buttons are clicked, the point will
move. (Hint: use invalidate() to force redraw).
References (study these)
• http://developer.android.com/guide/topics/graphics/overview.html
• http://developer.android.com/guide/topics/graphics/prop-animation.html
• http://developer.android.com/guide/topics/graphics/view-animation.html
• http://developer.android.com/guide/topics/graphics/drawable-animation.html
• http://developer.android.com/guide/topics/graphics/2d-graphics.html
• http://www.vogella.com/tutorials/AndroidDrawables/article.html

You might also like