SE 390: Software Engineering for Mobile Devices Week 3: Android Studio Copyright © Steven W. Johnson February 1, 2013.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

CE881: Mobile and Social Application Programming Simon M. Lucas Layouts.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Chapter 3: Engage! Android User Input, Variables, and Operations
All About Android Introduction to Android 1. Creating a New App “These aren’t the droids we’re looking for.” Obi-wan Kenobi 1. Bring up Eclipse. 2. Click.
Application Fundamentals. See: developer.android.com/guide/developing/building/index.html.
Filip Debelić What is it? Android is a mobile operating system (OS) based on the Linux kernel and currently developed by Google Android,
Who Am I And Why Am I Here I’m professor Stephen Fickas in CIS – you can call me Steve. I have a research group that works with mobile devices (since 1995!)
User Interface Android Applications. Activities An activity presents a visual user interface. Each activity is given a default window to draw in. The.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Creating Android user interfaces using layouts 1Android user interfaces using layouts.
Mobile Programming Lecture 1 Getting Started. Today's Agenda About the Eclipse IDE Hello, World! Project Android Project Structure Intro to Activities,
Introduction to Android Programming Content Basic environmental structure Building a simple app Debugging.
Android development the first app. Andoid vs iOS which is better? Short answer: neither Proponents on both sides For an iOS side, see this article on.
Introducing the Sudoku Example
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Modify Android Objects Using.
Android: versions Note that: Honeycomb (Android v3.0) A tablet-only release Jelly Bean (Android v4.1) Released on July 09, 2012.
CS5103 Software Engineering Lecture 08 Android Development II.
Web Technologies Website Development Trade & Industrial Education
Favorite Twitter® Searches App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
Chapter 2: Simplify! The Android User Interface
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
Tip Calculator App Building an Android App with Java © by Pearson Education, Inc. All Rights Reserved.
Chapter 5 Creating User Interfaces GOALS and OBJECTIVES Begin our application by creating our user interface. More than one way to create a user interface.
ANDROID – INTERFACE AND LAYOUT L. Grewe. Interfaces: Two Alternatives Code or XML  You have two ways you can create the interface(s) of your Application.
Understanding Hello Android 1 CS300. Activity  Similar to a form  Base class for the visual, interactive components of your application  Android API.
Basic Android Tutorial USF’s Association for Computing Machinery.
Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Chapter 2 The Android User Interface. Objectives  In this chapter, you learn to:  Develop a user interface using the TextView, ImageView, and Button.
INTRODUCTION TO ANDROID. Slide 2 Application Components An Android application is made of up one or more of the following components Activities We will.
Programming Mobile Applications with Android September, Albacete, Spain Jesus Martínez-Gómez.
Android Boot Camp for Developers Using Java, 3E
User Interfaces: Part 1 (View Groups and Layouts).
Application Development for mobile Devices
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 2: Simplify! The Android User Interface.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Introduction to Android (Part.
Creating an Example Android App in Android Studio Activity lifecycle & UI Resources.
ANDROID – DRAWING IMAGES – SIMPLE EXAMPLE IN INTERFACE AND EVENT HANDLING L. Grewe.
Android Using Menus Notes are based on: The Busy Coder's Guide to Android Development by Mark L. Murphy Copyright © CommonsWare, LLC. ISBN:
Copyright© Jeffrey Jongko, Ateneo de Manila University Deconstructing HelloWorld.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Web Site Development - Process of planning and creating a website.
CS378 - Mobile Computing User Interface Basics. User Interface Elements View – Control – ViewGroup Layout Widget (Compound Control) Many pre built Views.
Positioning Objects with CSS and Tables
ANDROID LAYOUTS AND WIDGETS. Slide 2 Introduction Parts of the Android screen Sizing widgets and fonts Layouts and their characteristics Buttons, checkboxes.
CMPE419 Mobile Application Development Asst.Prof.Dr.Ahmet Ünveren SPRING Computer Engineering Department Asst.Prof.Dr.Ahmet Ünveren
CMPE419 Mobile Application Development Asst.Prof.Dr.Ahmet Ünveren SPRING Computer Engineering Department Asst.Prof.Dr.Ahmet Ünveren
CMPE419 Mobile Application Development Asst.Prof.Dr.Ahmet Ünveren SPRING Computer Engineering Department Asst.Prof.Dr.Ahmet Ünveren
Chapter 2: Simplify! The Android User Interface
Lab7 – Appendix.
Mobile Software Development for Android - I397
Politeknik Elektronika Negeri Surabaya
CIS 470 Mobile App Development
Android Layout Basics Topics
Tutorial 6 Creating Dynamic Pages
CMPE419 Mobile Application Development
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
BMI Android Application will take weight and height from the users to calculate Body Mass Index (BMI) with the information, whether user is underweight,
CIS 470 Mobile App Development
CIS 470 Mobile App Development
Objects First with Java
CMPE419 Mobile Application Development
User Interface Screen Elements
CMPE419 Mobile Application Development
Android Sensor Programming
Presentation transcript:

SE 390: Software Engineering for Mobile Devices Week 3: Android Studio Copyright © Steven W. Johnson February 1, 2013

Mobile ecosystem What is Android? Page layout in Android Application icons Hints Android form elements Week 3: 2

Computers the size of a small house To computers in a cell phone Tomorrow: computers in your watch Computers in your glasses Miniaturization of devices (a career field?) Inspirational thought for the week 3

All things that make home computing work hardware software networking Desktop was/is revolutionary, but 20 years ago Main difference: desktop is a location mobile is an integration Desktop ecosystem 4

Ecosystem: living and non-living components of a complete, contained, self-balanced world Mobile ecosystem (ekosistem) 5

Mobile ecosystem: everything needed to make mobile system work Mobile ecosystem 6

Mobile ecosystem 7 Services Applications Application Frameworks Operating Systems Operators Platforms Devices Aggregators Networks Subscribers

Subscribers: people using the system how is it used? why is it used? how COULD it be used? what is the demand? what is the potential? Mobile ecosystem 8 Fling, B. (2009) Mobile Design and Development. O’Reilly

Operators: service providers or cell phone companies install, maintain cell towers; operate network your connection to the system act as oligopoly/regulated monopoly examples: Avea, TurkTelecom Mobile ecosystem 9 Fling, B. (2009) Mobile Design and Development. O’Reilly

Networks: Signals and standards Standards describe technology and device Each network: a menu of tools/features Mobile ecosystem 10 NetworkTechnologySpeed 2G NetworkGSM (12.2 KB/sec)GPRS (60 KB/sec) 3G NetworkUMTS (3.6 MB/sec)HSDPA (14.4 MB/sec)

Aggregators: content gatherers/providers gather content/tools into single interface data is frequently updated Yahoo and MSN are aggregators? news, traffic, weather Mobile ecosystem 11 Fling, B. (2009) Mobile Design and Development. O’Reilly

Mobile devices: mobile is battery-powered power consumption is critical Mobile ecosystem 12

Mobile ecosystem 13 Devices: >50% smartphone in developed markets <20% in emerging markets

Devices: “phones” a.k.a. handsets and terminals devices typically subsidized with plan device choice = operator choice devices and browsers; both fragmented fragmented: many choices, broken into pieces Mobile ecosystem 14 Fling, B. (2009) Mobile Design and Development. O’Reilly

Mobile ecosystem 15 Platforms:

Mobile ecosystem 16 Platforms:

Founded (2003) by: Andy Rubin (Danger) Rich Miner (Wildfire Communications) Nick Sears (T-Mobile) Chris White (WebTV) What is Android? 17

What is Android? iPhone 1999

Linux-based operating system (Linux OS 2.60) Development platform (SDK) for mobile devices Original: OS for touch screen devices (phones) Bought out by Google in 2005 (due to iPhone?) Android was and is open source Major OS for handheld devices Distributed 2007 Devices sold with Android: 2008 What is Android? 19

Bigger than mobile Also has applications for: television game consoles digital cameras What is Android? 20

Part of Open Handset Alliance Made up of 84 companies Formed in 2007 (Google + 34 others) Companies from: hardware software telecommunications allows ‘everyone else’ to compete with Apple same thing with PCs in the 1990s What is Android? 21

System architecture of Android: What is Android? 22 Burnette, E. (2010). Hello, Android: Introducing Google’s Mobile Development Program. Pragmatic Bookshelf: Dallas, TX, USA.

Written using Java (or C, C++) and XML Generated in IDEs such as Eclipse Compiled to.dex by Android API Translated to bytecode by ART (v5.0) What is Android? 23 Java Eclipse ART Linux Android SDK Android Studio

Launch an Android app: Creates a process (CPU: memory, processing) DVM launched in process What is Android? 24

.apk used to distribute, install application: all application code (in DVM.dex file) media resources/assets AndroidManifest.xml maximum file size: 50MB similar to a.jar (Java Archive) file for Java (zipped) can be run without unzipping What is Android? 25

Why use Dalvik VM? more efficient (low memory usage) acts as a sandbox (Linux and Java) limits crashes to the Dalvik VM What is Android? 26

HTML written declaratively (scripted) C is written procedurally (described in code) JavaScript is written functionally Android written procedurally or declaratively Better choice: declarative What is Android? 27

File organization based in Java project Consistent location for all files What is Android? 28

Packages: guarantees file name/pathway uniqueness generates unique name at Google Play can be compressed into.jar files package name is reverse domain name What is Android? 29 App_name from steve.com com.steve.app_name

Four main files in construction: AndroidManifest.xml (manager, we don’t use) ‘Sourcecode’.java class (where logic goes) ‘screen’.xml (describes appearance of the app) build.gradle (compilation instructions) strings.xml (text displayed on page) styles.xml (like.css) colors.xml (defines colors) What is Android? 30

Many similarities with HTML: Renders to screen differently What is Android? 31 ‘off-screen bitmaps’

Applications: made up of activity class(es) each activity has its own lifecycle application has a Linux process Difference: activity lifecycle != process lifecycle What is Android? 32

Each project has: mainfest.xml Sourcecode.java ‘res’ folder holds resources images screen.xml values: colors.xml strings.xml 33 What is Android?

Images go in /res/drawable folder Image types:.png (preferred).jpg Images called by file name only Image file names: numbers, lower case letters File called by name only; not extension 34 What is Android?

The values folder holds xml files defining styles colors.xml dimens.xml arrays.xml strings.xml styles.xml 35 - HelloSteve Settings Hello world! What is Android?

Many ‘values’ folders in resources (‘res’) folder Values folder for each size range Sizing information for that device 36 What is Android?

Resolution management by ‘alternate resources’ Resource size determined by resolution of device Decouple content from its size 37 Quick Brown Fox unsized text ‘strings.xml’ device with a resolution Apply a size values folder ‘dimens.xml’ Low: 1.3em Normal: 1.1em High: 0.9em What is Android?

Jobs of different file types: Java is the code/compiler/manager xml holds the content, presentation xml files like media queries Goal: update xml, never the.java code.java free of anything but logic 38 What is Android?

Create new project ‘Basic Page’ (File – New Project) 39 Lab: basic page

Set a minimum API/SDK: there is no correct answer; better answers API 8 gets 100% of current market API 8 has very limited features API 11 more fully-featured and 87.9% use consider needed features; work to minimum 40 Lab: basic page

Versions and API Numbers (big is important) 41 Lab: basic page Android Version API

Include your name in all titles from now on 42 Lab: basic page

Project is built; add ‘basicpage’ logo Rt. Click on ‘res’ folder – New – Image Asset 43 Lab: basic page

Add padding, change shape, add background 44 Lab: basic page

45 Lab: basic page

Add controls to the app: ‘Plain TextView’ ‘Large Text’ ‘Medium Text’ ‘Button’ ‘Small Button’ When done: 5 textView and 2 button Relative layout, controls placed anywhere 46 Lab: basic page

47 Lab: basic page

48 Lab: basic page Open ‘Text’

49 Lab: basic page Each control has unique id (except second textView) Fix id on second textView1 A TextView has an id of ‘textView’ (add if not present) Width determined by dip or: “wrap_content”: width based on content “fill_parent”: before API 8; make width: 100% “match_parent”: preferred

Lab: basic page Define strings for the controls Open ‘strings.xml’ (values folder), create 6 strings Basic Page Hello world! Text for first TextView Big Text here Small Text Here More Text Button Text Small Button with Big Text Settings

Lab: basic page Update the controls by adding the strings Double-click on control, update and ‘Enter’ 51

Lab: basic page Update the controls by adding the strings Double-click on control, update and ‘Enter’ 52

Lab: basic page Colors handled similar to HTML Colors defined using: #RGB #ARGB #RRGGBB #AARRGGBB 53 PropertyHTMLAndroid/.xmlJava Text colorcolorandroid:textColor.setTextColor() Background colorbackgroundandroid:background.setBackgroundColor()

Lab: basic page Create ‘colors.xml’ in ‘values’ folder (New – File) 54

Lab: basic page Create four colors (your choice) 55 #ffff99 #99ff99 #3333ff #f3f3f3

Lab: basic page Apply the colors to your app 56

Lab: basic page Manually add properties to controls 57 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"

Lab: basic page Modify a color on each control added 58 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"

Lab: basic page Text size is controlled by ‘textSize’ (font-size) Define the size in ‘dimens.xml’ using dip 160dp to an inch 24dp 59

Lab: basic page Open ‘dimens.xml’ Add a dimension named ‘fontsize’ that is 24dp 60 16dp 24dp

Lab: basic page Change the fontSize for each TextView Select textView in ‘Component Tree’ Browse in textSize in ‘Properties’ (bottom) 61

Lab: basic page Change second button width to ‘match_parent’ 62

Lab: basic page Change the button width to ‘match_parent’ 63

Break 64

Description of page’s structure Decouples presentation from business logic Allows layout to adapt to different hardware Layouts 65 The quick brown fox screen.xml

‘screen.xml’ holds the layout setContentView uses layout to organize page Layouts 66 screen.xml protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen);

Layout describes how elements are added Roughly like ‘ ’ or ‘ ’ in HTML Layout used is defined in /res/layout linear relative table grid view tab list view Layouts 67

No layout: elements stack on top of each other Layouts 68

Relative: in relation to another element; parent element Layouts 69

Relative: place anywhere on the page no restrictions Layouts 70 text1 text2 text3 text4 Text2: android:layout_marginTop="17dp" Text3: android:layout_marginTop="17dp" Text4: android:layout_marginLeft=“51dp"

Linear: laid out in a single row or column (not both) Layouts 71 <LinearLayout android:orientation="vertical" > main.xml

Layouts 72 <LinearLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout Click me No, click me

Table: like an HTML table create “td” elements each ‘td’ has row/column created in matrix Layouts 73 </TableLayout

Layouts: 74 <TableRow //2 columns android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" > <TextView android:text="Column 1" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:text="Column 2" /> <TableRow //1 column android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="5dp" > <EditText android:layout_span="2" android:text="Column 1 & 2" />

75 <TableRow android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="center_horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="18dp" android:text="Row 1" android:layout_span="3" android:padding="18dip" android:background="#b0b0b0" android:textColor="#000"/> /TableRow> !-- Row 2 with 3 columns --> TableRow android:layout_height="wrap_content" android:layout_width="match_parent"> <TextView android:text="Row 2 column 1" android:layout_weight="1" android:background="#dcdcdc" android:textColor="#000000" android:padding="20dip" android:gravity="center"/> <TextView android:text="Row 2 column 2" android:layout_weight="1" android:background="#d3d3d3" android:textColor="#000000" android:padding="20dip" android:gravity="center"/> <TextView android:text="Row 2 column 3" android:layout_weight="1" android:background="#cac9c9" android:textColor="#000000" android:padding="20dip" android:gravity="center"/> in HTML

Layouts can be nested in other layouts Layouts 76

Goal: choose layout that’s most effective: ease of writing code simpler to understand avoid nesting elements amount of code required processing time of code written Default layout is relative Layouts 77

Application icons 78 icon logo

Two types of application image identifier: icon logo Icon are square; used in app menu Logo may be rectangular, used on Action bar Purpose: ‘brand’ your app Logos discouraged after Holo Application icons 79

API 11 is first API to support logos API 21 does not support logos (discouraged) Reason: title or logo, not both (wasteful) Current API in Studio: 21 only Application icons 80

APIs installed so far (only 21) Application icons 81

Similar in concept to a favicon in HTML Saved in.png file type (24-bit with alpha channel) Made in Photoshop/Fireworks Can be any size; should be square Make one icon and import Android will scale the image for the device Application icons 82

Good icons: square in shape works on white and black background limited colors not finely-detailed as descriptive as possible Application icons 83

Image folders for different resolutions Application icon created for all but ldpi Target sizes: ldpi: low dots per inch (32 x 32px) mdpi: normal dots per inch (48 x 48px) hdpi: high dots per inch (72 x 72px) xhdpi: (96 x 96px) xxhdpi: (144 x 144px) Application icons 84

The sizes: Application icons: px96px72px48px32px

Goal: use linear layout to display data Create new Project ‘FourSehir’ Lab: foursehir 86

Lab: foursehir 87

Lab: foursehir 88 Action Bar Navigation Bar TextView EditText Button ImageView Activity ViewGroup Views Status Bar

Window: single surface (full activity, or dialog) has one view hierarchy Surface: holds pixels to be seen on the screen has a z-ordering View: (also called ‘controls’) UI element Lab: foursehir 89

Lab: foursehir 90 Activity Window (draws user interface) Surface View hierarchy ViewGroup Views

View hierarchy: Lab: foursehir 91 Romain Guy and Chet Haase (Google), “Android Graphics and Animations”

Layouts: relative: ‘place anywhere’ linear: horizontal or vertical table: like an HTML table (horizontal and vertical) 92 Lab: foursehir

Add ‘foursehir’ icon ‘res’ folder: New – Image Asset Browse in ‘foursehir.png’ from folder 93 Lab: foursehir

Layout by default is ‘Relative’ Go to ‘Text’ Screen and overtype to fix Add ‘android: orientation=“vertical” 94 Lab: foursehir <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".Sourcecode"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".Sourcecode"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" />

Linear layout: one item per ‘row’ Placement: left, center, right Give the layout an id: 95 Lab: foursehir

Create TextViews by: add 3 Plain TextView using the Palette 96 Lab: foursehir

Create TextViews by: create ids from Text1-Text4 97 Lab: foursehir

98 <LinearLayout xmlns:android=" … tools:context=".Sourcecode" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text ="New Text" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text ="New Text" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text ="New Text" /> Lab: foursehir No relative position stated (none needed)

Define four different city names in ‘strings.xml’ 99 Foursehir Settings Alsancak Balcova Karsiyaka Konak Lab: foursehir

100 Lab: foursehir Update string definition in ‘screen.xml’ Double-click on control: add name of string Save and check in emulator

SE 390: Software Engineering for Mobile Devices Week 3: Android Studio Copyright © Steven W. Johnson February 1, 2013

Similar to a text field in HTML5 HTML5: several ‘types’ of inputs Same true for android, but control defines Appearance is a bit different from HTML5 EditTexts 102

EditText code similar to other controls Difference: inputType Ems: character width of the control Width, height control size exterior size EditTexts 103 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="text Address" android:ems="10" />

Hint: describes what to place in input field Same as placeholder in HTML5 Text of hint: a string Use of hints: remove labels to save space Color of hint is gray Color changed with ‘textColorHint’ Hints 104 Your Name android:textColorHint="#FFFFCCCC" android:hint="Enter your name here"

Click meNo, click me Button is added to page in ‘screen.xml’ Similar in concept to an HTML button Programmed on the ‘Sourcecode.java’ page Known by unique id 105 Buttons <Button android:layout_width="wrap_content" android:layout_height="wrap_content" />

Width/height: use values constrain using layout element size: match_parent (stretch to fill outside element) wrap_content (shrink to fit inside content) 106 Click me Buttons <Button android:layout_width="wrap_content" android:layout_height="wrap_content" />

107 Background colors <LinearLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" Add background color to layout for ‘page’ Color defined in ‘colors.xml’ Use ‘android:background’ to apply

Sourcecode.java: holds java function(s) that run the site like ‘js’ file or source code in C separation of concerns: logic Form elements and Java: 108

HTML versus Java: HTML: text fields loosely typed Java: EditTexts are strictly typed Android forms require more defining Form elements and Java: 109

HTML text fields hold text Can use type=“number” as input mask Can insert a number into an Android/Java: text fields hold text; exclusively cannot place a number in a text field text fields serve as input masks Form elements and Java: 110

In HTML, form tags are: Android: very similar in concept to HTML (text itself) (“text field”) (fully programmable) Form elements and Java: 111

HTML: uses event listeners to manage events Android: same in Java; format is slightly different Form elements and Java: 112

Button: id is “name” of the button “text” defines text on button must be programmed to be clickable Form elements and Java: 113 <Button style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" />

Create a form with Java: Lab: EditText 114

Create a form with a button Use different types of EditText Add Hints Use Java to update data ‘onclick’ of a button Lab: EditText 115

Create new Project Lab: EditText 116

Add ‘edittext.png’ as the icon Right-click on ‘res’ – New – Image Asset Browse in file; modify as desired Lab: EditText 117

Change layout to Linear-vertical Remove the ‘hello world!’ TextView Lab: EditText 118

Create ‘colors.xml’ and define background Apply background color to page Right-click on ‘values’ and add ‘colors.xml’ Define color for background Lab: EditText 119

Apply background color to page Lab: EditText 120

Plan B: don’t use ‘colors.xml’ but ‘resources.xml’ Many ways to get the job done Lab: EditText 121

Add 4 EditTexts Name (with hint) (with hint) Age (with hint) Date Lab: EditText

EditTexts: inputType match_parent text ems ids Lab: EditText 123 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:text="Name" android:ems="10" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="text Address" android:ems="10" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="number" android:ems="10" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="date" android:ems="10" />

Fix the EditTexts: add strings for the hints Open ‘strings.xml’ Lab: EditText 124

Appearance of EditText controlled by theme border color background color margins (outside spacing) Lab: EditText 125

Open ‘dimens.xml’ Lab: EditText 126

Fix the EditTexts: set background to white (pre-defined color) change the id add hints as appropriate set bottom margin Lab: EditText 127

Lab: EditText

129 Repeat for , age, and date Use these ids: field Agefield Datefield

Lab: EditText 130 Repeat for , age, and date Use these ids: field Agefield Datefield

Button (Click Me) Two empty EditTexts: name, age Button needs a string Lab: EditText 131

Add the button Lab: EditText 132

Two empty EditTexts: name, age Lab: EditText 133

EditTexts have a bottom margin id for programming Lab: EditText 134

Save and run in emulator Test your EditTexts to see how they work Age and Date fields will not accept text Lab: EditText 135

An update: set focus on initial field In this app, focus automatically sets Request focus in ‘screen.xml’: In ‘Sourcecode.java’ Lab: EditText 136 <EditText > Namefield.requestFocus();

EditText for name: Lab: EditText 137 <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:ems="10" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:ems="10" >

Open ‘Sourcecode.java’ File calls the package for this project holds imports at top Holds a class ‘Sourcecode’, holds three methods Lab: EditText 138

Added imports shorten names for controls ‘android.widget.Button’ can now be ‘Button’ Need an import for each control added Come in grayed out (unused); that will change Lab: EditText 139 import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView;

Sourcecode.java: ‘Sourcecode’ is class name; file name Activity is the page (in Manifest) ‘screen’ is the file name of the page “use ‘screen.xml’ to make this activity” Lab: EditText 140 public class Sourcecode extends ActionBarActivity protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); }

Sourcecode.java: Give data types/names to form objects Lab: EditText protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); final EditText Namefield = (EditText) findViewById(R.id.Namefield); final EditText Agefield = (EditText) findViewById(R.id.Agefield); final TextView TheName = (TextView) findViewById(R.id.TheName); final TextView TheAge = (TextView) findViewById(R.id.TheAge); final Button button = (Button) findViewById(R.id.button); }

Sourcecode.java: assign variable ‘Namefield’ to represent textfield ‘Namefield’ Lab: EditText 142 final EditText Namefield = (EditText) findViewById(R.id.Namefield);

Sourcecode.java: Lab: EditText 143 final EditText Namefield = (EditText) findViewById(R.id.Namefield); final TextView TheName = (TextView) findViewById(R.id.TheName); final Button button = (Button) findViewById(R.id.button); Name of resource Casting (coming from) variable name cannot be changed data type get the data from datatype variable = datatype document.getElementById(“object”);

Sourcecode.java: Inside the ‘onCreate’ method Java onClick listener: what to do when button pressed Lab: EditText 144 button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { String NameValue = Namefield.getText().toString(); String AgeValue = Agefield.getText().toString(); TheName.setText(NameValue); TheAge.setText(AgeValue); } });

Sourcecode.java: ‘onclick’ sequence Lab: EditText 145 button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { String NameValue = Namefield.getText().toString(); TheName.setText(NameValue); } }); } get the data from this variable turn it into a string display variable In this area document.getElementById(‘TheName’).innerHTML = NameValue;

‘onCreate’ method when done: Lab: EditText protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.screen); EditText Namefield = (EditText) findViewById(R.id.Namefield); EditText Agefield = (EditText) findViewById(R.id.Agefield); TextView TheName = (TextView) findViewById(R.id.TheName); TextView TheAge = (TextView) findViewById(R.id.TheAge); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new Button.OnClickListener() { public void onClick(View v) { String NameValue = Namefield.getText().toString(); String AgeValue = Agefield.getText().toString(); TheName.setText(NameValue); TheAge.setText(AgeValue); } }); }

The same idea in JavaScript: Lab: EditText 147 function swap(value) { document.getElementById(“receive”).value = value; } id=“send” id=“receive” Steve

Sourcecode.java: unneeded code Lab: EditText 148 import android.view.Menu; import public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_sourcecode, menu); return true; public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); }

Done! Save and run Lab: EditText 149

Break 150

1. Colors.xml, styles.xml, and dimens.xml all hold: A.Structural information B.Presentation information C.Logical (programming) information Quiz: 151

2. Strings.xml holds: A.Structural information B.Presentation information C.Logical (programming) information Quiz: 152

3. An application icon: A.Is defined once and Android scales the image for its use B.Must be either 32, 48, 72, 96, or 144 pixels square C.Must have a clear background D.May be any shape E.Should be a square shape F.Will be known as “icon.png” G.Will be known as “ic_launcher” Quiz: 153

4. An absolute layout: A.Is like a CSS absolute layout, everything is put in a defined place B.Requires the use of horizontal or vertical layout, and the ‘next’ item goes in the ‘next’ place C.Requires that all elements are placed in a grid/matrix D.Requires that all elements are either horizontally or vertically aligned to something Quiz: 154

5. Inputs or text fields in HTML are called this in Android: A.Input B.Text Field C.EditText D.Field E.Entry Box Quiz: 155

6. Any form widgets that are used in an application must also have: A.A value B.A color C.A matching ‘import’ in the.java file D.Begin with “$” Quiz: 156

7. Devices and mobile operators: A.Devices and operators are always separate issues with no connection B.Operators may subsidize a device, choosing a device may also select the operator C.Devices are always manufactured by the operators and must be matched to work D.Devices may use proprietary software linking to an operator Quiz: 157

8. Feature phones are found mainly in: A.Developed markets B.Emerging markets C.Technologically advanced markets D.Markets that are highly socialized Quiz: 158

9. Browsers in mobile devices usually use this rendering engine: A.Trident B.SquirrelMonkey C.WebKit D.Presto Quiz: 159

10. Android’s system is based in: A.Using the fastest, most efficient programming language B.Removing all presentation information from the programming language C.Using only open source systems D.Writing an application that runs most efficiently Quiz: 160

Quiz: 161 Action Bar Navigation Bar TextView EditText Button ImageView Status Bar view What are their names?

Package must include your full name Create the form First EditText is requestFocus Add the inputs ‘onSubmit’ Watch your data types!!!! You may use any number data type Assignment: Add three numbers 162 package com.steve.johnson.AddThreeNumbers;

Package must include your full name Assignment: Add three numbers 163

Input types: data types for the EditTexts Assignment: Add three numbers 164 Integer Float

Getting numbers out of “textboxes” ‘one’ describes the box name/id Assignment: Add three numbers 165 Android: Float value = Float.parseFloat(one.getText().toString()); JavaScript: value = parseFloat(document.getElementById(“one”).value);

Inserting calculated values into “textboxes” ‘one’ describes the box name/id Assignment: Add three numbers 166 String ans = sum.toString();//cast ‘sum’ as a string textfield.setText(ans);//print string to textfield Float sum = ; String ans = sum.toString(); //case ‘sum’ as a string textfield.setText(String.valueOf(ans));//casts non-string as string.setText.getText 45

First number red Second number green Third number blue Answer: black Add a background color to page and use alpha Each EditText has white background Find/use a unique icon Assignment: Add three numbers 167

Assignment: Add three numbers 168

SE 390: Software Engineering for Mobile Devices Week 3: Android Studio Copyright © Steven W. Johnson February 1, 2013