Your SlideShare is downloading. ×
Day seven
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Day seven

811
views

Published on

Final day of the training …

Final day of the training
-> Style and Theme
-> Animations
-> App publishing
-> External Libraries

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
811
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 36. 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
  • 37. Project Checks Name of the project that is to be converted
  • 38. Keystore Selection
  • 39. 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
  • 40. Destination and key/certificate checks After setting the destination file for the APK file, YOU NOW HAVE YOUR FIRST APK
  • 41. 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 !
  • 42. Popular Android Libraries ● ActionBarSherlock : Support ActionBars on lower Android versions
  • 43. ● Android-PullToRefresh : Re-load, refresh content while the user drags your content
  • 44. ● Sherlock Navigation Drawer : Supports Navigation Drawer functionality on lower Android versions
  • 45. ● Satellite Menu : A variation on the traditional menu display. Cool animations and transitions
  • 46. Libraries for developers