Scribd
Upload
1K views

Drawing and Working With Animation: By: Mitul Patel

This document provides an overview of working with different types of resources and animation in Android applications. It discusses string, color, image and shape resources, and how to access them programmatically. It also covers working with canvases and paints to draw graphics, and the basic types of animations like fade in/out, zoom, rotate, and move. Code examples are provided to demonstrate applying a fade in animation to a text view when a button is clicked.

Uploaded by

Champa Kapoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

Drawing and Working With Animation: By: Mitul Patel

This document provides an overview of working with different types of resources and animation in Android applications. It discusses string, color, image and shape resources, and how to access them programmatically. It also covers working with canvases and paints to draw graphics, and the basic types of animations like fade in/out, zoom, rotate, and move. Code examples are provided to demonstrate applying a fade in animation to a text view when a button is clicked.

Uploaded by

Champa Kapoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

Module 5

Drawing and Working with Animation


By:
Mitul Patel
Working with Different Types of Resources
• Working with String Resources
• Working with Colors
• Working with Canvases and Paints
• Working with Images
• Working with Shapes
• Working with Animation
What are Resources?
• Android applications are composed of two things and they are:
– Android Code instructions
– Android Data / resources
• Functionality is in the instruction coded which determines the
way our application should behave. Other section of importance
is resources i.e. text, images, icons, audio files, videos, etc.
• Android resource files are stored separately from the rest of java
files of application. Generally resources are stored as xml files.
Graphics and raw data can be stored as resources.
Introduction to Android resources
Accessing Resources Programmatically
• Developers access specific application resources using the R.java
class file and its subclasses,which are automatically generated
when you add resources to your project.
• You can refer to any resource identifier in your project by its
name.
• For example, a String named strHello defined within the resource
file called res/values/strings.xml is accessed in the code as
follows:
R.string.strHello
String mystring = getResources().getString(R.string.strHello);
Android Resource
Example

Figure - activity_main.xml

Figure - strings.xml file


String Resources
• A string resource provides text strings for your application
with optional text styling and formatting. There are three
types of resources that can provide your application with
strings:
• String
• XML resource that provides a single string.
• String Array
• XML resource that provides an array of strings.
String
• A single string that can be referenced from the
application or from other resource files (such as an XML
layout).

String sOrc =
strings.xml getResources().getString(R.string.race_orc);
String Array

• An array of strings that can be referenced from the


application.
Array Resources in Simple Spinner Controls
Formatting and Styling

• Escaping apostrophes and quotes

• Styling with HTML markup


Working with Colors
• Android Application can store RGB color values,which can then be applied
to other screen elements.
• Color values can be used to set the color of text or the screen background.
• Defined in res/values
• Android uses standard RGB (red, green and blue) color model. Each primary
color value is usually represented by hexadecimal number. At the beginning
of such a color definition you have to put a pound character (#).
• The simplest is just #RGB format, where #000 is black and #FFF is white. But
in this format we have only 16 values per color so it gives 4096
combinations. That’s why #RRGGBB format is mainly used. In this format we
have 256 values per primary color, so 16 777 216 colors in total.
• Black is #000000 and white is #FFFFFF.
Example

The best solutions is to define your own colors set in the colors.xml file
Android Units of Measurements

• px (Pixels) - Actual pixels or dots on the screen.


• in (Inches) - Physical size of the screen in inches.
• mm (Millimeters) - Physical size of the screen in millimeters.
• pt (Points) - 1/72 of an inch.
• dp (Density-independent Pixels) - An abstract unit that is based on
the physical density of the screen. These units are relative to a 160
dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of
dp-to-pixel will change with the screen density, but not necessarily
in direct proportion. "dip" and "dp" are same.
• sp (Scale-independent Pixels) - Similar to dp unit, but also scaled by
the user's font size preference.

NOTE: Always use sp for font sizes and dip for everything else.
Working with Canvases and Paints
• The android.graphics.Canvas can be used to draw graphics in
android. It provides methods to draw oval, rectangle, picture,
text, line etc.
• The android.graphics.Paint class is used with canvas to draw
objects. It holds the information of color and style.
• The drawing of canvas happens in Bitmap, where we draw
the outline and then the Paint API helps to fill color and
whatever style we need.
Working with Canvases and Paints
• For 2D graphics we usually opt for any of the two following options:
1. Graphics or animation object is drawn into View object from layout.
2. We can draw graphics directly onto the canvas.
• Android Canvas class encapsulates the bitmaps used as surface. It
exposes the draw methods which can be used for designing. Let us first
clear the following terms:
• Bitmap: The surface being drawn on.
• Paint: It lets us specify how to draw the primitives on bitmap. It is also
referred to as “Brush”.
• Canvas: It supplies the draw methods used to draw primitives on
underlying bitmap.
Working with Canvases and Paints
• Each drawing object specifies a paint object to render:
1. drawArc: This draws an arc between the two angles bounded by an area of rectangle.
2. drawBitmap: It draws an bitmap on canvas.
3. drawRGB/drawARGB/drawColor: This fills the canvas with a single color.
4. drawBitmapMesh: It draws a bitmap using a mesh. It manipulates the appearance of
target by moving points on it.
5. drawCircle: This draws a circle on a specified radius centered on a given point.
6. drawLine(s):it draws a line (or series of lines) between points.
7. drawOval: it draws an oval which is bounded by the area of rectangle.
8. drawPaint: It fills the entire canvas with a specific paint.
9. drawPath: It draws a path as per specification.
10.drawPicture: It draws a picture specified on a rectangular area.
11.drawPosText: it draws a text string specifying the offset of each character.
12.drawRect: It draws a rectangle.
13.drawRoundRect: it draws a rectangle with round edges.
14.drawText: It draws a text string on canvas.
Paint class
• The Paint class consists of a paint brush and a
palette. It lets us choose how to render the primitives
drawn into canvas by draw methods.
• We can control the color, style, font, special effects
etc can be modified by modifying the paint object.
• For instance, setColor method can be used to select
the color of Paint. Paint class supports transparency
so it can be used to control variety of shades or
effects, etc.
Example
CanvasView.java
Example
Activity class
File: MainActivity.java
Working with Animation
• Animation in android apps is the process of creating
motion and shape change.
• Animations in android apps can be performed through
XML or android code
Basic ways of animation
1. Fade In Animation
2. Fade Out Animation
3. Cross Fading Animation
4. Blink Animation
5. Zoom In Animation
6. Zoom Out Animation
7. Rotate Animation
8. Move Animation
9. Slide Up Animation
10.Slide Down Animation
11.Bounce Animation
12.Sequential Animation
13.Together Animation
Android Animation Example XML

Loading Animation when UI widget is clicked


Android Animation Example XML

• android:interpolator : It is the rate of change in animation. We can define our own


interpolators using the time as the constraint. In the above xml code an inbuilt interpolator is
assigned
• android:duration : Duration of the animation in which the animation should complete. It is
300ms here. This is generally the ideal duration to show the transition on the screen.
• TRANSFORMATION : is the transformation that we want to specify. In our case we start with
an x and y scale of 0 and end with an x and y scale of 1
• android:fillAfter : property specifies whether the view should be visible or hidden at the end
of the animation. We’ve set it visible in the above code. If it sets to false, the element
changes to its previous state after the animation
• android:startOffset : It is the waiting time before an animation starts. This property is mainly
used to perform multiple animations in a sequential manner
• android:repeatMode : This is useful when you want the animation to be repeat
• android:repeatCount : This defines number of repetitions on animation. If we set this value
to infinite then animation will repeat infinite times
Animation Files in Project Structure
Fade In Animation

Here alpha references the opacity of an object. An object with lower alpha values is more
transparent, while an object with higher alpha values is less transparent, more opaque.
Fade in animation is nothing but increasing alpha value from 0 to 1.
Fade Out Animation

Fade out android animation is exactly opposite to fade in, where we need to decrease the
alpha value from 1 to 0.
Cross Fading Animation
Blink Animation

Here fade in and fade out are performed infinitely in reverse mode each time.
Zoom In Animation
Zoom Out Animation
Rotate Animation
Move Animation
Slide Up Animation
Slide Down Animation
Bounce Animation
Sequential Animation
Together Animation
Applying fade_in in java file
When clicked on FadeIn Button(btnFadeIn), fade_in animation starts on TextView(txtFadeIn)
Output
THANK YOU

You might also like