Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
Faculty of Engineering | Faculté de Génie
uOttawa.ca
Developing Android Applications
SEG2105 - Introduction to Software Engineering – Fall 2016
Presented by: Felipe M. Modesto – TA & PhD Candidate
ANDROID LAB 1
Introduction to Android
Class Assignment: Simple Android Calculator
uottawa.ca
Class Plan
• Introduction
• Android Studio
– Installation Guide
– Project Setup
– Android Simulation Setup
– Interface Setup
• Basic Concepts
• Lab Assignment: Calculator
INTRODUCTION
What’s Android
• The world's most popular mobile platform
• Powerful development framework
• Android Developer Tools offer a full Java IDE withadvanced features for developing, debugging, andpackaging Android apps
• Open marketplace for distributing your apps
– One time 25$ developer registration fee
Android
Ice Cream Sandwich Jelly Bean KitKat Lollipop Marshmallow Nougat
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
6.0
API LVL 23API LVL 24
Major Minor ”Major” Major “Major” “Major”
Each version of Android introduces new features. Some focus on smaller architecture changes and feature
inclusion, optimizations and bugfixes while others greatly update the operating system architecture.
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
• Android Studio (IntelliJ IDEA)
• Command-Line Tools (Debug/Emulation)
How does Android Work?
• Android runs on top of the Linux Kernel
• Android Applications are sandboxed within Virtual Machines
• Since Kitkat (4.4) the Runtime Environment for Android started using ART (Android RunTime), previously using Dalvik.
• Android Applications are based on Activities
– Activities should represent ”things” you can do, like a screen or another functionality (e.g.: Search)
– Applications usually have multiple Activities
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 numberseven times. Return to the previous screen to find Developer options.
CREATING A PROJECT
Android Studio
Installation
• Lab Computers already have Android Studio Installed
• Download and Install Android Studio
– Just keep pressing next/accept
• Select your UI
• Update the tools
Installation
Caveats
• Certain Computers do not cope well with Android Studio:
– Windows Surface Pro: General Interface Limitations
– QHD & 4K Monitors: UI Scaling Issues can happen
• Certain Computers will LAG when running android emulation:
– AMD CPUs: No Intel Hardware Acceleration
– Tablet PCs: Limited Processing – Slow Emulation
– We’ll present alternate Android Emulator platforms later
A First Simple App: “Hello World!”
Select “Start New A.S.
Project”
Package name displayed on Google Play
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, but help with structure.
The package name is produced from Application Name and Company Domain.
You can edit the Package Name if necessary
Project SDK Version
Use API LVL 15 during the tutorial.
After learning the ropes, you can develop andpublish apps for multiple variations of the
Android OS.
Activity Template
Special types of activities which have
minimum elements for their view (UI)
Select “EMPTYActivity” 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)
You can configure the naming scheme ofyour 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/cod
econventions-135099.html
Textual XML EditorVisual Editor
Used for changing properties
For managing widgets
Android Virtual Device manager Palette for Buttons, EditTexts,
Layouts, …
Current File
Android SDK Manager
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
select Window > AVD
Manager, or click the AVD Manager icon in the Eclipse toolbar
Click the “+” button to
create a new AVD
Select a device from the preset list
or create your own by clicking the “New Hardware Profile” Button.
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
Managing AVDs with AVD Manager (cont.)
• Fill out the details for the AVD
and click OK.
• Emulated devices with more
powerful specs will require more processing power!
• Select AVD Name in the list and click Start
• (be patient because execution take time)
Hardware Limitations
Some computers limited hardware specs, and might struggleto emulate other processor architectures. If you are havingissues starting a virtual machine try one of the followingsolution:
Change any of the Device’s Configurations (pencil icon):
• Change the Architecture of the emulated device to x86or armeabi-v7, x86 should perform better on Intel devices.
• Disable “Use Host GPU”, integrated GPUs perform poorly.• Reduce the amount of RAM on emulated device
(Advanced Settings)
Android Emulator
Notes
• Alternate Android Emulators:
– Bluestacks
– Genymotion
– Nox
– MEmu
• Be aware of Intel HAXM acceleration requirements when running x86 devices
• A Google Nexus 4 will be available during class for device deployment.
USER INTERFACE
Basic Concepts
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
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.
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
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
LAB ASSIGNMENT
Simple Calculator: Time to work!
Working with your UI
• The purpose of this task is to teachyou to use the tools available.
• Your android application does not needto look exactly like the one in theexample, but it needs to function as acalculator.
• To add a new object to your interface,drag the component from the Paletteto the Component Tree.
– Never drag components to thepreview, Always to Component Tree.
• If you drag a component to theandroid preview screen it will verylikely mess the whole interface andmake it harder for you to completethe task at hand.
• Don’t forget to show your TA theapp when you are done.
Simple Calculator : Layout
1. Follow the steps in the first example to create an application. Name your application ”Simple Calculator”.
2. Remove TextView “Hello World” (if your layout is not empty)
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_parent1. This will make your textfield occupy the whole width of the screen
(In Eclipse, use Outline environment for better managing of components)
Simple Calculator : Step 01 Result
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.
Simple Calculator : Step 02 Result
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”
Simple Calculator : Step 03 Result
Your final design does not have to match the example exactly solong as you include all basic functions.
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
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.
Simple Calculator (cont.)
• Add all onClick methods to MainActivity.java file.
• The methods’ signature should be as following:Public void <<methodName>>(View view) {
<YOUR CODE GOES HERE>>}
• E.g. onClick method for btnResult is:Public void btnResultClick (View view) {
<YOUR CODE GOES HERE>
}
• Don’t forget to import “android.view.View” and “android.widget.EditText” as well as other necessary classes.
• Now write code for each button to your ACTIVITY JAVA FILE!– The next slides have samples as to how your code should look.
Simple Calculator (code section 1)
This portion of the code is
generated automatically for
all activities and contains
the basic constructor code.
These variables were added by us.
Simple Calculator (code section 2)
Simple Calculator (code section 3)
Simple Calculator (code section 4)
Simple Calculator (code section 5)
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 asingle callback method. These methods will be called by theAndroid framework. onClick() onLongClick() onFocusChange() onKey() onTouch() onCreateContextMenu()
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!
HELP! My code isn’t working
• Squigly lines means your expression can’t compile.
• 9 out of 10 times, there is a TYPO in the code.– onClick() is different from onclick()– button01 is different from Button01 and button_01
• Remember to include the libraries you are calling!– Text in RED means that Android Studio doesn’t know what
class you want, probably because a missing include.– Alt+Enter on missing dependencies auto-imports the class it
thinks you need.
• Yellow and Red lamps give you tips about what to do.
Improving your code
• Previously, each button had it’s own function code, but it might be interesting to reduce the number of redundant functions. This can be done by assigning the same function to multiple buttons.
• To cope with this change, all you need to do is check which button was pressed from within the onClickfunction.
• View.getID() returns the integer number that represents the item, which can be matched to an ID value in the ID resource list.