This document provides information about creating simple XML animations in Android. It discusses creating an XML file to define the animation, important animation attributes like duration and delay, and how to load and apply the animation to a view. It also covers creating fade in and fade out effects using alpha values and listening for animation events using listeners.

1. Simple XML Animation
●
●
Create an xml file which defines type of
animation to perform
This file should be located under anim folder
under res directory

2. Please make one
if there is no
anim folder

3. Important XML animation attributes
●
android:duration
Duration of the animation
android:startOffset
–
●
Waiting time before the animation starts
android:interpolator
–
●
–
The rate of change in animation

4. ●
android:fillAfter
–
Do we apply the animation transformation after the
animation?
If set false, the previous state of the element is restored
after the animation
android:repeatMode
–
●
Do we need to repeat the animation?
android:repeatCount
–
●
–
How many times do we want to repeat the animation?

5. Simple fade out effect
fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
Because we are
dealing with
fade transitions
alpha is used
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
To create a fade in effect
we just switch the
from alpha and to alpha values

6. ●
android:fromAlpha
Float. Starting opacity offset, where 0.0 is
transparent and 1.0 is opaque.
android:toAlpha
–
●
–
Float. Ending opacity offset, where 0.0 is
transparent and 1.0 is opaque.

7. Load the animation
// load the animation
animFadeout =
AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_out);
btn.setOnClickListener(new …
...
{
textView.startAnimation(animFadeout);
}

8. Adding animation listeners(optional)
●
If you want to listen to animation events like
start, end or repeat implement the
AnimationListener
●
●
●
onAnimationStart – This will be triggered once the
animation started
onAnimationEnd – This will be triggered once the
animation is over
onAnimationRepeat – This will be triggered if the
animation repeats

9. public class MainActivity extends Activity implements
AnimationListener{
@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// check for fade in animation
if (animation == animFadein) {
Stopped",
Toast.makeText(getApplicationContext(), "Animation
Toast.LENGTH_SHORT).show();
}
}
For implementation:
animFadeout.setAnimationListenter(this)

10. ●
For more cool animations, refer to:
http://bit.ly/13g76Fu
●
For the original documentation:
http://bit.ly/96ZVW0

11. Animation
●
Using the ViewPropertyAnimator
–
This class enables automatic and optimized
animation of select properties on View objects
–
Introduced in Android 3.1 (API 12)
●
–
●
Please use API 12 to use this project
Formerly we would use the ObjectAnimator
Easy use and implementation

12. ViewPropertyAnimator
●
animate()
–
●
Auto-start
–
●
The magic of the system begins with a call to the
new method animate() on the View object.
We do not actually have to start() the animation
Fluent
–
Smooth when dealing with multiple animations

13. ●
Fade
myView.animate().alpha(1); //fade in
myView.animate().alpha(0); //fade out
●
Move
myView.animate().x(0).y(0);
●
Rotate
myView.animate().rotationYBy(720);
Full code: http://bit.ly/HU5wzC

14. Styles and Themes
●
●
A style is a collection of properties that specify
the look and format for a View.
A style can specify properties such as height,
padding, font color, font size, background
color, and much more.

15. Styling
●
The CSS to your application
●
Defined in XML with the <style> tag
Located under your values.
Creating and referencing to a single
styles.xml is enough but if required
can be further declared.

16. <style name= “...” parent= “...”>
…
</style>
The parent attribute is
similar to extends in Java
<item> tag is used here

17. Styling example
<style name="textSmall" >
<item name = "android:textSize">@dimen/small</item>
<item name =
"android:layout_marginTop">@dimen/gap</item>
</style>
<style name="textLarge" parent="@style/textSmall">
<item name = "android:textSize">@dimen/large</item>
</style>

18. Referencing the style
●
Referenced through the layout file
<TextView
style= “@style/textSmall”
android:layout_width= “fill_parent”
android:layout_height= “wrap_content” />

19. Referencing the style
●
Referenced in the manifest
●
<activity>
or <application> through the android:theme
attribute.
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
OR
<activity
android:name=".MainActivity"
android:theme="@style/Apptheme"/ >

20. Some useful styling
●
Giving your background gradients
<shape
xmlns:android="http://schemas.android.com/apk/res/andro
id" >
<gradient android:startColor="#FF0000"
android:endColor="#8C0000"
android:angle="270"/>
</shape>

21. ●
Buttons with curvy edges
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="@color/homePageButton"/>
<corners android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>

22. ●
Backgrounds with patterns
<bitmap xmlns:android =
"http://schemas.android.com/apk/res/android"
android:tileMode="repeat"
android:src="@drawable/your_pattern" >
</bitmap>

23. Adding touch feedback
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:drawable="@drawable/button"
android:state_focused="false"
android:state_pressed="false"
android:state_selected="false"/>
<!-- Pressed -->
<item android:drawable="@drawable/button_pressed"
android:state_focused="false"
android:state_pressed="true"
android:state_selected="false"/>
</selector>

24. Styling the Action Bar
Some default themes

25. If we want to create a custom theme
we need to override the following attributes

26. Custom ActionBar themes:
Background
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background"> @color/background </item>
</style>
Where we actually set the background color

27. Custom ActionBar themes:
Background
●
Same thing programatically:
ActionBar bar = getActionBar();
bar.setBackgroundDrawable(new
ColorDrawable(Color.parseColor("#FFF")));

28. Custom ActionBar themes:
Text Color
<style name="CustomTheme" parent="@style/Theme.Holo">
<item name="android:actionBarStyle">
@style/MyActionBar </item>
<item name="android:actionBarTabTextStyle">
@style/MyActionBarTabText </item>
<item name="android:actionMenuTextColor">
@color/actionbar_text </item>
</style>

29. TabTextColor
<style name="MyActionBarTabText"
parent=
"@style/Widget.Holo.ActionBar.TabText">
<item name= "android:textColor">
@color/actionbar_text </item>
</style>

30. MyActionBar
<style name="MyActionBar"
parent="@style/Widget.Holo.ActionBar">
<item name="android:titleTextStyle">
@style/MyActionBarTitleText</item>
</style>
Defined right before

31. MenuTextColor
<style name="MyActionBarTitleText"
parent=
"@style/TextAppearance.Holo.Widget.Acti
onBar.Title">
<item name= "android:textColor">
@color/actionbar_text</item>
</style>
For more on theming: http://bit.ly/PkUz8k

32. ActionBar Text Color
●
●
Simple hack:
getActionBar().setTitle(Html.fromHtml("<font
color="red">" + Title + "</font>"));

33. Super custom action bar ?
●
Define a custom layout for the action bar.
getActionBar.setDisplayShowCustomEnabled(true);
getActionBar.setDisplayShowTitleEnabled(false);
LayoutInflater inflater =(LayoutInflater)
this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.custom, null);
getActionBar.setCustomView(view);

34. Android Facts
●
●
1st commercially available Android phone:
HTC Dream – 2008 – Android 1.0
Naming Conventions
–
●
Cupcake, Donut, Eclair, Froyo, Gingerbread, …
noticed something ???
Android not only for phones and tablets.

35. Version Features
●
Version 1.0 : Android Market
●
Version 1.5: Support for widgets
●
Version 1.6: Quick Search Box
...
●
Version 3.0: New virtual & “holographic UI”
●
Version 4.0: Recent apps multitasking
●
Version 4.1: Google Now search app
●
Version 4.2: LockScreen widgets & Multiple Users
●
Version 4.3: Restricted Profiles & Wireless + Bluetooth Optimization
●
Version 4.4: Android for all – Streamlined Android & Google Now

37. Extracting the .apk file
●
Right click on project
→ Select Android tools
→ Export Signed Application Package
●
●
●
●
Project Checks
Keystore selection*
Key Creation*
Destination and key/certificate checks

38. Project Checks
Name of the project
that is to be
converted

39. Keystore Selection

40. Key Creation
Android system
requires that
all installed
applications be
digitally signed
with a certificate
whose private key
is held by
the application's
developer

41. Destination and key/certificate
checks
After setting the
destination file for the
APK file, YOU
NOW HAVE
YOUR FIRST APK

42. External Libraries and Tools
●
●
A library is a collection of implementations of
behavior that has a well-defined interface by
which the behavior can be invoked.
In short, libraries are really helpful tools !

43. Popular Android Libraries
●
ActionBarSherlock : Support ActionBars on
lower Android versions

44. ●
Android-PullToRefresh : Re-load, refresh
content while the user drags your content

45. ●
Sherlock Navigation Drawer : Supports
Navigation Drawer functionality on lower
Android versions

46. ●
Satellite Menu : A variation on the traditional
menu display. Cool animations and transitions

47. Libraries for developers