CS378 -Mobile Computing. More UI -Part 2

Similar documents
CS371m - Mobile Computing. Gestures

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

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

CS378 -Mobile Computing. What's Next?

EMBEDDED SYSTEMS PROGRAMMING UI and Android

07. Menu and Dialog Box. DKU-MUST Mobile ICT Education Center

ANDROID APPS (NOW WITH JELLY BEANS!) Jordan Jozwiak November 11, 2012

CE881: Mobile & Social Application Programming

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

UI, Continued. CS 2046 Mobile Application Development Fall Jeff Davidson CS 2046

Bouncing and Actor Class Directions Part 2: Drawing Graphics, Adding Touch Event Data, and Adding Accelerometer

Adobe Dreamweaver CS6 Digital Classroom

Styles, Themes, and Material Design

Mobile Programming Lecture 1. Getting Started

INTRODUCTION TO HTML5! CSS Styles!

MOBILE INTERACTION DESIGN

MotionEvents Touch Handling Gestures

Android Application Model I

Android. The Toolbar

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

Programming Android UI. J. Serrat Software Design December 2017

DB2 Web Query Active Technologies for Mobile Web Apps

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

Mobile App Design Project Doodle App. Description:

3. Text to Speech 4. Shake it

User Interfaces for Web Sites and Mobile Devices. System and Networks

MindBoard (Classic) User Guide. Tomoaki Oshima

Androidfp_printOnly.book Page vii Tuesday, October 4, :15 AM. Contents. Before You Begin

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

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

Spring Lecture 7 Lecturer: Omid Jafarinezhad

Lab 1 - Setting up the User s Profile UI

Android. Lesson 1. Introduction. Android Developer Fundamentals. Android Developer Fundamentals. to Android 1

BCA 6. Question Bank

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

Mobile Application Development Android

Fig. 2.2 New Android Application dialog. 2.3 Creating an App 41

Course Syllabus. Course Title. Who should attend? Course Description. Android ( Level 1 )

Lab 3: Using Worklight Server and Environment Optimization Lab Exercise

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

Lifecycle Callbacks and Intents

Chapter 2: Android Device Basics

Create new Android project in Android Studio Add Button and TextView to layout Learn how to use buttons to call methods. Modify strings.

Multiple devices. Use wrap_content and match_parent Use RelativeLayout/ConstraintLayout Use configuration qualifiers

User Interface: Layout. Asst. Prof. Dr. Kanda Runapongsa Saikaew Computer Engineering Khon Kaen University

Action Bar. Action bar: Top navigation bar at each screen The action bar is split into four different functional areas that apply to most apps.

application components

INTRODUCTION TO ANDROID

Android Programming Lecture 2 9/7/2011

Table of contents. Sliding Panels DMXzone.com

Define the Slide Animation Direction on the deck control.

Advanced Dreamweaver CS6

CS 528 Mobile and Ubiquitous Computing Lecture 4a: Fragments, Camera Emmanuel Agu

CHAPTER 4. Fragments ActionBar Menus

Topics of Discussion

Fragments and the Maps API

SPORTS DOOD. User Guide v1

Lifespan Guide for installing and using Citrix Receiver on your Mobile Device

Syllabus- Java + Android. Java Fundamentals

Course Syllabus. Course Title. Who should attend? Course Description. Adobe Dreamweaver CC 2014

Android Development Crash Course

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

Advanced Development with the ArcGIS API for JavaScript. Jeremy Bartley, Kelly Hutchins, Derek Swingley

Application Notes. Using Art-Osc with Colour-Tramp

Employing a flexible interaction language scheme with User Defined Variables

Mobile 3.1 ios & Android v2

Beginning Android 4 Application Development

Esri Story Maps let you combine authoritative maps with narrative text, images, and multimedia

Index LICENSED PRODUCT NOT FOR RESALE

Java Training Center - Android Application Development

Clickteam Fusion 2.5 Android Bars - Guide CONTENTS. For more information, tutorials, examples and walk-thrus visit the website.

Android Programs Day 5

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

TextView. A label is called a TextView. TextViews are typically used to display a caption TextViews are not editable, therefore they take no input

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

05. RecyclerView and Styles

Preface...3 Acknowledgments...4. Contents...5. List of Figures...17

Required Core Java for Android application development

What is Android? Android is an open-source operating system (OS) used in smart devices

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

mgwt Cross platform development with Java

Meniu. Create a project:

Introduction To Android

Except as otherwise noted, the content of this document is licensed under the Creative Commons Attribution 3.0 License

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

ANDROID APPS DEVELOPMENT FOR MOBILE GAME

Style, Themes, and Introduction to Material Design

No Programming Required Create web apps rapidly with Web AppBuilder for ArcGIS

IBM Forms V8.0 Custom Themes IBM Corporation

What is Emcee? Actions in Thumbnail View Starting Emcee and Activating the Thumbnail View... 5

Android for Ubiquitous Computing Researchers. Andrew Rice University of Cambridge 17-Sep-2011

SEVEN ADVANCED ACADEMY

University of Stirling Computing Science Telecommunications Systems and Services CSCU9YH: Android Practical 1 Hello World

XML Tutorial. NOTE: This course is for basic concepts of XML in line with our existing Android Studio project.

ORACLE UNIVERSITY AUTHORISED EDUCATION PARTNER (WDP)

ACTIVITY, FRAGMENT, NAVIGATION. Roberto Beraldi

Copyright 2010, Oracle. All rights reserved.

Android Apps Development for Mobile and Tablet Device (Level I) Lesson 4. Workshop

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

Mobile Feedback System in Android Platform

Transcription:

CS378 -Mobile Computing More UI -Part 2

Special Menus Two special application menus options menu context menu Options menu replaced by action bar (API 11) menu action bar 2

OptionsMenu User presses Menu Button Activities oncreateoptionsmenumethod is called In example options_menu.xml in res/menu folder 3

OptionsMenu Alternate creation of OptionsMenu add item to menu programmatically chained method calls 4

SubMenus Option on Menu may be creation of a SubMenu In XML nest menu inside menu or programmatically by adding SubMenus to Menu in oncreateoptionsmenu method 5

Menu Options Selected if Menu Option is another Activity it is launched when Menu button pressed The Big About in previous example For other items onoptionsitemselected(menuitem item) 6

ACTION BAR 7

ActionBar Introduced in Android 3.0 Honeycomb, tablet only 4.0, Ice Cream Sandwich, tablet and phones "The action bar is a window feature that identifies the application and user location, and provides user actions and navigation modes" http://developer.android.com/guide/topics/ui/actionbar.html 8

identification navigation actions Purpose of ActionBar Icon / Logo Navigation Tabs Action Item Overflow Menu 9

ActionBar ActionBaritems declared in menu.xml 10

ActionBar If menu items declared in xml, added to menu in order they appear Extra items brought up with menu button 11

Navigation Tabs Used to switch between fragments http://developer.android.com/guide/topics/fundamentals/fragments.html 12

ContextMenu pre 3.0, aka Floating Menus subtype of Menu display when a long press is performed on a View Activity is a descendant of View Activity may be broken up into multiple views implement oncreatecontextmenu method must call registerforcontextmenu method and pass View 13

ContextMenu From Tip Calculator Long press on total amount EditText Default behavior for EditText Nothing added in TipCalculatorto create this 14

Contextual Action Mode 3.0 and later http://developer.android.com/guide/topics/ui/menus.html#cab 15

STYLES 16

Styles Defined in XML file res/values/style similar to a cascading style sheet as used in html group layout attributes in a style and apply to various View objects (TextView, EditText, Button) 17

Sample Styles, in styles.xml 18

Apply Style -in main xml 19

Result of Styles can override elements of style bottom edit text overrides color one style can inherit from another use UI editor to create view and then extract to style 20

GESTURES 21

Common Gestures 22

Common Gestures http://developer.android.com/design/patterns/gestures.html 23

Common Gestures Fling or flick gesture: similar to swipe or drag scroll/swipe/drag user presses then moves finger in s steady motion before lifting finger fling or flick user presses then moves finger in an accelerating motion before lifting 24

Dealing With Gestures To handle simple touch events create View.OnTouchListenerfor view Example from tutorial, screen press leads to player moving if it is their turn and they touch an open square 25

passed a MotionEvent object with a large amount of data in tic tactoe tutorial you only used location of event (x and y) ontouchevent 26

Handling Common Gestures Instead of trying to decode gestures from the MotionEventpassed to on touch Use the GestureDetectorclass Add a GestureDetectorobject to View override View.onTouhcEventmethod to pass MotionEventon to the GestureDetector.onTouchEventmethod 27

Handling Common Gestures create a GestureDetector.OnGestureListener (sevealgestures) or a GestureDetector.SimpleOnGestureListener (more gestures) and register it with the GesturerDetector callback methods for ondoubletap, onlongpress, onscroll, onfling, onsingletapconfirmed, many more 28

Complex Gestures Non standard gestures required lots of code to recognize Android 1.6 introduced new APIs to store, load, draw, and recognize gestures Gesture Builder app on emulator emulator must include virtual SD card allows creating set of gestures for your ppliaction 29

Complex Gestures Each gesture associated with name multiple gestures can have same name variations on same gesture, better chance of recognizing Move gestures from emulator to application res/raw folder 30

Complex Gestures Recognizing gestures via a GestureOverlayView simple drawing board on top of view that shows and records user gestures When gesture complete GestureLibrary queried to see if gesture is recognized Predictions between entered gesture and those in the library 31

Animal Sounds App 32

Predictions 33

oncreate 34

Listener 35