Day seven

1,046 views
971 views

Published on

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
1,046
On SlideShare
0
From Embeds
0
Number of Embeds
507
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Day seven

  1. 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. 2. Please make one if there is no anim folder
  3. 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. 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. 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. 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. 7. Load the animation // load the animation animFadeout = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_out); btn.setOnClickListener(new … ... { textView.startAnimation(animFadeout); }
  8. 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. 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. 10. ● For more cool animations, refer to: http://bit.ly/13g76Fu ● For the original documentation: http://bit.ly/96ZVW0
  11. 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. 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. 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. 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. 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. 16. <style name= “...” parent= “...”> … </style> The parent attribute is similar to extends in Java <item> tag is used here
  17. 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. 18. Referencing the style ● Referenced through the layout file <TextView style= “@style/textSmall” android:layout_width= “fill_parent” android:layout_height= “wrap_content” />
  19. 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. 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. 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. 22. ● Backgrounds with patterns <bitmap xmlns:android = "http://schemas.android.com/apk/res/android" android:tileMode="repeat" android:src="@drawable/your_pattern" > </bitmap>
  23. 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. 24. Styling the Action Bar Some default themes
  25. 25. If we want to create a custom theme we need to override the following attributes
  26. 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. 27. Custom ActionBar themes: Background ● Same thing programatically: ActionBar bar = getActionBar(); bar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#FFF")));
  28. 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. 29. TabTextColor <style name="MyActionBarTabText" parent= "@style/Widget.Holo.ActionBar.TabText"> <item name= "android:textColor"> @color/actionbar_text </item> </style>
  30. 30. MyActionBar <style name="MyActionBar" parent="@style/Widget.Holo.ActionBar"> <item name="android:titleTextStyle"> @style/MyActionBarTitleText</item> </style> Defined right before
  31. 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. 32. ActionBar Text Color ● ● Simple hack: getActionBar().setTitle(Html.fromHtml("<font color="red">" + Title + "</font>"));
  33. 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. 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. 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. 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. 37. Project Checks Name of the project that is to be converted
  38. 38. Keystore Selection
  39. 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. 40. Destination and key/certificate checks After setting the destination file for the APK file, YOU NOW HAVE YOUR FIRST APK
  41. 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. 42. Popular Android Libraries ● ActionBarSherlock : Support ActionBars on lower Android versions
  43. 43. ● Android-PullToRefresh : Re-load, refresh content while the user drags your content
  44. 44. ● Sherlock Navigation Drawer : Supports Navigation Drawer functionality on lower Android versions
  45. 45. ● Satellite Menu : A variation on the traditional menu display. Cool animations and transitions
  46. 46. Libraries for developers

×