Introduction to Android Chapters 1 2 Objectives Understand

Introduction to Android Chapters 1 -2

Objectives • Understand what Android is • Learn the differences between Java and Android Java • Examine the Android project structure • Build a basic application using Android Studio • Learn about the Model-View-Controller design 2

What Is Android? • Mobile OS by Google • Based on Linux kernel • Touchscreen devices • Direct UI manipulation • Touch gestures (swiping, tapping, pinching) • Virtual keyboard Platform consisting of different components 3

Evolution of Android Q: Which version to support? https: //en. wikipedia. org/wiki/Android_version_history 4

Android Programming Basics • Java for most framework • Java SDK + Android SDK + IDE (Android Studio) • XML for configuration and resources • Cursorless control (gestures using fingers) • Framework concepts • • • Activities Intents Views and widgets Asynchronous calls Background services … 5

Java vs. Android Java • A large number of Java libraries in the Android platform • Android SDK: Dalvik compiler, debugger, software libraries, emulator ART 6

Java API vs. Android API • No Java virtual machine in the Android platform • Specialized VM, Dalvik and ART (since v 5. 0) • Java bytecode compiled again into a proprietary bytecode, dex bytecode • Dex bytecode <-> Java bytecode • Dex bytecode: compact Dalvik executable format designed for Android systems, constrained in terms of memory and processor speed. • Dalvik dx tool for translating java bytecode into dex bytecode 7

Android Studio (Intelli. J IDEA) • Official IDE for building Android applications, including: Java editor, layout editor, Android SDK, emulator, gradle, etc. • Focuses exclusively on Android development and comes bundled with the Android Software Development Kit, SDK • Android SDK, a set of tools and API libraries for: • Building complete applications, • Testing them on virtual devices, and • Performing debugging and optimization 8

Anatomy of Android Project • Organization of Android project • • • Source code Application’s resources Manifest settings Build files Generated files (e. g. , R. java) • All of these files eventually packaged into an APK (distribution) file 9

Background: Android Apps A typical Android app consists of: • Activities (Java): Behavior of an app or interaction with the user for a single screen (C in MVC) • Layouts (XML): Look or appearance of an app (V in MVC) • Resource files (XML, icons, images, etc. ) App* Layouti 1 Activity 2 Activityi Activityn *Other Layouti 2 Layoutim app components: services, broadcast receivers, content providers. 10

Define essential information about the app, such as screen orientation and Internet permission Java source code files Stores XML files that defines the user interfaces of the app Bitmap images organized by the screen density Stores Gradle build files containing editable project configuration options Value resource files, written in XML code, that can be used to define colors, strings, and any other values required by the app. 11

Android Manifest File • An Android. Manifest. xml, is required for every Android application. • This file uses XML code to define specific application information. • This information can include general applicationwide settings such as the application’s style, launch icon, and permissions. 12

Android. Manifest. xml <manifest xmlns: android=". . . " package="edu. utep. cs 4330. timer"> <uses-permission android: name="android. permission. INTERNET" /> <application androd: icon="@mipmap/launch_icon" android: label="@string/app_name“ android: theme="@style/App. Theme"> <activity android: name=". Main. Activity" android: label="@string/app_name"> <intent-filter> <action android: name="android. intent. action. MAIN"/> <category android: name="android. intent. categry. LAUNCHER"/> </intent-filter> </activity> <activity …> … </activity> </application> </manifest> 13

Java Source Code • The Java source code of an application is placed in the java directory of the project structure. • A main file, often named Main. Activity, is a Java file that is auto-generated when the project is first created. • Can include JUnit test files, local tests and instrumented tests. 14

Drawable/mipmap Resources • The drawable/mipmap folder is located in the res directory • res contains the application resources • Drawable/mipmap resources are image files, such as application icons, buttons, and background textures • Q: mipmap vs. drawable folders? • mipmap for app/launch icons • drawable for all others • Q: how to refer to an XML resource such as a drawable in Java source code? 15

Image Resources (Cont. ) Can store images of different qualities for different screen densities • • • mdpi (medium) ~ 160 dpi hdpi (high) ~ 240 dpi xhdpi (extra-high) ~ 320 dpi xxhdpi (extra-high) ~ 480 dpi xxxhdpi (extra-extra-high) ~ 640 dpi Physical view 16

Layout XML Files • User interface screens are visually designed using the Layout editor and stored in XML files. • The design and arrangement of the elements on the screen are implemented using XML code in a layout file. • Q: Advantages and disadvantages? • Q: How to associate an XML layout with an activity? 17

Layout XML Files (Cont. ) Can have multiple layout files for different screen sizes • small screens are at least 426 dp x 320 dp Physical view • normal screens are at least 470 dp x 320 dp • large screens are at least 640 dp x 480 dp • xlarge screens are at least 960 dp x 720 dp From “Supporting Multiple Screens” (https: //developer. android. com/guide/practices/screens_support. html) 18

Example: activity_main. xml Relative. Layout Linear. Layout <? xml version="1. 0" encoding="utf-8"? > <Relative. Layout xmlns: android= "http: //schemas. android. com/apk/res/android" …> <Text. View … /> <Linear. Layout … android: orientation="horizontal"> <Button … android: id="@+id/start. Button" android: text="@string/start" android: on. Click="start. Clicked" /> <Button … /> </Linear. Layout> </Relative. Layout> 00: 02: 25 Start Stop Text. View Button R. id. start. Button in source code // File: R. Java public final class R { public static class id { public static final int start. Button = 0 x 7 f 0900 d 1; … } 19

Build Files • Project configuration options android { compile. Sdk. Version 26 default. Config { application. Id "edu. utep. cs 4330. timer" an integer used as an min. Sdk. Version 16 internal version number target. Sdk. Version 26 version. Code 1 a string shown to the user, version. Name "1. 0" e. g. , major. minor. release … } } dependencies { implementation 'com. android. support: appcompat-v 7: 26. 1. 0' implementation 'com. android. support. constraint: constraint-layout: 1. 0. 2' test. Implementation 'junit: 4. 12' … } 20

Sharing Android Apps (APK files) • An APK is an Android application package containing app’s bytecode, libraries and resources (similar to a Java JAR file). • Android requires the application to be digitally signed with a certificate. • Android uses this certificate to identify the author. • Android apps typically use self-signed certificates, in which the app developer holds the certificate’s private key. 21

In-class: Timer App To have a taste of Android programming by: • Defining a simple UI in XML file (activity_main. xml), • Externalizing constants in XML file (strings. xml), • Connecting UI to activity (set. Content. View), • Retrieving views defined in XML (find. View. By. Id), • Defining control code for views (android: on. Click), • Separating model code from view and control. activity_main. xml Timer. Model Main. Activity strings. xml 22

Side: Model-View-Controller • Android applications tend to rely on the Model. View-Controller design architecture. • This architecture assigns one of three roles that objects can play in an application. update UI View (UI element) notify user action Control update data Model (data) notify change 23

Side: Log and Logcat • Use android. util. Log class to write logs. Log. v(String tag, String msg): log a verbose message Log. d(String tag, String msg): log a debug message Log. i(String tag, String msg): log an information message Log. w(String tag, String msg): log a warning message Log. e(String tag, String msg): log an error message private static final string TAG = “Main. Activity”; … Log. v(TAG, "Elapsed time = " + timer. Model. elapsed. Time()); … 24

Side: Log and Logcat (Cont. ) • View logs with Logcat while the app is running (1). • Use a filter to filter out millions of log messages, esp. from other apps (2). private static final string TAG = “Main. Activity”; … Log. v(TAG, "Elapsed time = " + timer. Model. elapsed. Time()); … use a filter 2 1 25

Steps 0. 1. 2. 3. 4. 5. 6. Create a new project named Timer Create UI using the Layout Editor Change the project configuration to use Java 8 Connect UI to the control class (Activity) Associate with the model class (Timer. Model) Externalize constants Optionally, internationalize/localize (e. g. , Spanish support) 26

Step 0. Create a New Project • Select “Empty Activity” Name: Timer Package name: edu. utep. cs 4330. timer Minimum API level: API 21: Android 5. 0 (Lollipop) Empty activity 27

Step 1. Create a UI • Use the Layout Editor • Edit res/layout/activity_main. xml (design/text) Text. View id: “time. Display” text: “ 0: 00” Button id: “start. Button” text: “Start” Button id: “stop. Button” text: “Stop” <? xml version="1. 0" encoding="utf-8"? > <android. support. constraint. Constraint. Layout …> <Text. View android: id="@+id/time. Display" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="0: 00" app: layout_constraint. Bottom_to. Bottom. Of="parent" … /> <Button android: id="@+id/start. Button" android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Start" app: layout_constraint. Top_to. Bottom. Of="@+id/time. Display“ … /> … </android. support. constraint. Constraint. Layout> 28

Step 1. Create a UI (Cont. ) • Contraint. Layout* • Position a view relative others including the parent • Need to add at least one horizontal and one vertical constraint Steps 1. Drop a view to the editor 2. Connect constraint handles (e. g. , top/bottom/left/right) resizing handle constraint handle *Refer to “Build a Responsive UI with Constraint. Layout” (https: //developer. android. com/training/constraintlayout/index. html) Read Chapter 6 of Head First Android Development (D. Griffiths and D. Griffiths, 2 nd edition, O’Reilly, 2017). 29

Constraint. Layout • At least one horizontal and one vertical constraint start top end bottom <Button android: id="@+id/stop. Button" … android: text="Stop“ app: layout_constraint. Start_to. Start. Of="parent“ app: layout_constraint. End_to. End. Of="parent“ app: layout_constraint. Top_to. Bottom. Of="@+id/start. Button" app: layout_constraint. Bottom_to. Bottom. Of="parent“ /> 30

Specifying Size of View Many view attributes, including the two required attributes: • layout_width • layout_height width => so that layout knows how to size a view height Start android: layout_height="wrap_content" android: layout_width="match_parent" (previously "fill_parent“) or android: layout_width="100 dp" Start layout_width="match_parent" Start layout_width= "wrap_content" 31

Step 2. Enable Java 8 • Edit Gradle Scripts/build. gradle (Module: app) • Add the following compile. Options lines*: android { compile. Sdk. Version 26 default. Config { application. Id "edu. utep. cs 4381. timer" … } build. Types { … } compile. Options { source. Compatibility Java. Version. VERSION_1_8 target. Compatibility Java. Version. VERSION_1_8 } } *Or use File > Project Structure (or app > Open Module Settings) and set the app | Properties | Source/target compatibility. 32

Step 3. Connect UI to Activity • Edit java/edu. utep. cs 4330. timer/Main. Activity public class Main. Activity extends App. Compat. Activity { private Text. View time. Display; private Button start. Button; private Button stop. Button; <<interface>> View. On. Click. Listener on. Click(View): void protected void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. activity_main); time. Display = find. View. By. Id(R. id. time. Display); start. Button = find. View. By. Id(R. id. start. Button); start. Button. set. On. Click. Listener(this: : start. Clicked); // similarly for stop button … } private void start. Clicked(View view) { Toast. make. Text(this, "Start tapped!", Toast. LENGTH_SHORT). show(); start. Button. set. Enabled(false); stop. Button. set. Enabled(true); } } 33

Side: on. Click Property of View public class Main. Activity extends App. Compat. Activity { private Text. View time. Display; private Button start. Button; private Button end. Button; protected void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. activity_main); display = find. View. By. Id(R. id. time. Display); start. Button = find. View. By. Id(R. id. start. Button); start. Button. set. On. Click. Listener(this: : start. Clicked); // similarly for stop button … } private public void start. Clicked(View view) { Toast. make. Text(this, "Start tapped!", Toast. LENGTH_SHORT). show(); start. Button. set. Enabled(false); stop. Button. set. Enabled(true); } } <<interface>> View. On. Click. Listener on. Click(View): void activity_main. xml <Button android: id="@+id/start. Button“ android: on. Click=“start. Clicked" … /> 34

Step 4. Link With Model a. Start/stop the timer, and show the passed time when stopped. public class Main. Activity extends App. Compat. Activity { private Timer. Model timer. Model; protected void on. Create(Bundle saved. Instance. State) { … timer. Model = new Timer. Model(); } private void disply. Time() { long sec = timer. Model. elapsed. Time() / 1000; long min = sec / 60; sec %= 60; long hour = min / 60; min %= 60; timer. Display. set. Text(String. format(“%d: %02 d”, hour, min, sec); } private void start. Clicked(View view) { private void stop. Clicked(View view) { timer. Model. start(); display. Time(); timer. Display. set. Text(“ 0: 00”); timer. Model. stop(); … … } } 35

Step 4. Link With Model (Cont. ) b. Show the elapsed time continuously. private void start. Clicked(View view) { timer. Model. start(); new Thread(() -> { while (timer. Model. is. Running()) { this. run. On. Ui. Thread(this: : display. Time); try { Thread. sleep(200); // in millis } catch (Interrupted. Exception e) {} } }). start(); start. Button. set. Enabled(false); stop. Button. set. Enabled(true); } <<interface>> Runnable run(): void Q: Potential issue? private void stop. Clicked(View view) { timer. Model. stop(); start. Button. set. Enabled(true); stop. Button. set. Enabled(false); } 36

Step 5. Externalize Constants Start • Edit res/layout/activity_main. xml • Replace string “Start” of the start button to “@string/start”. 2 res/layout/activity_main. xml 3 Q: Benefits? 1 A: Localization, e. g. , res/values-esr. MX/strings. xml 3 res/values/strings. xml 37

Step 6. Side: Localization – Hola! • Spanish support: string resources instead of hard-coded text • Res popup: New > Android Resource File (1) • File name: strings and locale (language tag): es (2) • Define a Spanish strings. xml (3) 1 Comienzo 2 res/values-es/strings. xml 3 38