1. Welcome to Android!

2. Let’s review what we know about the web Structure is _________ Presentation is ___________ Behavior is ___________ HTML CSS JavaScript

3. In Android Structure is _________ Presentation is ___________ Behavior is ___________ HTML CSS JavaScript XML Java

4. Web Review HTML has specific elements for certain jobs – for non editable text – header – for list items HTML has specific elements to contain other elements –,,,, – – /

5. Android Android has certain elements for certain jobs as well. In Android, we call these elements Views Android also has specific elements to contain other elements In Android, we call these elements View Groups

6. When the HTML document gets loaded what object is created? 1 2 3 4 body div#box1div#box2div#box3div#box4

7. Android XML Layout <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />

8. Android XML Layout <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> LinearLayout TextViewButton In Android Lingo, the DOM is known as the View Hierarchy

9. Web Review Using the DOM, how do we find elements? 1.ID 2.Class 3.Tag 4.Attribute 5.Traversing the DOM tree (firstChild, parent, children, etc.)

10. In Android We find views by ID Traversing the View Hierarchy

11. What is Android? A software stack for mobile devices that includes an operating system, middleware, and key applications. Uses large parts of the Java API – Doesn’t use Swing or AWT Uses XML to declare layouts Supports SQLite Awesome!

12. Android OS Versions Platform VersionCodename 1.5Cupcake 1.6Donut 2.1Éclair 2.2Froyo 2.3Gingerbread 3.0Honeycomb (First version to support tablets) 4.0Ice Cream Sandwich (Merges Gingerbread and Honeycomb) 4.1 – 4.3Jelly Bean 4.4Kit Kat 5.0Lollipop (just released!)

13. Android Toolkit Eclipse is the premier IDE for developing Android. – Integrates the Android SDK for easy building, virtual device creation, and more. Android apps can be built with Apache Ant; therefore, you could use any text editor of your preference.

14. Eclipse Hotkeys Key ShortcutAction Ctrl + OShow Outline. Uses intellisense to quickly navigate and find class members and methods. Ctrl + Shift + OAdd and Organize Imports Ctrl + Shift + CToggle Comment Block Run/Debug Ctrl + F11Run last launched F11Debug last launched F5Step into F6Step over F7Step return F8Resume

15. Eclipse Perspectives Eclipse “Perspectives” determine the visible actions and views within a window/tab. For Android there are 3 important “Perspectives”: 1.Java 2.Debugging 3.DDMS

16. Java Perspective This is the window where you will do the majority of your coding.

17. Debugging Perspective This is the default debugging tool built into Eclipse. Very similar to other debuggers (Netbeans, Visual Studio, etc). Allows the ability to set break points in code and pause the application’s execution and step through code line by line. Allows the ability to view a variable’s value(s) in real time, step into functions, etc.

18. Debugging Perspective

19. DDMS Perspective Usually the place for “advanced” features. Provides info for: 1.Devices Shows connected Android devices and emulators 2.Emulator Control Change network state, speed, latency Spoof calls or SMS text messages Set location of phone 3.Logcat Outputs messages that you print out using the Log class along with other system messages such as stack traces when exceptions are thrown.

20. DDMS Perspective

21. Logging Messages in Android System.out.println does not work like in regular Java programs. Instead make use of the Log class.

22. Logging in Android Log.d(String tag, String msg) – Send a DEBUG log message. Log.e(String tag, String msg) – Send an ERROR log message. Log.i (String tag, String msg) – Send an INFO log message. Log.v (String tag, String msg) – Send a VERBOSE log message. Log.w(String tag, String msg) – Send a WARN log message.

23. Logging in Android In the DDMS Perspective, inside the Logcat window, you can filter Log messages. You can filter log messages to reduce “noise” and only see certain types of Log messages.

24. Filtering Log Messages 1.By TAG – the first parameter of Log method 2.By type: DEBUG ERROR INFO VERBOSE WARN

25. Log Example This Log message could be filtered either by adding a filter for “INFO” Log messages or by adding a filter for the “HelloWorld” tag.

26. Log Documentation See http://developer.android.com/reference/android/util/Log.html for more details.http://developer.android.com/reference/android/util/Log.html

27. What makes an Android App? Most Apps Consists of Android manifest Activities Views Event logic for user interaction XML for defining layout, widgets, shapes, and colors OpenGL ES 1.1 or 2.x GLSurfaceView or Skia Canvas (android.graphics) if creating your own widgets. SQL Lite database JSON or XML for data to and from servers

28. Main components of an Android App Android Manifest Activities Views Application Resources Application Logic

29. Android Manifest Presents essential information about the application to the Android system. The system must have this info before running any of the application’s code. 1

30. Android Manifest’s role 1.Names the Java package for the application. 2.Declares permissions the application must have in order to operate. Access to the internet Access user’s contact data Read/write to system settings. Etc.

31. Android Manifest’s role 3.Declares the minimum level of the Android API the application requires to run. 4.Specify application icon and title 5.Describes the components of the application Activities Services Broadcast receivers Content provider

32. Android Manifest Example

33. Android Manifest Documentation http://developer.android.com/guide/topics/m anifest/manifest-intro.html http://developer.android.com/guide/topics/m anifest/manifest-intro.html

34. What is an Android Activity An activity is a single, focused thing that the user can do. Activities in the system are managed as an activity stack (LIFO). An application consists of at least 1 Activity, but can have many.

35. Activity Android Apps don’t have the main() paradigm. – Unlike C, C++, Java, etc. Instead, Android uses an Activity for the code execution starting point of an application. Activities have an important life cycle which every Android developer should know!!! 2

36. Activity Lifecycle

37. Activity Lifecycle onCreate() An activity is created when a user launches an application. The Activity’s onCreate() is the very first method called. Think of it as main(). Use this method for basic startup logic that should happen only once for the entire lifecycle.

38. onCreate() startup logic Create User Interface components dynamically or from resources. Initialize class scope variables. Get a reference to an object that was inflated from XML.

39. Activity Lifecycle onStart() Your application becomes visible

40. Activity Lifecycle onResume() The activity is visible and running Your activity will remain in this state until: – A new application starts (receive a phone call) – User navigates to a new activity (back key) – The device screen turns off Use this method to resume anything that was stopped or paused.

41. Activity Lifecycle onPause() Happens when your activity is partially hidden. (Pop-up Window) As long as your activity is partially visible but not in focus, you’re paused. Use this method to pause ongoing actions (video, music, animation, etc.), save state, and release system resources.

42. Activity Lifecycle onStop() Happens when your activity is no longer visible. Use this method to 1.release all system resources that aren’t needed while hidden 2.write information to a database

43. Resume from Pause & Restart from Stopped

44. Activity Lifecycle onStop() While your activity is stopped, your application is kept in memory. If the OS runs out of memory while your application is stopped, it may be destroyed.

45. Stop to destroy

46. Activity Lifecycle onDestroy() Called when the system destroys your activity. By now you should have released all application resources in onPause() and onStop(), so you shouldn’t have to do much here. This method is not guaranteed to be called, so you shouldn’t rely on it.

47. Activity Lifecycle Once your activity is destroyed, all hope is not lost. When your app is paused you have the opportunity to save temporary state into a blob. When the system tries to resume your application, the blob is used to restore your application to the state is was in when it was paused.

48. Recreated after getting destroyed

49. Views Views are “widgets” that appears on the screen. Similar to HTML element Each View has predetermined characteristics, use cases, and attributes. 3

50. Two Basic View Types View Base class for widgets Used to create interactive UI components. – Button – Textfield – Image ViewGroup Base class for layouts Serve as containers that hold others Views or other ViewGroups Define layout properties. Have unique characteristics for how they position children (grid, horizontally, vertically, list, etc)

51. Similarities to HTML : View HTML has predefined widget elements: – Android has predefined widget Views: –

52. Similarities to HTML: ViewGroup HTML has predefined container elements: – Android has predefined container ViewGroups: –

53. Views

54. Android Documentation for Input Controls http://developer.android.com/guide/topics/ui /controls.html http://developer.android.com/guide/topics/ui /controls.html

55. ViewGroups

57. ViewGroup Documention http://developer.android.com/guide/topics/ui /declaring-layout.html http://developer.android.com/guide/topics/ui /declaring-layout.html

58. Creating Views Views can be created 2 ways: 1.Declaratively in XML 2.Programmatically in code at runtime

59. Benefits of Declarative UI If possible, Android documentation strongly recommends using the declarative approach for the following reasons: 1.Helps separate the presentation of your application from the code that controls its behavior. 2.UI declared in XML is external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile. 3.Easier to visualize the structure of your UI. 4.Promotes clean code.

60. Declarative UI Example <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />

61. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> XML Prolog XML Namespace

62. You NEED to include the android namespace <LinearLayout http://schemas.android.com/apk/res/android:layout_width="match_parent" http://schemas.android.com/apk/res/android:layout_height="match_parent" http://schemas.android.com/apk/res/android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />

63. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> Doctype XML Namespace Element Attribute

64. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“@string/button_text" /> ViewGroup View

65. HTML Translation This is some text

66. View Attributes : ID XML Attribute android:id Description An identifier name for a View. Use a View’s id to easily retrieve the View object in code. Suggested Values For id values, use a lower case with underscore naming convention. Example android:id =“@+id/my_view”

67. @+id/ explanation Take another look at the previous example android:id="@+id/my_view“ Notice the following: – The at-symbol (@) – The plus-symbol (+)

68. At-symbol (@) @ indicates that the Android XML parser should resolve the string with a resource. Behind the scenes Android will take android:id="@+id/my_view" and extract the my_view string and resolve to an ID resource. (Sounds confusing, but I’ll explain.)

69. Plus-symbol (+) + indicates that you’re creating a new resource name that should be added to the resources. Only worry about the plus-symbol with id resources. When referencing an existing resource ID, you do not need the plus-symbol.

70. To plus and not to plus!

71. One final look 1.@ indicates it is a resource 2.What follows the @, indicates the type of resource. 3.What follows the /, indicates the name of the resource 4.+ indicates we are creating this resource android:id="@+id/my_view" 1 234

72. View Attributes: layout_width & layout_height XML Attribute android:layout_width : Specifies the basic width of the view. android:layout_height : Specifies the basic height of the view. Suggested values match_parent – Indicates that the view wants to be as big as its parent. wrap_content – Indicates that the view wants to be just large enough to fit its own internal content. Absolute dimension using dp/dip (density independent pixel) units. Example android:layout_width = “match_parent” android:layout_height = “wrap_content” android:layout_width = “120dp”

73. layout_width and layout_height tip Warning!! When declaring a view in XML, you must at minimum specify layout_width and layout_height. If you fail to do so, you will NOT be notified at compilation time; however, you will receive a runtime error.

74. View Attribute: Visibility XML Attribute android:visibility : Controls the initial visibility of the view. Values visible – Visible on screen; the default value invisible – Not displayed, but taken into account during layout (space is left for it). gone – Completely hidden, as if the view had not been added. Default Value visible Example android:visibility = “visible”

75. Visibility Example <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" /> <Button android:id="@+id/button3" android:layout_width="100dp" android:layout_height="100dp" android:text="Button3" />

76. visibility = invisible <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" android:visibility="invisible" /> <Button android:id="@+id/button3" android:layout_width="100dp" android:layout_height="100dp" android:text="Button3" />

77. visibility = gone <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <Button android:id="@+id/button1" android:layout_width="100dp" android:layout_height="100dp" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="100dp" android:layout_height="100dp" android:text="Button2" android:visibility="gone" /> <Button android:id="@+id/button3" android:layout_width="100dp" android:layout_height="100dp" android:text="Button3" />

78. Many more XML Attributes The View class itself has several more attributes Each specialized view has additional/unique attributes

79. View attributes in XML and Java All attributes in XML can be changed with Java methods.

80. Accessing Views declared in XML from Java The easiest way to find a handle to a View in code is to assign the view an ID in XML.

81. Accessing Views declared in XML from Java In code, use the method findViewById(int) to return the view.

82. Android Resources Resources is a broad term in Android. A Resource can be 1.Image 2.String 3.Layout 4.Integer 5.Color 6.Drawable (aka Image) 4

83. Android Resources Resources are defined by placing files in the /res directory of your project. Resources can be accessed in code and XML.

84. Android Resources Key points to remember 1.Every resource has an ID 2.Every resource has a specific type 3.Resources have a specific location and file they are defined in.

86. Types of resources DirectoryResource Type anim/XML files that define tween animations. color/XML files that define a state list of colors. drawable/Bitmap files (.png,.9.png,.jpg,.gif) or XML files that are compiled into drawable resources layout/XML files that define a user interface layout. menu/XML files that define application menus, such as an Options Menu, Context Menu, or Sub Menu. values/XML files that contain simple values, such as strings, integers, and colors. xml/Arbitrary XML files that can be read at runtime.

87. Default and Alternative Resources For any type of resource, you can specify default and multiple alternative resources for your application. Default resources Used regardless of the device configuration or when there are no alternative resources that match the current configuration. Alternative resources Used with a specific configuration. To specify that a group of resources are for a specific configuration, append an appropriate configuration qualifier to the directory name.

88. Default and Alternative Resources For example, default UI is saved in res/layout/ directory; however, landscape UI is saved in res/layout-land/ directory. Extra high density photos (for devices with a lot of pixels) are saved in res/drawable-xhdpi; however drawables for any device go in res/drawable

89. Resources and the R class Once you add a resource in the /res folder, the platform automatically parses it and links the resource ID to the R class. The R class maps each resource ID to its location or compiled content.

90. R class The R class is auto-generated for you. Do NOT edit this file!!! You use this class in your source code as a short-hand way to access your project’s resources.

91. Android Measurement Units 1.px – Equal to the size of a pixel on the device 2.dp/dip – dots per inch or the quantity of pixels within a physical area of the screen. 3.sp – Scale independent pixels. Very similar to dp, but is also scaled by user’s font size preference.

92. Best practice for units px – never use them because the actual representation can vary across devices. dp – recommended practice because allows view dimensions in your layout to resize properly for different screen densities. sp – recommended for font size

93. Many types of devices run Android

94. The difference density independence can make Without density independence. Uses px With density independence. Uses dp

95. More about units http://developer.android.com/guide/practices /screens_support.html http://developer.android.com/guide/practices /screens_support.html http://developer.android.com/guide/topics/re sources/more-resources.html#Dimension http://developer.android.com/guide/topics/re sources/more-resources.html#Dimension