Programming Android UI. J. Serrat Software Design December 2017

Similar documents
CS 528 Mobile and Ubiquitous Computing Lecture 2a: Introduction to Android Programming. Emmanuel Agu

CS 4518 Mobile and Ubiquitous Computing Lecture 2: Introduction to Android Programming. Emmanuel Agu

LECTURE 08 UI AND EVENT HANDLING

Beginning Android 4 Application Development

Required Core Java for Android application development

CS 528 Mobile and Ubiquitous Computing Lecture 2a: Android UI Design in XML + Examples. Emmanuel Agu

Understand applications and their components. activity service broadcast receiver content provider intent AndroidManifest.xml

Hello World. Lesson 1. Android Developer Fundamentals. Android Developer Fundamentals. Layouts, and. NonCommercial

CS 4518 Mobile and Ubiquitous Computing Lecture 4: Data-Driven Views, Android Components & Android Activity Lifecycle Emmanuel Agu

Android Programming Lecture 2 9/7/2011

Mobile Application Development Android

EECS 4443 Mobile User Interfaces. More About Layouts. Scott MacKenzie. York University. Overview (Review)

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

CS378 -Mobile Computing. User Interface Basics

CS371m - Mobile Computing. User Interface Basics

EECS 4443 Mobile User Interfaces. More About Layouts. Scott MacKenzie. York University

Building User Interface for Android Mobile Applications II

AND-401 Android Certification. The exam is excluded, but we cover and support you in full if you want to sit for the international exam.

ANDROID APPS DEVELOPMENT FOR MOBILE GAME

Android Programming (5 Days)

Android App Development. Mr. Michaud ICE Programs Georgia Institute of Technology

CS 370 Android Basics D R. M I C H A E L J. R E A L E F A L L

Activities and Fragments

MC Android Programming

Overview. What are layouts Creating and using layouts Common layouts and examples Layout parameters Types of views Event listeners

University of Babylon - College of IT SW Dep. - Android Assist. Lect. Wadhah R. Baiee Activities

CS260 Intro to Java & Android 05.Android UI(Part I)

Android Application Model I. CSE 5236: Mobile Application Development Instructor: Adam C. Champion, Ph.D. Course Coordinator: Dr.

CS 528 Mobile and Ubiquitous Computing Lecture 2: Intro to Android Programming Emmanuel Agu

ANDROID USER INTERFACE

CS 403X Mobile and Ubiquitous Computing Lecture 3: Introduction to Android Programming Emmanuel Agu

Mobile Programming Lecture 2. Layouts, Widgets, Toasts, and Event Handling

1. Implementation of Inheritance with objects, methods. 2. Implementing Interface in a simple java class. 3. To create java class with polymorphism

Programming in Android. Nick Bopp

Android Application Development

Mobile Programming Lecture 1. Getting Started

Android Application Development 101. Jason Chen Google I/O 2008

Android HelloWorld - Example. Tushar B. Kute,

Produced by. Mobile Application Development. David Drohan Department of Computing & Mathematics Waterford Institute of Technology

Mobile User Interfaces

Getting Started. Dr. Miguel A. Labrador Department of Computer Science & Engineering

Android Programming - Jelly Bean

Android Application Model I

CS 4330/5390: Mobile Application Development Exam 1

Android Basics. Android UI Architecture. Android UI 1

Programming with Android: Layouts, Widgets and Events. Dipartimento di Scienze dell Informazione Università di Bologna

ANDROID SYLLABUS. Advanced Android

Introduction To Android

CS378 - Mobile Computing. Anatomy of an Android App and the App Lifecycle

ANDROID APPS DEVELOPMENT FOR MOBILE AND TABLET DEVICE (LEVEL I)

CS260 Intro to Java & Android 05.Android UI(Part I)

Mumbai Android Bootcamp -Course Content

GUI Design for Android Applications

COLLEGE OF ENGINEERING, NASHIK-4

GUJARAT TECHNOLOGICAL UNIVERSITY

Android User Interface

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

ANDROID APPS DEVELOPMENT FOR MOBILE AND TABLET DEVICE (LEVEL I)

CS 4518 Mobile and Ubiquitous Computing Lecture 2: Introduction to Android. Emmanuel Agu

Mobile and Ubiquitous Computing: Android Programming (part 3)

CS378 -Mobile Computing. Anatomy of and Android App and the App Lifecycle

Android Development Crash Course

Android User Interface Android Smartphone Programming. Outline University of Freiburg

CS 528 Mobile and Ubiquitous Computing Lecture 2: Intro to Android Programming Emmanuel Agu

Android App Development. Ahmad Tayeb

CS 528 Mobile and Ubiquitous Computing Lecture 1b: Introduction to Android. Emmanuel Agu

Praktikum Entwicklung Mediensysteme. Implementing a User Interface

Lab 1 - Setting up the User s Profile UI

application components

EMBEDDED SYSTEMS PROGRAMMING Application Basics

10.1 Introduction. Higher Level Processing. Word Recogniton Model. Text Output. Voice Signals. Spoken Words. Syntax, Semantics, Pragmatics

Questions and Answers. Q.1) Which of the following is the most ^aeuroeresource hungry ^aeuroepart of dealing with activities on android?

CS 528 Mobile and Ubiquitous Computing Lecture 3b: Android Activity Lifecycle and Intents Emmanuel Agu

CSCU9YH Development with Android

Mobila applikationer och trådlösa nät, HI1033, HT2013

Produced by. Mobile Application Development. David Drohan Department of Computing & Mathematics Waterford Institute of Technology

Programming with Android: Introduction. Layouts. Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna

BCA 6. Question Bank

Graphical User Interfaces

Upon completion of the second part of the lab the students will have:

Views & View Events View Groups, AdapterViews & Layouts Menus & ActionBar Dialogs

Android System Architecture. Android Application Fundamentals. Applications in Android. Apps in the Android OS. Program Model 8/31/2015

Produced by. Mobile Application Development. Eamonn de Leastar

INTRODUCTION TO ANDROID

Diving into Android. By Jeroen Tietema. Jeroen Tietema,

CS371m - Mobile Computing. More UI Navigation, Fragments, and App / Action Bars

CS378 -Mobile Computing. More UI -Part 2

Android UI: Overview

INTRODUCTION COS MOBILE DEVELOPMENT WHAT IS ANDROID CORE OS. 6-Android Basics.key - February 21, Linux-based.

MOBILE COMPUTING 1/20/18. How many of you. CSE 40814/60814 Spring have implemented a command-line user interface?

Java Training Center - Android Application Development

Android Fundamentals - Part 1

Let s take a display of HTC Desire smartphone as an example. Screen size = 3.7 inches, resolution = 800x480 pixels.

Mobile Application Development - Android

Android App Development

CS371m - Mobile Computing. More UI Action Bar, Navigation, and Fragments

Course Learning Outcomes (CLO): Student Outcomes (SO):

Stanislav Rost CSAIL, MIT

06. Advanced Widget. DKU-MUST Mobile ICT Education Center

Programming with Android: Introduction. Layouts. Luca Bedogni. Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna

Transcription:

Programming Android UI J. Serrat Software Design December 2017

Preliminaries : Goals Introduce basic programming Android concepts Examine code for some simple examples Limited to those relevant for the project at hand Provide references to materials for self study Understand provided project implementation

Preliminaries: why Android Many students own an Android phone Free development environment, Android Studio Well documented Good chance to learn UI design Challenging design Take away course project in your pocket Add Android to your CV Starting point to learn more

Preliminaries: why Android Drawbacks: learning curve Many things left out

Preliminaries: how to Android Try to solve small relevant problems in separate projects : create an app bar with tabs / actions and overflow action create bottom bar customize ListView to show project/task name, date and time, intervals make a contextual app bar report and new project/task forms...

Contents 1. References 2. Platforms and APIs 3. Building blocks 4. Structure of an Android project 5. Activity life cycle 6. Views, Layouts 7. Intents, Broadcast receivers, Adapters 8. Services 9. TimeTracker architecture

References Beginning Android 4 application development. Wei-Meng Lee. Wiley, 2012. Electronic version at UAB library. Head first Android development. Dawn Griffiths, David Griffiths. O'Reilly, 2015.

References http://developer.android.com/training/index.html Always up to date How-to style, check the entry Best practices for UI App bar

Building blocks Main logical components of Android applications : Activity : UI component typically corresponding to one screen. They contain views = UI controls like buttons, labels, editable text... and layouts = view groups (composite) May react to user input and events (intents) An application typically consists of several screens, each screen is implemented by one activity. Moving to the next screen means starting a new activity.

Building blocks Service : application part that runs in background without the user s direct interaction, similar to a Unix daemon. For example, a music player. Content provider : generic interface to manage (access, change) and share (like contacts ) application data. Can be stored as SQLite databases. Application Activity Activity Application Activity Activity Application Activity Activity Content Content Resolver Resolver Service Service Content Content Resolver Resolver Content Content Provider Provider Content Content Resolver Resolver Data Data file file SQLite XML XML file file Remote Store

Building blocks Intent : messages sent by an activity or service in order to launch an activity = show a new screen broadcast (announce) that a certain event has occurred so that it can be handled Fundamental to decouple cooperating application components. Post 3.0 APIs include some more components: fragments, tasks...

Building blocks Structure of an Android project: create and run a Hello world application Do not close the emulator! It takes a lot to start. Each time you build the project, the new version is uploaded and execution starts automatically.

Android Studio Install Android Studio (3.0.1 in Dec. 2017) Add some virtual devices, e.g. Galaxy Nexus + API24 Nougat, installing dependencies Follow tutorial Training Getting started Building your first App

Android platforms and APIs Compatibility with existing devices based on Playstore downloads + Oreo...

Android platforms and APIs

Android Studio

Android Studio Emulator may take a lot to launch, run slowly or even crash disable cameras, multicore CPUs, set graphics to software emulation If absolutely needed, change to API19 KitKat or API22 Lollipop

Android Studio

Android Studio

Structure of an Android App MainActivity.java Automatically generated code

Structure of an Android App Autogenerated class R Inflates the UI from the activity_main.xml file specifying it

Structure of an Android App activity_main.xml

Structure of an Android App

Structure of an Android App The interface design is represented in XML, decoupling design from code (opposite to programmatic UI ). The call in Mainactivity.java setcontentview(r.layout.activity_main) inflates the UI. Layouts are special (group) view that contain other views / group views in specific spatial arrangements : LinearLayout, Gridlayout, RelativeLayout, ConstraintLayout... TextView is a non-editable text label.

layout/main.xml <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/textviewtitol" android:text="tubequoter V0.10" /> <TableLayout android:id="@+id/tablelayout1" android:layout_marginleft="20dp" > <TableRow android:id="@+id/tablerow1"> <TextView android:id="@+id/textviewlabellongitud" android:text="longitud" /> <EditText android:id="@+id/edittextlongitud" android:inputtype="number" > <requestfocus /> </EditText> <TextView android:id="@+id/textviewlabelunitatslongitud" android:text="mm" /> </TableRow> : : </TableLayout> <Button android:id="@+id/butocalcul" android:text="calcula" /> </LinearLayout>

Structure of an Android App

Structure of an Android App res/values/strings.xml

Structure of an Android App Place to define UI constant strings, values, arrays of integers and strings, colors, size of things (dimensions)...

Structure of an Android App

Structure of an Android App AndroidManifest.xml This activity may be the application entry point.

Structure of an Android App AndroidManifest.xml includes xml nodes for each of the application components : Activities, Services, Content Providers and Broadcast Receivers using intent filters to specify how they interact with each other: which activities can launch another activity or service which broadcast intents an activity listens to, in order to handle them with a receiver... offers attributes to specify application metadata (like its icon or theme)

Activity Life Cycle Many Android devices have limited memory, CPU power, and other resources. The OS assures the most important processes get the resources they need. In addition, the OS takes responsiveness very seriously: if the application does not answer user input (key press...) in < 5 seconds, the ANR dialog appears.

Activity Life Cycle Each application runs in its own process, which has a main thread, within which activities, services... run The OS ranks processes and kills those with lowest priority, if some application needs unavailable resources. If a process is killed in the middle, somehow data can not be lost.

Activity Life Cycle Android in practice. Collins, Galpin, Käpler. Manning, 2012.

Activity Life Cycle States of an activity and methods invoked when changing state Activity is active = visible in foreground interacting with user Not visible. Will remain in memory. Need to save data, such as a database record being edited. Hello Android. Ed Burnette. The Pragmatic Programmer, 2010 Activity is visible in background

States of an activity and methods invoked when changing state Changing orientation landscape portrait calls ondestroy() + oncreate()

Views, Layouts Control: extension of class View that implements some simple functionality, like a button. ViewGroup : extensions of the View class that can contain multiple child Views (compound controls). Layout managers, such as LinearLayout. Activities represent the screen being displayed to the user. You assign a View or layout to an Activity: HelloWordActivity.java main.xml

Views, Layouts Common controls : TextView, EditText (many types), Button, ListView, ExpandableList, Spinner, Checkbox, ProgressBar, SeekBar, RadioGroup, RatingBar, Time and Date picker

Views, Layouts Layouts control the position of child controls on a screen. Can be nested, creating arbitrarily complex interfaces. Common layouts: LinearLayout adds each child View in a straight line, either vertically or horizontally RelativeLayout define the positions of child Views relative to each other or screen boundaries ConstraintLayout like relative layout but more flexible, avoids nesting layouts in complex designs. Check tutorial!

Views, Layouts 3 LinearLayout 1 1 2 3 1 2 2 3 4 4

Views, Layouts RelativeLayout

<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/textviewtitol" android:text="tubequoter V0.10" /> <TableLayout android:id="@+id/tablelayout1" android:layout_marginleft="20dp" > <TableRow android:id="@+id/tablerow1"> <TextView android:id="@+id/textviewlabellongitud" android:text="longitud" /> <EditText android:id="@+id/edittextlongitud" android:inputtype="number" > <requestfocus /> </EditText> <TextView android:id="@+id/textviewlabelunitatslongitud" android:text="mm" /> </TableRow> : : </TableLayout> <Button android:id="@+id/butocalcul" android:text="calcula" /> </LinearLayout>

Views, Layouts ToDoList example : How to react to user input? How to bind data to the UI (lists)?

Views, Layouts

Views, Layouts From now on, changes on ArrayList todoitems are shown in the screen when adapter notifies it.

Views, Layouts Java anonymous class Override onkey of class onkeylistener Which listeners has an EditText?

Views, Layouts Java anonymous class Override onkey of class onkeylistener Which listeners has an EditText?

Intents Intents is a fundamental concept in Android development : the glue that binds applications' components. Message-passing mechanism to explicitly or implicitly start an Activity or a Service broadcast that an event has occurred, application or system-wide to handle user action or process a piece of data

Intents

Intents origin context activity to start

Intents Need to declare all activities in AndroidManifest.xml

Broadcast Receivers Intents can also be used to broadcast messages to anonymous components within one same application. The sender can associate data to those intents. A broadcast receiver (maybe within other app. component): listens for selected types of broadcast intents responds to them = processes associated data 'anonymous' means components do not need to know each other.

Broadcast Receivers NEW_LIFE String name double longitude double latitude On button click a broadcast intent of type NEW_LIFE is sent, along with three data fields. A broadcast receiver object has subscribed to this type of messages in the AndroidManifest.xml. The receiver does not belong to an Activity or Service in this case. Response is printing a message.

Broadcast Receivers Broadcast intent type pairs of (key=string, value)

Broadcast Receivers Broadcast intent type data field names

Broadcast Receivers Broadcast intent type The broadcast receiver will always be active (listening), even when MyActivity has been killed or not started

Broadcast Receivers Alternatively, register the receiver when MyActivity is in foreground and unregister when not. Typically when the receiver updates am UI element.

Activity Life Cycle States of an activity and methods invoked when changing state Activity is active = visible in foreground interacting with user Not visible. Will remain in memory. Need to save data, such as a database record being edited. Hello Android. Ed Burnette. The Pragmatic Programmer, 2010 Activity is visible in background

TimeTracker architecture LlistaActivitatsActivity.java LlistaIntervalsActivity.java ListView controls

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture Harder to destroy by Android OS than activities Contains the actual activities and intervals tree Analogous to TimerTask or Timer, which are not usable in Android. See code comments and references there.

TimeTracker architecture Show a part of the tree, the childs of some node. root P P T P T P P T I I I different fields

TimeTracker architecture DONAM_FILLS PUJA_NIVELL BAIXA_NIVELL DONAM_FILLS ENGEGA_CRONOMETRE PARA_CRONOMETRE PUJA_NIVELL

TimeTracker architecture TE_FILLS + array of project and task data : dates and duration TE_FILLS + array of interval data : name, dates and duration

TimeTracker architecture Intent data to activities is a serialized array list of these objects. This avoids serializing the whole or a subtree of activities and intervals, slow if the tree is large! (need to do it every 1, 2 secs.) Creates a random synthetic but data-consistent large tree (durations and dates)

Homework Get some recommended book AND read developer.android.com/training main topics Install Android Studio Create a Hello world project, with string and icon resources, try nested layouts and ConstraintLayout Import our Android TT project into Android Studio, replace our first milestone classes by yours and edit code to integrate it and make it work Read comments, identify activities, service...