1. Chapter 1: Basics of Android, First App: HelloAndroid

2. Learning Objectives Examine Android OS history
Get familiar with Android Studio, the Development Environment
Learn about and edit the various files defining an app
Learn how to run and debug an app

3. Mobile Apps The two major operating systems are iOS and Android
There are over 1 million apps in Google Play (Android)
There are also over 1 million apps in the App Store (Apple-iOS)

4. Android Phones
Android is an open-sourced operating system that is used primarily on mobile devices, such as cell phones and tablets
There are over 100 different varieties of Android phones and tablets with a different: CPU, screen resolution, and amount of memory available
Difficult to test apps with these differences

5. Android – Google Play
Android apps are distributed via Google Play (Android Market)
Distribute apps
Registered Developer
$25 Fee
Open OS
Little protection for intellectual property (IP)

7. Initial Release Date Code Name API Level Version Number
Sept 23, 2008
Alpha 1
1.0
Feb 9, 2009
Beta 2
1.1
April 27, 2009
Cupcake 3
1.5
Sept 15, 2009
Donut 4
1.6
October 26, 2009
Éclair
5-7
May 20, 2010
Froyo 8
2.2
Dec 6, 2010
Gingerbread
9-10
2.3
Feb 22, 2011
Honeycomb
11-13
Oct 18, 2011
Ice Cream Sandwich
14-15
4.0
July 9, 2012
Jelly Bean
16-18
Oct 31, 2013
KitKat
19-20
4.4
Nov 12, 2014
Lollipop
21-22
Oct 5, 2015
Marshmallow 23
6.0
Aug 22, 2016
Nougat
24-25
Aug 21, 2017
Oreo
26-27

8. Android—Development Environment (1 of 2)
Android Studio is becoming the industry-standard IDE. (Eclipse used to be the standard, but Google no longer supports it.)
JDK: Java Development Kit
Android SDK: Android Standard Development Kit (Libraries for Android)

9. Android—Development Environment (2 of 2)
To set up the development environment, we need to download and install:

10. HelloAndroid App

11. HelloAndroid App

12. HelloAndroid App

13. HelloAndroid App

14. HelloAndroid App

15. HelloAndroid App

17. HelloAndroid App - Preview

18. HelloAndroid App - Preview
We can customize the preview:
Landscape (horizontal) vs. Portrait (vertical) orientation
Choose a device
Choose a theme

19. HelloAndroid App - GUI
The file activity_main.xml, in the layout directory of the res directory, defines the layout for this HelloAndroid app
It is automatically generated and written in XML

20. XML (1 of 4) XML stands for eXtensible Markup Language
We can think of XML as a markup language similar to HTML, but with user-defined tags
See full documentation at

21. XML (2 of 4) A non-empty element uses this syntax: For example:
<tagName attribute1 = "value1" attribute2 = "value2" … >Element Content</tagName>
For example:
<app language = "Java" version = "7.0">Hello Android</app>

22. XML (3 of 4)
If an element has no content (the element is empty), then we can use this syntax:
<tagName attribute1 = "value1" attribute2 = "value2" … />
For example:
<dev ide = "Studio" version = "1"/>

23. XML (4 of 4) Elements can be nested as in: <a>
<b>hello</b>
</a>
There are rules for naming tags: they are similar to naming identifiers in java
Comments
<!-- Write a comment here -->

24. activity_main.xml (1 of 6)
There are two elements in activity_main.xml:
A RelativeLayout* and a TextView

25. activity_main.xml (2 of 6)
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="16dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="16dp" tools:context="com.example.android.helloandroid.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"/> </RelativeLayout>

26. activity_main.xml (3 of 6)
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout …> <TextView …/> </RelativeLayout>

27. activity_main.xml (4 of 6)
<RelativeLayout … android:layout_width="match_parent" android:layout_height="match_parent“
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp“ …
>

28. activity_main.xml (5 of 6)
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"/>

29. activity_main.xml (6 of 6)
The three attributes are: android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"

30. HelloAndroid New Display

31. strings.xml (1 of 2)
The strings.xml file is another (automatically generated) XML file; its contents comply with XML syntax
One string is defined in the strings.xml file: app_name

32. strings.xml (2 of 2) The syntax for defining a string is:
<string name ="stringName">valueOfString</string>
HelloAndroid code:
<resources> <string name="app_name">HelloAndroid</string> </resources>

33. HelloAndroid New Display

34. styles.xml (1 of 4)
The styles.xml file is another (automatically generated) XML file; its contents comply with XML syntax
It is used to define styles that the app uses

35. styles.xml (2 of 4) Hello Android Code:
<resources> <!-- Base application theme. --> <style name="AppTheme"
parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. --> <item <item <item </style> </resources>

36. styles.xml (3 of 4)
We can modify a style by adding an item element using this syntax:
<item name="styleAttribute">valueOfItem</item>

37. styles.xml (4 of 4)
The name of the style attribute that specifies the text size inside a TextView is android:textSize
We change the default text size to 40 by adding the below to the styles.xml file:
<item name="android:textSize">40sp</item>

38. HelloAndroid New Display

39. colors.xml (1 of 4)
The colors.xml file is another (automatically generated) XML file; its contents comply with XML syntax
It is used to define colors

40. colors.xml (2 of 4) Hello Android Code:
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> </resources>

41. colors.xml (3 of 4) The syntax for defining a color is
<color name = "colorName"> valueOfColor</color>
The color value is defined using hexadecimal notation

42. Hexadecimal Color Value
#rrggbb (uses RGB color system)
rr = amount of red in color
gg = amount of green in color
bb = amount of blue in color
Values vary from 00 (0) to FF (255)
That means we can define 256 × 256 × 256 = 16.7 million colors

43. colors.xml (4 of 4)
If we modify the value of colorPrimary to red (#FF0000):
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#FF0000</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> </resources>

44. HelloAndroid New Display

45. MainActivity Class (1 of 6)
The class MainActivity (default name) is located in the java directory
It extends the AppCompatActivity class (in android.support.v7.app package)

46. MainActivity Class (2 of 6)
AppCompatActivity is a subclass of Activity
An Activity provides a screen with which users can interact
This class is meant to be used as the Controller for the app

47. MainActivity Class (3 of 6)
The onCreate method is called automatically
Inside the onCreate method, we should create the initial view for the app, controlled by this Activity
setContentView, a method inherited from the Activity class

48. MainActivity Class (4 of 6)
void setContentView( int layoutResID )
IDs of resources can be found in the R.java file inside the /app/build/generated/source/r/debug/com/ example/android/helloandroid directory
R.classname.constantname

49. MainActivity Class (5 of 6)
Inside onCreate:
setContentView( R.layout.activity_main)
 the View for this Activity is set to be the one defined in the activity_main.xml file

50. MainActivity Class (6 of 6)
activity_main.xml is an xml file, a resource, located in the layout directory of the res directory
It was automatically created when we created the project
It is an XML file that defines a simple layout for this Hello World app

51. Running the App We will first run the app inside the emulator
An Android Virtual Device (AVD) should have been created when we installed Android Studio (probably for a Nexus 5)
We can create more AVDs that will emulate other existing Android devices

52. Creating an AVD (Android Virtual Device)
Click Tools, then Android, then AVD Manager, OR click on the AVD Manager icon
The AVD Manager opens
Click on Create Virtual Device

53. Creating an AVD
Choose from the list of possible AVDs and hit Next

54. Creating an AVD
Download and select the version desired to test and hit Next

55. Creating an AVD
The last step is to set the characteristics of the AVD

56. Running the App (1 of 3)
Click on the Run icon, or click on Run, then Run app
A dialog box appears asking you to choose a device

57. Running the App (2 of 3)

58. Running the App (3 of 3)
If we select an AVD, then the emulator will be launched
It may take a couple of minutes to show and run
The app should be running inside the emulator
*It is better to leave the emulator open
(rather than close it every time we run)

59. Running Inside the Emulator (1 of 2)
Rotation
Ctrl+F11
Ctrl+F12

60. Running Inside the Emulator (2 of 2)
After rotating the app

61. Instant Run
An interesting recent feature of Android Studio is Instant Run

62. Feedback and Debugging
We can send output to the console in addition to displaying data on the screen
For this, we can use various static methods of the Log class, located in the android.util package
V (Verbose), D (Debug), I (Info), W (Warn), E (Error)

63. Logcat Output

64. Setting Up a Filter (1 of 2)
To create a filter, click on the combo box on the right of the lower panel, select Edit Filter Configuration

65. Setting Up a Filter (2 of 2)
Inside the dialog box, enter a name for the filter and a Log tag for it
For example, the filter name can be MainActivity, and the tag name can be MainActivity

66. Using the Log Class package com.example.android.helloandroid;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
public class MainActivity extends AppCompatActivity {
public static String MA = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.w(MA,"View resources: " + R.layout.activity_main); }

67. Logcat Output

68. Using the Debugger (1 of 4)
Android Studio includes a debugger
We can set up breakpoints, check the values of variables or expressions, step over code line by line, check object memory allocation and take screenshots and videos

69. Using the Debugger (2 of 4)
To set up a breakpoint, we click on the left of a statement: an orange filled circle appears

70. Using the Debugger (3 of 4)

71. Using the Debugger (4 of 4)
As we resume, stop at breakpoints, and resume the app a few times, the values of the various variables in our app are displayed under Variables

72. Running on an Actual Device (1 of 4)
To run on an actual device, we need to do two things:
Download a driver for the device
Connect the Android device to the computer

73. Running on an Actual Device (2 of 4)
Once the device is connected, its name should appear on the left upper corner of the lower pane

74. Running on an Actual Device (3 of 4)
When we click the run or debug button, it should appear under “Connected Devices"
Select the device and click on OK

75. Running on an Actual Device (4 of 4)
The app running inside a tablet

76. The App Manifest
AndroidManifest.xml is located in the manifests directory, specifies the resources that the app uses, such as activities, the file system, the Internet, and hardware resources

77. The App Manifest <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="
package="com.example.android.helloandroid">
<application
android:allowBackup="true"
android:supportsRtl="true"
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

78. Launcher Icon (1 of 3)
Launcher icon - the visual representation of our app on the home screen or the apps screen on a device
Density
Dimensions
Medium
48 x 48 dp
High
72 x 72 dp
X-High
96 x 96 dp
XX-High
144 x 144 dp
XXX-High
192 x 192 dp
Google Play
512 x 512 dp

79. Launcher Icon (2 of 3) Add a new image, hi.png to the mipmap folder
To set the launch icon for the app to hi.png, we assign the to the android:icon attribute of the application element in the AndroidManifest.xml file

80. Launcher Icon (3 of 3)
When we run an app inside a device, the app is automatically installed
If we included an icon, we can see the app among the various app icons of the device

81. Orientation Portrait (Vertical) Landscape (Horizontal)
android:screenOrientation=“portrait”
android:screenOrientation=“landscape”

82. Gradle Build System (1 of 2)
Android Application Package (APK), is the file format for distributing applications that run on the Android operating system
The file extension is .apk
The apk file can be found in the projectName/app/build/outputs/apk directory

83. Gradle Build System (2 of 2)
Apk files are built using the gradle build system
When we start an app, the gradle build scripts are automatically created

84. Hello Android Android Studio environment
The XML layout file: activity_main.xml
Other XML files: strings.xml, styles.xml, colors.xml
Running inside the emulator
Running on a device
The Activity (MainActivity) class
Logcat output, Debugger