Developing Android Applications Introduction to Software Engineering Fall 2015. Updated 7 October 2015

Developing Android Applications Introduction to Software Engineering Fall 2015 Updated 7 October 2015

Android Lab 1 Introduction to Android Class Assignment: Simple Android Calculator 2

Class Plan Introduction Android Studio Installation Guide Project Setup Android Simulation Setup Interface Setup Basic Concepts Lab Assignment: Calculator 3

Introduction 4

What s Android The world's most popular mobile platform Powerful development framework Android Developer Tools offer a full Java IDE with advanced features for developing, debugging, and packaging Android apps Open marketplace for distributing your apps One time 25$ developer registration fee 5

Version History Cupcake Donut Eclair Froyo Gingerbread Honeycomb 1.5 API LVL 3 1.6 API LVL 4 2.0 2.1 API LVL 5-7 2.2 2.2.3 API LVL 8 2.3 2.3.7 API LVL 9-10 3.0 3.2.6 API LVL 11-13 Major (3) Minor Major Minor Major (9) Major (11) Ice Cream Sandwich Jelly Bean KitKat Lollipop 4.0-4.2 API LVL 14-15 4.1 4.3.1 API LVL 16-18 4.4 4.4.4 API LVL 19-20 5.0 5.1.1 API LVL 21-22 Major Minor Minor Major Each version of Android introduces new features. Some include smaller changes, optimizations and bugfixes while others greatly update the operating system architecture. 6

Android SDK The Android SDK provides access to the API libraries and developer tools necessary to build, test, and debug apps for Android. http://developer.android.com/sdk/index.html Available Tools ADT Bundle (based on Eclipse IDE) Support being Discontinued Android Studio (IntelliJ IDEA) Recently, Google accepted Android Studio as its official IDE. ` NOTE: You only need one of the development tools! 7

Device Testing Reminders: Windows: See OEM USB Drivers document if drivers are necessary. MTP : Media Transfer Protocol Mac OS: Android File Manager. PTP : Picture Transfer Protocol Enable USB debugging on your device. On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development. On Android 4.0 and newer, it's in Settings > Developer options. Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options. 8

Installation (Android Studio) 9

Installation Download and Install Android Studio Just keep pressing next/accept Select your UI Update the tools Done! 10

Creating a Project Android Studio 11

The First Simple App: Hello World! Select Start New A.S. Project 12

Project Name viewed on Project List Domain of the group developing the app The developer name is generally based on reverse.com domain hierarchy. [country code].[top level domain].[business name].[subdomain].[team] Ex: br.com.firasoft.msp.jimmyfive Country Code, Subdomain and Team Fields are optional. Package name displayed on Google Play The package name is produced from Application Name and Company Domain. You can edit the Package Name if necessary 13

Project SDK Version Use API LVL 15 during the tutorial. After learning the ropes, you can develop and publish apps for multiple variations of the Android OS. 14

Activity Template Special types of activities which have minimum elements for their view (UI) Select a Blank Activity for this exercise. If you d like to have special activities you should update the minimum SDK version. Example: Full screen Applications Started being supported on 4.4 (API LVL 19) 15

You can configure the naming scheme of your Activity, these details only affect the developer side of things. This is an opportunity for you to employ the knowledge you are learning in class. By default Java uses Capitalized Camel Code as a standard for Classes, Interfaces and Camel Code for Methods and Variables. Check Oracle s website for more details: http://www.oracle.com/technetwork/java/code conventions-135099.html 16

Android Virtual Device manager Palette for Buttons, EditTexts, Layouts, Android SDK Manager For managing widgets Current File Used for changing properties Visual Editor Textual XML Editor 17

Android Virtual Device (AVD) An Android Virtual Device (AVD) is an emulator configuration that lets you model an actual device. It consists of : I. A hardware profile: e.g., whether the device has a camera II. A mapping to a system image: e.g. which Android version III. A dedicated storage area on your development machine: e.g. the device's user data IV.Other options: e.g. the emulator skin, appearance, and so on 18

select Window > AVD Manager, or click the AVD Manager icon in the Eclipse toolbar Click the + button to create a new AVD 19

Select a device from the preset list or create your own by clicking the New Hardware Profile Button. 20

Hardware Limitations Some computers limited hardware specs, and might struggle to emulate a device. If you are having issues starting a virtual machine try one of the following solution: Change any of the Device s Configurations (pencil icon): Change the Architecture of the emulated device from x86 to armeabi-v7. Disable Use Host GPU Reduce the amount of RAM available (Advanced Settings) 22

Installation (Eclipse + ADT) (For the sake of time these slides are skipped in class. If you would like to continue with the Eclipse framework, please follow this tutorial) If you are using Android studio, you can skip this step. 23

Installation Download and Install Eclipse Just keep pressing next/accept Add ADT Plugin to the repository list https://dl-ssl.google.com/android/eclipse/ Accept all prompts Configure ADT Install SDK or point to previously installed location Configure SDK Manager Install Necessary Versions (Suggested API 21+) 24

Install Eclipse 25

Add Android ADT to Eclipse 26

Install the Android SDK Tools 27

Creating a Project Eclipse + ADT 28

The First Simple App: Hello World! Select Android Application Project 29

will be seen in Android devices will be seen in Eclipse Package Explorer an unique name forever (the app s ID) 30

To add and modify your own icon To add the app s first screen (activity) 31

We can call this part of the wizard later to modify the app s icon Be sure your icon meets the specifications defined in the Iconography design guide. http://developer.android.com/design/style/iconography.html 32

Special types of activities which have minimum elements for their view (UI) 33

If you d like to have special activities so there should be necessary support in the system (minimum SDK version) 34

It s possible to specify the type of navigation for your activity (UI). The necessary elements will be added. If you d like to have special activities so there should be necessary support in the system (minimum SDK version) 35

All Java files include launcher activity and other libs The app s icon and other bitmaps files (categorized based of their dpi) Layout (physical structure) of activities will be put here. It s based on XML and supported by a visual editor All resources of the app (e.g. strings) should be registered in these sections (proper files). It helps memory management and localization. 36

Android Virtual Device manager Palette for Buttons, EditTexts, Layouts, For managing widgets Visual Editor Textual XML Editor Used for changing properties 37

Android Virtual Device (AVD) An Android Virtual Device (AVD) is an emulator configuration that lets you model an actual device. It consists of : I. A hardware profile: e.g., whether the device has a camera II. A mapping to a system image: e.g. which Android version III. A dedicated storage area on your development machine: e.g. the device's user data IV. Other options: e.g. the emulator skin, appearance, and so on 38

Managing AVDs with AVD Manager select Window > AVD Manager, or click the AVD Manager icon in the Eclipse toolbar Click New to create a new AVD 39

Managing AVDs with AVD Manager (cont.) Fill out the details for the AVD and click OK. Select AVD Name in the list and click Start (be patient because execution take time) 40

Emulator 41

User Interface Basic Concepts 42

What does android provide? Pre-build UI components such as structured layout objects and UI controls Other UI modules such as dialogs, notifications, and menus (action bars) A mechanism to declare elements (e.g. layouts) through either source code or an XML file Easy and quick to create and manage UIs Separation of logic from presentation Reusable can easily specify different layouts for different screen sizes (and densities, languages,...) Easy to understand 43

User Interface Elements Hierarchy invisible view containers invisible view containers usually a UI widget ViewGroups (Containers) are functional elements used to organize the UI. Views are themselves the objects displayed on screen, such as textboxes, buttons, etc. 44

Layouts defines the visual structure for a user interface Can be declared in either an XML file or source code (runtime) Common Layouts Linear Relative Web view ListView GridView 45

Input Controls Android provides lots of inputs controls. You can build you own custom components. Common input controls Button Text field Checkbox Radio button Toggle button Spinner Pickers 46

Second App Simple Calculator: Time to work! 47

Working with your UI The purpose of this task is to teach you to use the tools available. Your android application does not need to look exactly like the one in the example, but it needs to function as a calculator. To add a new object to your interface, drag the component from the Palette to the Component Tree. Never drag components to the preview, Always to Component Tree. If you drag a component to the android preview screen it will very likely mess the whole interface and make it harder for you to complete the task at hand Don t forget to show your TA the app when you are done. 48

Simple Calculator : Layout 1.Follow the steps in the first example and choose the name Simple Calculator for Application Name. 2.Remove TextView Hello World 3.Add a Layout (Vertical) under resultedit and assign Id mainlayout to it 4.Add an EditText to MainLayout and change its id to resultedit 1.Text Field >> PlainText is the standard EditText object. 2.To edit a property in an object you can double click it in the preview panel or in the properties table. 5.Change ResultEdit s layout:width property to fill_parent 1.This will make your textfield occupy the whole width of the screen (In Eclipse, use Outline environment for better managing of components) 49

Simple Calculator : Step 01 Result 50

Simple Calculator : Buttons 1.Add a HorizontalLayout to the VerticalLayout and name it ButtonsLayout01 1.Add four buttons to the HorizontalLayout you just created. 2.Rename Each buttons Id to the appropriate btn0x name 1. (e.g.: Button 1 will be called btn01 and the Equals button btneq ) At this point your buttons might look unbalanced, with the last ones added being flattened on the right side of the screen. That is because the other buttons are taking all the space available. To fix this do the following: 1.Change the property layout:weight in each button to 1. 1.Now all buttons should be allowed the same space on the screen regardless of the text in them. 51

Simple Calculator : More Buttons 1.Repeat the steps in the previous slide 3 times to create a 4 by 4 button matrix. You will notice that the next row of buttons also get flattened, but this time to the bottom. To solve this issue, give the The HorizontalLinearLayouts the same weight (layout:weight = 1) in the properties panel. 2. Add an extra button bellow the lowest HorizontalLinearLayout (this will be the Equals Button) 1. Set the layout:width to fill_parent. 3. To fill any vertical empty space between buttons set their layout:height property to fill_parent 53

Simple Calculator : Buttons Change the text of all buttons as you can see in the picture. Change the id of all buttons as following: The numbers id should be started with btn0 +its number. For example, for 1 button s id should be btn01, for 0 should be btn00, and so on. For others see the table to the side. Symbol ID "C" btnclear "." btndot "+" btnadd "-" btnminus "*" btnmultiply "/" btndivide "=" btnresult 55

Simple Calculator : Strings To separate strings from the layout code, follow these steps: 1. Select a button in component tree section and click on it. 2. Navigate to the Text property in the properties panel. 3. Select the text property and click the triple dots button. 4. Select New Resource and then New String Resource in the Resources Window. 5. Define a name for the new button name (e.g.: button_07), add the actual button value (e.g.: 7), save the new resource. 6. Repeat this process for all numbers and operands. 56

Simple Calculator (cont.) Add all onclick methods to MainActivity.java file. The methods signature should be as following: Public void <<methodname>>(view view) { } E.g. onclick method for btnresult is: Public void btnresultclick (View view) { } Don t forget to import android.view.view and android.widget.edittext Now copy the code in the slides below to match the description above in your.java file. 57

Simple Calculator (code section 1) 58

Simple Calculator : Input Events Each view has its own Events (e.g. ontouchevenet()) and must be override in order to have your own implementation. Instead of extending a view to have control events, use even lisetners An event listener is an interface in the View class that contains a single callback method. These methods will be called by the Android framework. onclick() onlongclick() onfocuschange() onkey() ontouch() oncreatecontextmenu() 63

Simple Calculator : Button Functions In order for your buttons to run the code in the java file they need to know what function they should call. To do so: Add onclick property to all buttons In the Design view Set onclick property in the Properties panel to the corresponding function name in the code. E.g.: the function btn01click() corresponds to button01, so the OnClick property should read btn01click. If you check the text version of the interface, you will see something similar to: android:onclick="btn01click This means that button01 has the correct onclick function assigned to is. Repeat this process for all numerical and operator buttons! 64

Android Lab 02 Advanced Android Features 65

Class Plan Activities Intents 66

How to Have Multiple Activity Create a simple project with name Multiple Activity Remove TextView Hello World Put a small button on the center of screen and name it btn1 Add the property OnClick to btn1 (like this android:onlick= btnclick ;) Add the text of btn1 as a resource value (with CTRL+1) Add method btnclick to MainActivity.java public void btnclick(view view){ } Import android.view.view; 67

How to Have Multiple Activity (cont.) 1.Right click on the project in Project Explorer 2.select New > Other 3.Select Android Activity form Android section and click Next 4.Choose Blank Activity and click Next 5.Fill out names as the picture 6.Accept pending changes and click finish 68

Intents Messaging Objects designed to request actions from other app components Intent use-cases To start an activity To start a service To deliver a broadcast Intent types Implicit Explicit 69

Intent (cont.) The primary information contained: Component name Action Data Category Extra Flags http://developer.android.com/guide/components/intents-filters.html 70

How to Have Multiple Activity (cont.) Add following code to method btnclick Intent intent = new Intent (this,settingactivity.class); startactivity(intent); import android.content.intent; Run the project as Android Application 71

How to update the app icon (Eclipse) 1.Right click on the project in Project Explorer 2.select New > Other 3.Select Android Icon Set form Android section Be sure your icon meets the specifications defined in the Iconography design guide. http://developer.android.com/design/style/iconography.html 72

How to change the icon of a created project (cont.) 73

Menus and Action Bar Beginning with Android 3.0 (API level 11), Android-powered devices are no longer required to provide a dedicated Menu button. Different kinds of menus Option menu and action bar (e.g. search, compose mail, settings, etc.) Context menu and contextual action mode It appears when the user performs a long-click on an element and provides actions that affect the selected content or context frame Popup menu Actions in a popup menu should not directly affect the corresponding content. Rather, the popup menu is for extended actions that relate to regions of content in your activity Menus and items are defined in an XML file 74

Menus and Action Bar (Cont.) Two ways to handle click events Override onoptionitemselected() Define the on-click behavior for a menu item in XML (Android 3.0 and higher) 75

Dialogs Dialogs prompt the user for decisions or additional information required by the app to continue a task. Different dialogs AlertDialog You can also add lists DatePickerDialog TimePickerDialog Custom Layout 76

Toasts Simple feedback about an operation in a small popup They automatically disappear after a timeout You can position the toast differently or even use your own layout instead of a simple text message. 77

Settings Allow users to modify app features and behaviors. For example, how often the application syncs data with the cloud. Allow to build an interface that's consistent with the user experience in other Android apps (including the system settings). 78

Interested in Learning more? Follow the Android Training Guide https://developer.android.com/training/index.html 80