Tip Calculator App Building an Android App with Java ©1992-2013 by Pearson Education, Inc. All Rights Reserved.

Slides:



Advertisements
Similar presentations
Android OS : Core Concepts Dr. Jeyakesavan Veerasamy Sr. Lecturer University of Texas at Dallas
Advertisements

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.
Filip Debelić What is it? Android is a mobile operating system (OS) based on the Linux kernel and currently developed by Google Android,
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
More on User Interface Android Applications. Layouts Linear Layout Relative Layout Table Layout Grid View Tab Layout List View.
10.1 AWT The AWT classes Users today expect a Graphical User Interface (GUI) Improves application usability Difficult to implement cross-platform.
CS378 - Mobile Computing User Interface Basics MIKE!! LOOK HERE FOR intercepting the ListView items:
Android Application Development 2013 PClassic Chris Murphy 1.
Android Development: Application Layout Richard S. Stansbury 2015.
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.
Java Programming Chapter 10 Graphical User Interfaces.
CS5103 Software Engineering Lecture 08 Android Development II.
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Introduction to Android (Part.
© Keren Kalif Intro to Android Development Written by Keren Kalif, Edited by Liron Blecher Contains slides from Google I/O presentation.
Favorite Twitter® Searches App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
Chapter 2: Simplify! The Android User Interface
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Introducing Web Controls Outline 29.1 Analyzing the.
Java Programming, 3e Concepts and Techniques Chapter 3 Section 65 – Manipulating Data Using Methods – Java Applet.
Understanding Hello Android 1 CS300. Activity  Similar to a form  Base class for the visual, interactive components of your application  Android API.
DUE Hello World on the Android Platform.
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout.
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Using Android XML Resources.
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.
Engage! Android User Input, Variables,
SpotOn Game App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
Chapter 8 Collecting Data with Forms. Chapter 8 Lessons Introduction 1.Plan and create a form 2.Edit and format a form 3.Work with form objects 4.Test.
Android Boot Camp for Developers Using Java, 3E
User Interfaces: Part 1 (View Groups and Layouts).
Application Development for mobile Devices
Configuring Android Development Environment Nilesh Singh.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 2: Simplify! The Android User Interface.
 2002 Prentice Hall, Inc. All rights reserved Introduction Graphical User Interface (GUI) –Gives program distinctive “look” and “feel” –Provides.
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Introduction to Android (Part.
© 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.
5-1 More UI CSNB544 Mobile Application Development Thanks to Utexas Austin.
WaveMaker Visual AJAX Studio 4.0 Training Basics: Building Your First Application Binding Basics.
1 Chapter Nine Using GUI Objects and the Visual Studio IDE.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
Visual C# 2012 How to Program © by Pearson Education, Inc. All Rights Reserved.
Copyright © 2010 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Starting Out with Programming Logic & Design Second Edition by Tony Gaddis.
Intro to Applets. Applet Applets run within the Web browser environment Applets bring dynamic interaction and live animation to an otherwise static HTML.
© 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.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 2 – Welcome Application Introduction to Graphical.
1 Android Development Lean and mean introduction Based on a presentation by Mihail L. Sichitiu.
CS378 - Mobile Computing User Interface Basics. User Interface Elements View – Control – ViewGroup Layout Widget (Compound Control) Many pre built Views.
Building User Interfaces Basic Applications
CS378 - Mobile Computing More UI. UI Review Containers – more formally ViewGroups – store widgets and other containers – examples: LinearLayout, RelativeLayout,
Chapter 2 Building User Interfaces and Basic Applications.
Java How to Program, 10/e © Copyright by Pearson Education, Inc. All Rights Reserved.
 2002 Prentice Hall. All rights reserved. 1 Introduction to the Visual Studio.NET IDE Outline Introduction Visual Studio.NET Integrated Development Environment.
ANDROID LAYOUTS AND WIDGETS. Slide 2 Introduction Parts of the Android screen Sizing widgets and fonts Layouts and their characteristics Buttons, checkboxes.
Editing a Twitter search. Viewing search results in a browser.
Dive Into® Visual Basic 2010 Express
Chapter 2: Simplify! The Android User Interface
Java FX: Scene Builder.
Activities and Intents
Mobile Application Development Chapter 4 [Android Navigation and Interface Design] IT448-Fall 2017 IT448- Fall2017.
Chap 7. Building Java Graphical User Interfaces
Graphical User Interfaces -- Introduction
Mobile Computing With Android ACST 4550 Android Layouts
Adding Functionality to the App Tip Calculator App Activity and the Activity Lifecycle onCreate is called by the system when an Activity.
Building User Interfaces Basic Applications
UI Elements 2.
Presentation transcript:

Tip Calculator App Building an Android App with Java © by Pearson Education, Inc. All Rights Reserved.

Test driving the Tip Calculator App © by Pearson Education, Inc. All Rights Reserved.

Technologies Overview This chapter uses many Java OO programming capabilities ▫ Classes ▫ Anonymous inner classes ▫ Objects ▫ Methods ▫ Interfaces ▫ Inheritance We’ll create a subclass of Activity class to programmatically define the logic Programmatically interact with EditText, TextView and SeekBar We’ll use event handing and anonymous inner classes to process GUI’s interactions © by Pearson Education, Inc. All Rights Reserved.

Building the App’s GUI We’re using TableLayout to arrange GUI components ▫ 6 rows, 4 columns ▫ Each cell can be empty or hold one component – which can be a layout to contain other components ▫ A component can span multiple columns (SeekBar) ▫ A row’s height is determined by tallest component  Similarly column’s width by widest component or wider ▫ By default, components added to a row left to right ▫ Can specify exact location – rows, columns start at 0 by default © by Pearson Education, Inc. All Rights Reserved.

Layout © by Pearson Education, Inc. All Rights Reserved.

Names of GUI components in this app © by Pearson Education, Inc. All Rights Reserved.

TableLayout and Components Start with basic layout and controls Customize control’s properties As you add components ▫ Set the ID property ▫ Set the Text property Literal string values should be placed in the strings.xml file in the app’s res/values folder, esp. if you intent to localize app for multiple languages ▫ Author chose not to use string resources for % TextViews Build in exact order specified ▫ If you don’t, you can rearrange in Outline or in main.xml © by Pearson Education, Inc. All Rights Reserved.

Steps NOTE: Author uses Outline window to add components to proper TableRows of TableLayout. With more complex Layouts, you can use Visual Layout Editor. (Author thinks it’s easier to use Outline.) 1.Create Project 2.Delete and Recreate main.xml file 3.Configure Visual Layout Editor to use Appropriate Android SDK 4.Configure Visual Layout Editor’s Size and Resolution 5.Configure TableLayout 6.Add TableRows 7.Add Components for tableRow0 – tableRow5 © by Pearson Education, Inc. All Rights Reserved.

Review Layout billEditText and customSeekBar do not span columns yet text is light gray and hard to read some components are in wrong columns – will self- correct after we fix customSeekBar text is all left-aligned © by Pearson Education, Inc. All Rights Reserved.

Customizing Componets Change text colors of TextViews Move 10%-20% to correct columns Center Text Span elements properly Right align TextViews in column 0 Vertically center TextViews in 5 th row Set SeekBar’s properties Prevent user from manipulating text in EditTexts other than billEditText Set Layout weights for various components to fit on screen © by Pearson Education, Inc. All Rights Reserved.

Final XML Markup © by Pearson Education, Inc. All Rights Reserved.

Editing string resources © by Pearson Education, Inc. All Rights Reserved.

Adding Functionality to App © by Pearson Education, Inc. All Rights Reserved.

Adding Functionality Open source code Add comments at top of file Add import statements Android apps do not have a main method ▫ Have activities, services, content providers and broadcast receivers ▫ The TipCalculator app has only one Activity class, which extends (inherits from) class Activity. Add instance variables Override OnCreate and onSaveInstanceStatemethods Add method updateStandard, update updateCustom Add anonymous inner class that implements interface OnSeekBarChangeListener, and TextWatcher and overrided some of their methods © by Pearson Education, Inc. All Rights Reserved.

package and import statements Class Activity – provides basic lifecycle methods of an app Class Bundle – represent’s an app’s state info, so app can save its state when sent to background Interface Editable – change content and markup of text in GUI Interface TextWatcher to respond to events when user interacts with EditText component Package widget – contains widgets (GUI components) and layouts used in GUIs © by Pearson Education, Inc. All Rights Reserved. Interface OnSeekBarChangeListeners – responds to user moving the SeekBar’s thumb

Activity Throughout its life an activity can be in several states Active (running) Paused (but visible-not focused-could be killed) Stopped (not visible – likely to be killed) Methods associated with state transitions (pg. 108) © by Pearson Education, Inc. All Rights Reserved.

Keep this method simple, It has to load in 5 seconds! Time consuming initializations should be done in a background process. Key/value pairs Must call superclass method when overriding any Activity method R is a class built by ADT when you build GUI (see gen folder) contains nested static classes representing each type of resource In your res folder

© by Pearson Education, Inc. All Rights Reserved. Programmer- defined method

© by Pearson Education, Inc. All Rights Reserved. Programmer- defined method

© by Pearson Education, Inc. All Rights Reserved. In Eclipse, you can generate a shell of this method by right clicking in the source Code, then selecting Source > Override|Implement Methods… Dialog shows you every method that can be overridden or implemented in a class

© by Pearson Education, Inc. All Rights Reserved. Line 81 registered this as customSeekBar’s event-handling object Java requires we override every method of an interface we implement (even if we don’t use them)

© by Pearson Education, Inc. All Rights Reserved.

Wrap-Up Created first interactive Android app ▫ Overviewed, test-drove, followed detailed instructions to build GUI using ADT’s Plugin’s tools in Eclipse  Including Visual Layout Editor, the Outline Window and the Properties Window ▫ Edited main.xml file ▫ Did a detailed code walkthrough of Activity class Future chapters only discuss new GUI capabilities as needed © by Pearson Education, Inc. All Rights Reserved.

Learned TableLayout ▫ Each cell can be empty, hold one component – which could itself be a layout TableRow ▫ Number of columns determined by the row with most components ▫ Row’s height determined by tallest component ▫ Column’s width by widest component, unless you stretch them TextView ▫ Is a label EditView ▫ Receives input from the user, non-focusable Edit Texts to display various values SeekBar ▫ Allow user to specify custom values on a scale © by Pearson Education, Inc. All Rights Reserved.

Learned many Java OO concepts Final static Classes ▫ Overriding methods Subclasses (extending/inheriting from) Anonymous inner classes Objects Methods Interfaces Get references to GUI components that the app interacts with programmatically © by Pearson Education, Inc. All Rights Reserved.

Next chapter Learn about collections Layout GUI programmatically – allowing you to add and remove components dynamically in response to user’s interactions © by Pearson Education, Inc. All Rights Reserved.