Introduction to Android app development using Android Studio

1. 1 / 89
PPTB (ET-4044)
Android
Programming
Basics
Eueung Mulyana
https://eueung.github.io/012017/android1
CodeLabs | Attribution-ShareAlike CC BY-SA

2. Outline
Android & Android Studio
App Development
Building Your First App
2 / 89

3. Notes
Android Studio 2.3.3 (Stable Channel)
A copy of the latest OpenJDK comes bundled with Android Studio 2.2 and higher, and this is the
JDK version recommended for your Android projects. Ref: [Con gure Android Studio]
3 / 89

4. Android & Android Studio
4 / 89

5. 5 / 89
What is
Android
Mobile operating system based on Linux kernel
User Interface for touch screens
Used on over 80% of all smartphones
Powers devices such as watches, TVs, and cars
Over 2 Million Android apps in Google Play store
Highly customizable for devices / by vendors
Open source
Ref: Android Developer Fundamentals

6. Android Versions
6 / 89

7. 7 / 89
Android
Studio+ Android SDK
O cial Android IDE
Develop, run, debug, test, and package
apps
Monitors and performance tools
Virtual devices
Project views
Visual layout editor
Ref: Android Developer Fundamentals

8. 8 / 89
Logical Areas
1. Toolbar
2. Navigation Bar
3. Editor Window
4. Tool Window Bar (Expand/Collapse)
5. Tool Window
6. Status Bar

9. 9 / 89
Layout Editor
Project Window (1)
Palette of UI Elements (2)
Selectors (3)
Design Pane (6)
Component Tree (7)
Design/Text Tabs (8)

10. 10 / 89
Layout Editor
Properties Pane (4)
Text Property of TextView (5)

11. App Development
11 / 89

12. 12 / 89
Android
App
One or more interactive screens
Written using Java Programming
Language and XML (*)
Uses the Android Software Development
Kit (SDK)
Uses Android libraries and Android
Application Framework
Executed by Android Runtime Virtual
machine (ART)
Ref: Android Developer Fundamentals

13. 13 / 89
Android
Challenges
Multiple screen sizes and resolutions
Performance: make your apps responsive and smooth
Security: keep source code and user data safe
Compatibility: run well on older platform versions
Marketing: understand the market and your users (Hint: It
doesn't have to be expensive, but it can be.)

14. 14 / 89
App
Building
Blocks
Resources: layouts, images, strings, colors as XML and
media les
Components: activities, services,... and helper classes as
Java code
Manifest: information about app for the runtime
Build con guration: APK versions in Gradle con g les

15. 15 / 89
Component
Types
Activity is a single screen with a user interface
Service performs long-running tasks in background
Content provider manages shared set of data
Broadcast receiver responds to system-wide
announcements

16. 16 / 89
Think of
Android as a
Hotel
Your App is the guest
The Android System is the hotel manager
Services are available when you request them (Intents)
In the foreground (Activities) such as registration
In the background (Services) such as laundry
Calls you when a package has arrived (Broadcast Receiver)
Access the city's tour companies (Content Provider)
Ref: Android Developer Fundamentals

17. Android Studio
Building Your First App
17 / 89

18. 18 / 89
Building
Your First App
1. Create an Android Project
2. Run Your App
3. Build a Simple User Interface
4. Start Another Activity

19. Create an Android Project
19 / 89

20. Start a New Project 20 / 89

21. Adjust Application name (& Company domain) 21 / 89

22. Set Target Devices 22 / 89

23. Co ee Time ... (If SDK components not yet locally available) 23 / 89

24. Add Empty Activity 24 / 89

25. Adjust Activity Name (& Layout Name) 25 / 89

26. Project Window | app>java> ... >MainActivity.java 26 / 89

27. app>res>layout>activity_main.xml (Design View)
27 / 89

28. app>res>layout>activity_main.xml (Text View)
28 / 89

29. app>manifests>AndroidManifest.xml 29 / 89

30. @string/app_name 30 / 89

31. @string/app_name 31 / 89

32. Run Your App
On an Emulator | On a Real Device
32 / 89

33. Launch AVD Manager 33 / 89

34. Create Virtual Device 34 / 89

35. Select Hardware | Phone 35 / 89

36. Download System Image (If it's not already there) 36 / 89

37. Co ee Time ... 37 / 89

38. Select System Image 38 / 89

39. Verify -> Finish 39 / 89

40. Launch this AVD in the Emulator 40 / 89

41. AVD Launched 41 / 89

42. Run the App 42 / 89

43. Select Target 43 / 89

44. Showtime! 44 / 89

45. Run Your App
On an Emulator | On a Real Device
45 / 89

46. 46 / 89
USB Debugging
Settings>General >About Device
Note: Titles may vary!

47. 47 / 89
USB Debugging
Build Number

48. 48 / 89
USB Debugging
Build Number | Tap 7x!

49. 49 / 89
USB Debugging
Settings>Developer Options

50. 50 / 89
USB Debugging
Settings>Developer Options | USB Debugging
Note: Titles may vary!

51. Run | Select Target 51 / 89

52. 52 / 89
Done!
Installed on the Device

53. Build a Simple User
Interface
53 / 89

54. Show Blueprint, Show Constraints, Autoconnect O & Default Margin 16 54 / 89

55. Component Tree | Replace TextView with EditText | Adjust/Drag Constraint Anchors 55 / 89

56. Add Button | Adjust/Drag Constraint Anchors | Note: Baseline Constraint 56 / 89

57. Change the UI Strings | String Resources 57 / 89

58. Change the UI Strings | Translation Editor 58 / 89

59. Properties | @string/edit_message (Remove text) 59 / 89

60. Properties | @string/button_send 60 / 89

61. Select Both | Center Horizontally 61 / 89

62. A Chain Between the Two Views 62 / 89

63. Button | Left & Right Margin ->16 63 / 89

64. Text | Left Margin ->16 | Width Indicator -> Match Constraints 64 / 89

65. activity_main.xml (Text) 65 / 89

66. Run & Test 66 / 89

67. Start Another Activity
67 / 89

68. sendMessage() Method Stub | Alt + Enter -> Import class 68 / 89

69. Connect sendMessage() to the Button 69 / 89

70. app | Create a New Empty Activity 70 / 89

71. DisplayMessageActivity 71 / 89

72. DisplayMessageActivity.java 72 / 89

73. MainActivity.java 73 / 89

74. activity_display_message.xml | textAppearance 74 / 89

75. Run & Test 75 / 89

76. AVD - Landscape 76 / 89

77. 77 / 89
Run & Test
Real Device | SM-N750

78. 78 / 89
Run & Test
Real Device | SM-N750

79. MainActivity.java | Di
79 / 89

80. package com.example.em.exampleapplication01;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
public static final String EXTRA_MESSAGE = "com.example.em.exampleapplication01.MESSAGE";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void sendMessage(View view) {
Intent intent = new Intent(this, DisplayMessageActivity.class);
EditText editText = (EditText) findViewById(R.id.editText);
String message = editText.getText().toString();
intent.putExtra(EXTRA_MESSAGE, message);
startActivity(intent);
}
}
80 / 89
MainActivity.java

81. package com.example.em.exampleapplication01;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
public class DisplayMessageActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_display_message);
// Get the Intent that started this activity and extract the string
Intent intent = getIntent();
String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
// Capture the layout's TextView and set the string as its text
TextView textView = (TextView) findViewById(R.id.textView);
textView.setText(message);
}
}
81 / 89
DisplayMessageActivity.java

82. activity_main.xml | Di
82 / 89

83. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.em.exampleapplication01.MainActivity">
<EditText
android:id="@+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="@string/edit_message"
android:inputType="textPersonName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button"
android:layout_marginLeft="16dp" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:onClick="sendMessage"
android:text="@string/button_send"
app:layout_constraintBaseline_toBaselineOf="@+id/editText"
app:layout_constraintLeft_toRightOf="@+id/editText"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
83 / 89
activity_main.xml

84. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.em.exampleapplication01.DisplayMessageActivity">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="TextView"
android:textAppearance="@style/TextAppearance.AppCompat.Display1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
84 / 89
activity_display_message.xml

85. AndroidManifest.xml | Di
85 / 89

86. <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.em.exampleapplication01">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".DisplayMessageActivity" android:parentActivityName=".MainActivity"
</application>
</manifest>
86 / 89
AndroidManifest.xml

87. Refs/Resources
87 / 89

88. Refs/Resources
1. Getting Started | Android Developers
2. Dashboards | Android Developers
3. Android Developer Fundamentals | Google Developers Training | Google Developers
4. Introduction - Android Developer Fundamentals Course - Practicals
88 / 89

89. 89 / 89
ENDEueung Mulyana
https://eueung.github.io/012017/android1
CodeLabs | Attribution-ShareAlike CC BY-SA