User Interface Development. CSE 5236: Mobile Application Development Instructor: Adam C. Champion Course Coordinator: Dr.
|
|
- Debra Randall
- 6 years ago
- Views:
Transcription
1 User Interface Development CSE 5236: Mobile Application Development Instructor: Adam C. Champion Course Coordinator: Dr. Rajiv Ramnath 1
2 Outline UI Support in Android Fragments 2
3 UI Support in the Android SDK Inverted paradigm Each subclass constrains rather than extends functionality Hundreds of methods are exposed Augh!! Base classes: ViewGroup base class for composite elements View base class for terminal UI components 3
4 View Hierarchy # = SDK Version number 4
5 ViewGroup Hierarchy Direct Subclasses: AbsoluteLayout AdapterView<T extends Adapter> FragmentBreadCrumbs FrameLayout GridLayout LinearLayout PagerTitleStrip RelativeLayout SlidingDrawer ViewPager 19 indirect subclasses. See: 5
6 Sample Layout, Login Activity <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="20dip"> <LinearLayout android:orientation="vertical... <TextView /> <TextView... /> <EditText /> <TextView... /> <EditText... /> <Button... /> <Button... /> <Button... /> </LinearLayout> </ScrollView>
7 Layout Configuration ID: Used if handle to the widget is needed Parameters: layout_width, layout_height layout_margintop,...right, layout_margin orientation Can be combined: layout_gravity= bottom right Constants: match_parent, wrap_content Width and height specifications: dp, in, mm, px, sp (scaled pixels based on font size) A wide range of LayoutParams Resources e.g. backgrounds Blank canvases using a (generic) View element in the layout 7
8 8
9 Adding Resources Resources can also be added by rightclicking on res directory, selecting New Android Resource File 9
10 Other Layout Parameters and Techniques Inherit parameters from enclosing elements layout_span - to span multiple columns Empty views to add blank canvases to be filled later (see later) Shrink or stretch columns as needed: shrinkcolumns, stretchcolumns RelativeLayout allows window manager to manage size 10
11 Linking a UI to a Fragment: Java // LoginActivity.java public class LoginActivity extends SingleFragmentActivity protected Fragment createfragment() { return new LoginFragment(); // public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { View v = inflater.inflate(r.layout.fragment_login, container, false); // Real code handles rotation musernameedittext = (EditText) v.findviewbyid(r.id.username_text); mpasswordedittext = (EditText) v.findviewbyid(r.id.password_text); Button loginbutton = (Button) v.findviewbyid(r.id.login_button); loginbutton.setonclicklistener(this); Button cancelbutton = (Button) v.findviewbyid(r.id.cancel_button); cancelbutton.setonclicklistener(this); Button newuserbutton = (Button) v.findviewbyid(r.id.new_user_button); newuserbutton.setonclicklistener(this); return v; 11 You can also set up listener objects in Activities using oncreate()
12 Linking a UI to a Fragment: Kotlin // LoginActivity.kt class LoginActivity : SingleFragmentActivity() { override fun createfragment(): Fragment { return LoginFragment() // LoginFragment.kt override fun oncreateview(inflater: LayoutInflater, container: ViewGroup?, savedinstancestate: Bundle?): View? { val v: View = inflater.inflate(r.layout.fragment_login, container, false) // Real code handles rotation musernameedittext = v.findviewbyid<edittext>(r.id.username_text) mpasswordedittext = v.findviewbyid<edittext>(r.id.password_text) val loginbutton = v.findviewbyid<button>(r.id.login_button) loginbutton?.setonclicklistener(this) val cancelbutton = v.findviewbyid<button>(r.id.cancel_button) cancelbutton?.setonclicklistener(this) val newuserbutton = v.findviewbyid<button>(r.id.new_user_button) newuserbutton?.setonclicklistener(this) return v 12
13 Creating a Custom Widget: Layout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#676767" android:gravity="center_horizontal" android:padding="20dip"> <com.wiley.fordummies.androidsdk.tictactoe.board android:id="@+id/board" android:layout_width="match_parent" android:layout_height="280dip"/>... </LinearLayout> 13
14 Creating a Custom Widget: Java // Board.java public class Board extends View { //... public Board(Context context, AttributeSet attributes) { super(context, attributes); //... setfocusable(true); setfocusableintouchmode(true); //... //... protected void onsizechanged(int w, int h, int oldw, int oldh) { //... super.onsizechanged(w, h, oldw, protected void ondraw(canvas canvas) { super.ondraw(canvas); //... Instantiating the view: // LoginFragment.java, oncreateview() and setupboard() // oncreateview v = inflater.inflate(r.layout.fragment_game_session,...); // setupboard() mboard = (Board) v.findviewbyid(r.id.board); 14
15 Creating a Custom Widget: Kotlin // Board.kt class Board(context: Context, attributes: AttributeSet) : View(context, attributes) { init { isfocusable = true isfocusableintouchmode = true //... //... override fun onsizechanged(w: Int, h: Int, oldw: Int, oldh: Int) { //... super.onsizechanged(w, h, oldw, oldh) //... override fun ondraw(canvas: Canvas) { super.ondraw(canvas) //... Instantiating the view: // LoginFragment.kt, oncreateview() and setupboard() // oncreateview() v = inflater.inflate(r.layout.fragment_game_session, container, false) // setupboard() mboard = (Board) v.findviewbyid(r.id.board) 15
16 Creating a Layout via Code // public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); LinearLayout layout = new LinearLayout(this); Button dohbutton = new Button(this); dohbutton.settext( In case of meltdown, Push Me! ); layout.addview(dohbutton); setcontentview(layout); 16
17 Use: <EditText Definition: Styles and Themes (1) android:text= Hello /> <?xml version= 1.0 encoding= utf-8?> <resources> <style name= DarkBold > <item name= android:layout_width > match_parent </item> <item name= android:layout_height > wrap_content </item>... more parameters... </style> </resources> Inheritance: <style name= DarkPhone > <item name= android:phonenumber >true</item> </style> 17
18 Styles and Themes (2) Stored in res/values/ directory with.xml extension (name not relevant) Can set application-wide and activity-specific styles (aka themes): Set themes in AndroidManifest.xml on <application> tag or <Activity> tag <application <activity Can even create version-specific layout files Ref: 18
19 Outline UI Support in Android Fragments 19
20 Fragments and Their Rationale A composite UI component that handles its own UI Multiple Fragments in an Activity A separate class hierarchy: Fragment, DialogFragment, ListFragment, PreferenceFragment, WebViewFragment Goals: Further separate UI from Activity. Separate UI design from Activity design UI should have its own lifecycle and flow Should be able to add or remove UI components while activity is running Primary driver: Tablets! 20
21 Example Login and Account
22 Portrait Layout: Login <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" <LinearLayout...> <TextView <TextView <EditText <TextView android:text="enter Password".../> <EditText <Button <Button <Button </LinearLayout> </ScrollView> 22
23 Portrait Layout: Account <?xml version="1.0" encoding="utf-8"?> <LinearLayout...> <FrameLayout.../> Placeholder for fragment <Button </LinearLayout> What happened to Landscape layout of AccountFragment? 23
24 Landscape Layout: Login <?xml version="1.0" encoding="utf-8"?> <LinearLayout... android:orientation="horizontal...> NOTE HORIZONTAL LAYOUT <ScrollView... > <LinearLayout.. > <TextView... /> <TextView... /> <EditText.../> <TextView.../> <EditText.../> <Button.../> <Button.../> </LinearLayout> </ScrollView> <fragment class="com.wiley.fordummies.androidsdk.tictactoe.accountfragment" android:layout_weight="1" android:layout_width="0px" android:layout_height="match_parent" android:background="# "/> </LinearLayout> 24
25 AccountFragment: Portrait Layout <?xml version="1.0" encoding="utf-8"?> <LinearLayout...> <LinearLayout...> <TextView android:text="new Account".../> <TextView android:text="username.../> <EditText <TextView android:text="password.../> <EditText <TextView android:text="confirm Password".../> <EditText <Button "/> <Button </LinearLayout> </LinearLayout> 25
26 AccountFragment: Landscape Layout <?xml version="1.0" encoding="utf-8"?> <LinearLayout...> <LinearLayout...> <TextView android:text="new Account.../> <TextView android:text="username.../> <EditText /> <TextView android:text="password".../> <EditText <TextView android:text="confirm Password".../> <EditText <LinearLayout... > <Button <Button </LinearLayout> </LinearLayout> </LinearLayout> 26
27 LoginFragment: public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { View v; int rotation = getactivity().getwindowmanager().getdefaultdisplay().getrotation(); if (rotation == Surface.ROTATION_90 rotation == Surface.ROTATION_270) { v = inflater.inflate(r.layout.fragment_login_land, container, false); else { v = inflater.inflate(r.layout.fragment_login, container, false); musernameedittext = (EditText) v.findviewbyid(r.id.username_text); mpasswordedittext = (EditText) v.findviewbyid(r.id.password_text); Button loginbutton = (Button) v.findviewbyid(r.id.login_button); if (loginbutton!= null) { loginbutton.setonclicklistener(this); Button cancelbutton = (Button) v.findviewbyid(r.id.cancel_button); if (cancelbutton!= null) { cancelbutton.setonclicklistener(this); Button newuserbutton = (Button) v.findviewbyid(r.id.new_user_button); if (newuserbutton!= null) { newuserbutton.setonclicklistener(this); return v; 27
28 LoginFragment: Kotlin override fun oncreateview(inflater: LayoutInflater, container: ViewGroup?, savedinstancestate: Bundle?): View? { val v: View val rotation = activity.windowmanager.defaultdisplay.rotation if (rotation == Surface.ROTATION_90 rotation == Surface.ROTATION_270) { v = inflater.inflate(r.layout.fragment_login_land, container, false) else { v = inflater.inflate(r.layout.fragment_login, container, false) musernameedittext = v.findviewbyid<edittext>(r.id.username_text) mpasswordedittext = v.findviewbyid<edittext>(r.id.password_text) val loginbutton = v.findviewbyid<button>(r.id.login_button) loginbutton?.setonclicklistener(this) val cancelbutton = v.findviewbyid<button>(r.id.cancel_button) cancelbutton?.setonclicklistener(this) val newuserbutton = v.findviewbyid<button>(r.id.new_user_button) newuserbutton?.setonclicklistener(this) return v 28
29 AccountFragment: oncreateview(): Java public View oncreateview(layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) { // Inflate the layout for this fragment View v = inflater.inflate(r.layout.accountfragment, container, false); etusername= (EditText)v.findViewById(R.id.username); etpassword= (EditText)v.findViewById(R.id.password); etconfirm = (EditText) v.findviewbyid(r.id.password_confirm); View btnadd= (Button)v.findViewById(R.id.done_button); btnadd.setonclicklistener(this); View btncancel= (Button)v.findViewById(R.id.cancel_button); btncancel.setonclicklistener(this); return v; 29
30 AccountFragment: oncreateview(): Kotlin override fun oncreateview(inflater: LayoutInflater, container: ViewGroup?, savedinstancestate: Bundle?): View? { val v = inflater.inflate(r.layout.fragment_account, container, false) metusername = v.findviewbyid<edittext>(r.id.username) metpassword = v.findviewbyid<edittext>(r.id.password) metconfirm = v.findviewbyid<edittext>(r.id.password_confirm) val btnadd = v.findviewbyid<button>(r.id.done_button) btnadd.setonclicklistener(this) val btncancel = v.findviewbyid<button>(r.id.cancel_button) btncancel.setonclicklistener(this) return v 30
31 AccountFragment: onclick(): Java public void onclick(android.view.view v) { switch (v.getid()) { case R.id.login_button: checklogin(); break; case R.id.cancel_button: finish(); break; case R.id.new_user_button: startactivity(new Intent(this, Account.class)); break; 31
32 AccountFragment: onclick(): Kotlin override fun onclick(view: View) { when (view.id) { R.id.done_button -> createaccount() R.id.cancel_button -> { metusername.settext("") metpassword.settext("") metconfirm.settext("") 32
33 Thank You Questions and comments? 33
Android Application Model I. CSE 5236: Mobile Application Development Instructor: Adam C. Champion, Ph.D. Course Coordinator: Dr.
Android Application Model I CSE 5236: Mobile Application Development Instructor: Adam C. Champion, Ph.D. Course Coordinator: Dr. Rajiv Ramnath 1 Framework Support (e.g. Android) 2 Framework Capabilities
More informationAndroid Application Model I
Android Application Model I CSE 5236: Mobile Application Development Instructor: Adam C. Champion, Ph.D. Course Coordinator: Dr. Rajiv Ramnath Reading: Big Nerd Ranch Guide, Chapters 3, 5 (Activities);
More informationFragments were added to the Android API in Honeycomb, API 11. The primary classes related to fragments are: android.app.fragment
FRAGMENTS Fragments An activity is a container for views When you have a larger screen device than a phone like a tablet it can look too simple to use phone interface here. Fragments Mini-activities, each
More informationProgramming with Android: Introduction. Layouts. Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna
Programming with Android: Introduction Layouts Luca Bedogni Marco Di Felice Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna Views: outline Main difference between a Drawable and
More informationAndroid UI: Overview
1 Android UI: Overview An Activity is the front end component and it can contain screens. Android screens are composed of components or screen containers and components within the containers Screen containers
More informationANDROID USER INTERFACE
1 ANDROID USER INTERFACE Views FUNDAMENTAL UI DESIGN Visual interface element (controls or widgets) ViewGroup Contains multiple widgets. Layouts inherit the ViewGroup class Activities Screen being displayed
More informationLet s take a display of HTC Desire smartphone as an example. Screen size = 3.7 inches, resolution = 800x480 pixels.
Screens To begin with, here is some theory about screens. A screen has such physical properties as size and resolution. Screen size - a distance between two opposite corners of the screens, usually measured
More informationProgramming with Android: Layouts, Widgets and Events. Dipartimento di Scienze dell Informazione Università di Bologna
Programming with Android: Layouts, Widgets and Events Luca Bedogni Marco Di Felice Dipartimento di Scienze dell Informazione Università di Bologna Outline Components of an Activity ViewGroup: definition
More informationTablets have larger displays than phones do They can support multiple UI panes / user behaviors at the same time
Tablets have larger displays than phones do They can support multiple UI panes / user behaviors at the same time The 1 activity 1 thing the user can do heuristic may not make sense for larger devices Application
More informationMobile Computing Fragments
Fragments APM@FEUP 1 Fragments (1) Activities are used to define a full screen interface and its functionality That s right for small screen devices (smartphones) In bigger devices we can have more interface
More informationMultiple devices. Use wrap_content and match_parent Use RelativeLayout/ConstraintLayout Use configuration qualifiers
Multiple devices Multiple devices Use wrap_content and match_parent Use RelativeLayout/ConstraintLayout Use configuration qualifiers Create a new directory in your project's res/ and name it using the
More informationUI Fragment.
UI Fragment 1 Contents Fragments Overviews Lifecycle of Fragments Creating Fragments Fragment Manager and Transactions Adding Fragment to Activity Fragment-to-Fragment Communication Fragment SubClasses
More informationListView Containers. Resources. Creating a ListView
ListView Containers Resources https://developer.android.com/guide/topics/ui/layout/listview.html https://developer.android.com/reference/android/widget/listview.html Creating a ListView A ListView is a
More informationCreating a User Interface
Creating a User Interface Developing for Android devices is a complicated process that requires precision to work with. Android runs on numerous devices from smart-phones to tablets. Instead of using a
More informationHello World. Lesson 1. Android Developer Fundamentals. Android Developer Fundamentals. Layouts, and. NonCommercial
Hello World Lesson 1 This work is licensed This under work a Creative is is licensed Commons under a a Attribution-NonCommercial Creative 4.0 Commons International Attribution- License 1 NonCommercial
More informationAndroid App Development. Mr. Michaud ICE Programs Georgia Institute of Technology
Android App Development Mr. Michaud ICE Programs Georgia Institute of Technology Android Operating System Created by Android, Inc. Bought by Google in 2005. First Android Device released in 2008 Based
More informationA view is a widget that has an appearance on screen. A view derives from the base class android.view.view.
LAYOUTS Views and ViewGroups An activity contains Views and ViewGroups. A view is a widget that has an appearance on screen. A view derives from the base class android.view.view. One or more views can
More informationProgramming with Android: Introduction. Layouts. Luca Bedogni. Dipartimento di Informatica: Scienza e Ingegneria Università di Bologna
Programming with Android: Introduction Layouts Luca Bedogni Dipartimento di Informatica: Scienza e Ingegneria Uniersità di Bologna Views: outline Main difference between a Drawable and a View is reaction
More informationProduced by. Mobile Application Development. David Drohan Department of Computing & Mathematics Waterford Institute of Technology
Mobile Application Development Produced by David Drohan (ddrohan@wit.ie) Department of Computing & Mathematics Waterford Institute of Technology http://www.wit.ie User Interface Design" & Development -
More informationFragments. Lecture 11
Fragments Lecture 11 Situational layouts Your app can use different layouts in different situations Different device type (tablet vs. phone vs. watch) Different screen size Different orientation (portrait
More informationChapter 8 Positioning with Layouts
Introduction to Android Application Development, Android Essentials, Fifth Edition Chapter 8 Positioning with Layouts Chapter 8 Overview Create user interfaces in Android by defining resource files or
More informationMobile Software Development for Android - I397
1 Mobile Software Development for Android - I397 IT COLLEGE, ANDRES KÄVER, 2015-2016 EMAIL: AKAVER@ITCOLLEGE.EE WEB: HTTP://ENOS.ITCOLLEGE.EE/~AKAVER/2015-2016/DISTANCE/ANDROID SKYPE: AKAVER Layout fundamentals
More informationLaying Out Controls in Containers
CHAPTER 3 Laying Out Controls in Containers A container is a view used to contain other views. Android offers a collection of view classes that act as containers for views. These container classes are
More informationPraktikum Entwicklung Mediensysteme. Implementing a User Interface
Praktikum Entwicklung Mediensysteme Implementing a User Interface Outline Introduction Programmatic vs. XML Layout Common Layout Objects Hooking into a Screen Element Listening for UI Notifications Applying
More informationAndroid User Interface
Android Smartphone Programming Matthias Keil Institute for Computer Science Faculty of Engineering 20. Oktober 2014 Outline 1 Android User Interface 2 Multi-Language Support 3 Summary Matthias Keil Android
More informationMobile Programming Lecture 2. Layouts, Widgets, Toasts, and Event Handling
Mobile Programming Lecture 2 Layouts, Widgets, Toasts, and Event Handling Lecture 1 Review How to edit XML files in Android Studio? What holds all elements (Views) that appear to the user in an Activity?
More informationFragments. Lecture 10
Fragments Lecture 10 Situa2onal layouts Your app can use different layouts in different situa2ons Different device type (tablet vs. phone vs. watch) Different screen size Different orienta2on (portrait
More informationCSE 660 Lab 3 Khoi Pham Thanh Ho April 19 th, 2015
CSE 660 Lab 3 Khoi Pham Thanh Ho April 19 th, 2015 Comment and Evaluation: This lab introduces us about Android SDK and how to write a program for Android platform. The calculator is pretty easy, everything
More informationAndroid User Interface Android Smartphone Programming. Outline University of Freiburg
Android Smartphone Programming Matthias Keil Institute for Computer Science Faculty of Engineering 20. Oktober 2014 Outline 1 2 Multi-Language Support 3 Summary Matthias Keil 20. Oktober 2014 2 / 19 From
More informationFragment Example Create the following files and test the application on emulator or device.
Fragment Example Create the following files and test the application on emulator or device. File: AndroidManifest.xml
More informationMobile Application Development Android
Mobile Application Development Android Lecture 2 MTAT.03.262 Satish Srirama satish.srirama@ut.ee Android Lecture 1 -recap What is Android How to develop Android applications Run & debug the applications
More informationMobile Application Development Lab [] Simple Android Application for Native Calculator. To develop a Simple Android Application for Native Calculator.
Simple Android Application for Native Calculator Aim: To develop a Simple Android Application for Native Calculator. Procedure: Creating a New project: Open Android Stdio and then click on File -> New
More informationEMBEDDED SYSTEMS PROGRAMMING Application Tip: Managing Screen Orientation
EMBEDDED SYSTEMS PROGRAMMING 2016-17 Application Tip: Managing Screen Orientation ORIENTATIONS Portrait Landscape Reverse portrait Reverse landscape ON REVERSE PORTRAIT Android: all four orientations are
More informationMobile User Interfaces
Mobile User Interfaces CS 2046 Mobile Application Development Fall 2010 Announcements Next class = Lab session: Upson B7 Office Hours (starting 10/25): Me: MW 1:15-2:15 PM, Upson 360 Jae (TA): F 11:00
More informationMore Effective Layouts
More Effective Layouts In past weeks, we've looked at ways to make more effective use of the presented display (e.g. elastic layouts, and separate layouts for portrait and landscape), as well as autogenerating
More informationAndroid Application Development
Android Application Development Octav Chipara What is Android A free, open source mobile platform A Linux-based, multiprocess, multithreaded OS Android is not a device or a product It s not even limited
More informationCS 4330/5390: Mobile Application Development Exam 1
1 Spring 2017 (Thursday, March 9) Name: CS 4330/5390: Mobile Application Development Exam 1 This test has 8 questions and pages numbered 1 through 7. Reminders This test is closed-notes and closed-book.
More informationCS371m - Mobile Computing. User Interface Basics
CS371m - Mobile Computing User Interface Basics Clicker Question Have you ever implemented a Graphical User Interface (GUI) as part of a program? A. Yes, in another class. B. Yes, at a job or internship.
More informationUser Interface: Layout. Asst. Prof. Dr. Kanda Runapongsa Saikaew Computer Engineering Khon Kaen University
User Interface: Layout Asst. Prof. Dr. Kanda Runapongsa Saikaew Computer Engineering Khon Kaen University http://twitter.com/krunapon Agenda User Interface Declaring Layout Common Layouts User Interface
More informationMobile Development Lecture 10: Fragments
Mobile Development Lecture 10: Fragments Mahmoud El-Gayyar elgayyar@ci.suez.edu.eg Elgayyar.weebly.com Situational Layouts Your app can use different layout in different situations: different device type
More informationOverview. What are layouts Creating and using layouts Common layouts and examples Layout parameters Types of views Event listeners
Layouts and Views http://developer.android.com/guide/topics/ui/declaring-layout.html http://developer.android.com/reference/android/view/view.html Repo: https://github.com/karlmorris/viewsandlayouts Overview
More informationAndroid Layout Types
Android Layout Types Android Linear Layout Android LinearLayout is a view group that aligns all children in either vertically or horizontally. android:divider - This is drawable to use as a vertical divider
More informationEMBEDDED SYSTEMS PROGRAMMING Application Tip: Saving State
EMBEDDED SYSTEMS PROGRAMMING 2016-17 Application Tip: Saving State THE PROBLEM How to save the state (of a UI, for instance) so that it survives even when the application is closed/killed The state should
More informationAndroid Specifics. Jonathan Diehl (Informatik 10) Hendrik Thüs (Informatik 9)
Android Specifics Jonathan Diehl (Informatik 10) Hendrik Thüs (Informatik 9) Android Specifics ArrayAdapter Preferences Widgets Jonathan Diehl, Hendrik Thüs 2 ArrayAdapter Jonathan Diehl, Hendrik Thüs
More information04. Learn the basic widget. DKU-MUST Mobile ICT Education Center
04. Learn the basic widget DKU-MUST Mobile ICT Education Center Goal Understanding of the View and Inheritance of View. Learn how to use the default widget. Learn basic programming of the Android App.
More informationCS371m - Mobile Computing. More UI Action Bar, Navigation, and Fragments
CS371m - Mobile Computing More UI Action Bar, Navigation, and Fragments ACTION BAR 2 Options Menu and Action Bar prior to Android 3.0 / API level 11 Android devices required a dedicated menu button Pressing
More informationGetting Started. Dr. Miguel A. Labrador Department of Computer Science & Engineering
Getting Started Dr. Miguel A. Labrador Department of Computer Science & Engineering labrador@csee.usf.edu http://www.csee.usf.edu/~labrador 1 Goals Setting up your development environment Android Framework
More informationFragments. Fragments may only be used as part of an ac5vity and cannot be instan5ated as standalone applica5on elements.
Fragments Fragments A fragment is a self- contained, modular sec5on of an applica5on s user interface and corresponding behavior that can be embedded within an ac5vity. Fragments can be assembled to create
More informationCS378 -Mobile Computing. User Interface Basics
CS378 -Mobile Computing User Interface Basics User Interface Elements View Control ViewGroup Layout Widget (Compound Control) Many pre built Views Button, CheckBox, RadioButton TextView, EditText, ListView
More informationUI (User Interface) overview Supporting Multiple Screens Touch events and listeners
http://www.android.com/ UI (User Interface) overview Supporting Multiple Screens Touch events and listeners User Interface Layout The Android user interface (UI) consists of screen views (one or more viewgroups
More informationCS371m - Mobile Computing. More UI Navigation, Fragments, and App / Action Bars
CS371m - Mobile Computing More UI Navigation, Fragments, and App / Action Bars EFFECTIVE ANDROID NAVIGATION 2 Clicker Question Have you heard of the terms Back and Up in the context of Android Navigation?
More informationProduced by. Mobile Application Development. Eamonn de Leastar
Mobile Application Development Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie A First
More informationANDROID APPS DEVELOPMENT FOR MOBILE GAME
ANDROID APPS DEVELOPMENT FOR MOBILE GAME Application Components Hold the content of a message (E.g. convey a request for an activity to present an image) Lecture 2: Android Layout and Permission Present
More informationWhen programming in groups of people, it s essential to version the code. One of the most popular versioning tools is git. Some benefits of git are:
ETSN05, Fall 2017, Version 1.0 Software Development of Large Systems Lab 2 preparations Read through this document carefully. In order to pass lab 2, you will need to understand the topics presented in
More informationAndroid UI Development
Android UI Development Android UI Studio Widget Layout Android UI 1 Building Applications A typical application will include: Activities - MainActivity as your entry point - Possibly other activities (corresponding
More informationExternal Services. CSE 5236: Mobile Application Development Course Coordinator: Dr. Rajiv Ramnath Instructor: Adam C. Champion
External Services CSE 5236: Mobile Application Development Course Coordinator: Dr. Rajiv Ramnath Instructor: Adam C. Champion 1 External Services Viewing websites Location- and map-based functionality
More informationArrays of Buttons. Inside Android
Arrays of Buttons Inside Android The Complete Code Listing. Be careful about cutting and pasting.
More informationStarting Another Activity Preferences
Starting Another Activity Preferences Android Application Development Training Xorsat Pvt. Ltd www.xorsat.net fb.com/xorsat.education Outline Starting Another Activity Respond to the Button Create the
More informationSizing and Positioning
CS 193A Layout This document is copyright (C) Marty Stepp and Stanford Computer Science. Licensed under Creative Commons Attribution 2.5 License. All rights reserved. Sizing and Positioning How does the
More informationProgramming with Android: Android for Tablets. Dipartimento di Scienze dell Informazione Università di Bologna
Programming with Android: Android for Tablets Luca Bedogni Marco Di Felice Dipartimento di Scienze dell Informazione Università di Bologna Outline Android for Tablets: A Case Study Android for Tablets:
More informationMVC Apps Basic Widget Lifecycle Logging Debugging Dialogs
Overview MVC Apps Basic Widget Lifecycle Logging Debugging Dialogs Lecture: MVC Model View Controller What is an App? Android Activity Lifecycle Android Debugging Fixing Rotations & Landscape Layouts Localization
More informationIntents. Your first app assignment
Intents Your first app assignment We will make this. Decidedly lackluster. Java Code Java Code XML XML Preview XML Java Code Java Code XML Buttons that work
More informationBuilding User Interface for Android Mobile Applications II
Building User Interface for Android Mobile Applications II Mobile App Development 1 MVC 2 MVC 1 MVC 2 MVC Android redraw View invalidate Controller tap, key pressed update Model MVC MVC in Android View
More informationAndroid Basics. Android UI Architecture. Android UI 1
Android Basics Android UI Architecture Android UI 1 Android Design Constraints Limited resources like memory, processing, battery à Android stops your app when not in use Primarily touch interaction à
More informationAction Bar. (c) 2010 Haim Michael. All Rights Reserv ed.
Action Bar Introduction The Action Bar is a widget that is shown on top of the screen. It includes the application logo on its left side together with items available from the options menu on the right.
More informationMobile Computing Practice # 2c Android Applications - Interface
Mobile Computing Practice # 2c Android Applications - Interface One more step in the restaurants application. 1. Design an alternative layout for showing up in landscape mode. Our current layout is not
More informationGraphical User Interfaces
Graphical User Interfaces Some suggestions Avoid displaying too many things Well-known anti-patterns Display useful content on your start screen Use action bars to provide consistent navigation Keep your
More informationAndroid development. Outline. Android Studio. Setting up Android Studio. 1. Set up Android Studio. Tiberiu Vilcu. 2.
Outline 1. Set up Android Studio Android development Tiberiu Vilcu Prepared for EECS 411 Sugih Jamin 15 September 2017 2. Create sample app 3. Add UI to see how the design interface works 4. Add some code
More informationIntroductory Android Development
Introductory Android Development 152-163 Notes Quick Links & Text References Introduction Pages Layout Concepts Pages Layout Types Pages 35 37 XML Overview Pages Common Attributes Layout Height & Width
More informationAdaptation of materials: dr Tomasz Xięski. Based on presentations made available by Victor Matos, Cleveland State University.
Creating dialogs Adaptation of materials: dr Tomasz Xięski. Based on presentations made available by Victor Matos, Cleveland State University. Portions of this page are reproduced from work created and
More informationAndroid CardView Tutorial
Android CardView Tutorial by Kapil - Wednesday, April 13, 2016 http://www.androidtutorialpoint.com/material-design/android-cardview-tutorial/ YouTube Video We have already discussed about RecyclerView
More informationO X X X O O X O X. Tic-Tac-Toe. 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 2: The Ultimate Tic-Tac-Toe Game
Tic-Tac-Toe 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 2: The Ultimate Tic-Tac-Toe Game Dr Dimitris C. Dracopoulos O X X X O O X O X The Ultimate Tic-Tac-Toe: Rules of the Game Dimitris C. Dracopoulos
More informationandroid:orientation="horizontal" android:layout_margintop="30dp"> <Button android:text="button2"
Parametrų keitimas veikiančioje aplikacijoje Let s create a project: Project name: P0181_DynamicLayout3 Build Target: Android 2.3.3 Application name: DynamicLayout3 Package name: ru.startandroid.develop.dynamiclayout3
More informationCS 4518 Mobile and Ubiquitous Computing Lecture 2: Introduction to Android Programming. Emmanuel Agu
CS 4518 Mobile and Ubiquitous Computing Lecture 2: Introduction to Android Programming Emmanuel Agu Android Apps: Big Picture UI Design using XML UI design code (XML) separate from the program (Java) Why?
More informationAndroid Workshop: Model View Controller ( MVC):
Android Workshop: Android Details: Android is framework that provides java programmers the ability to control different aspects of smart devices. This interaction happens through the Android SDK (Software
More informationActivities and Fragments
Activities and Fragments 21 November 2017 Lecture 5 21 Nov 2017 SE 435: Development in the Android Environment 1 Topics for Today Activities UI Design and handlers Fragments Source: developer.android.com
More informationCreating a Custom ListView
Creating a Custom ListView References https://developer.android.com/guide/topics/ui/declaring-layout.html#adapterviews Overview The ListView in the previous tutorial creates a TextView object for each
More informationelse if(rb2.ischecked()) {
Problem :Toy Calculator Description:Please design an Android application that contains 2 activities: cal_main and cal_result. The following figure is a suggested layout for the cal_main activity. For the
More informationThe drawable/tile empty.xml file
The X and O Symbols 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 3: Ultimate Tic-Tac-Toe Game: The Interface Dr Dimitris C. Dracopoulos Create them with the filenames x blue.png and o red.png in an
More informationANDROID APPS DEVELOPMENT FOR MOBILE AND TABLET DEVICE (LEVEL I)
ANDROID APPS DEVELOPMENT FOR MOBILE AND TABLET DEVICE (LEVEL I) Application Components Hold the content of a message (E.g. convey a request for an activity to present an image) Lecture 2: Android Programming
More informationTopics of Discussion
Reference CPET 565 Mobile Computing Systems CPET/ITC 499 Mobile Computing Fragments, ActionBar and Menus Part 3 of 5 Android Programming Concepts, by Trish Cornez and Richard Cornez, pubslihed by Jones
More informationComparative Study on Layout and Drawable Resource Behavior in Android for Supporting Multi Screen
International Journal of Innovative Research in Computer Science & Technology (IJIRCST) ISSN: 2347-5552, Volume 2, Issue 3, May - 2014 Comparative Study on Layout and Drawable Resource Behavior in Android
More informationAndroid. YÉÇàá. Victor Matos Cleveland State University
Lesson 9 Android YÉÇàá Victor Matos Cleveland State University Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons
More informationScreen Slides. The Android Studio wizard adds a TextView to the fragment1.xml layout file and the necessary code to Fragment1.java.
Screen Slides References https://developer.android.com/training/animation/screen-slide.html https://developer.android.com/guide/components/fragments.html Overview A fragment can be defined by a class and
More informationFRAGMENTS.
Fragments 69 FRAGMENTS In the previous section you learned what an activity is and how to use it. In a small-screen device (such as a smartphone), an activity typically fi lls the entire screen, displaying
More informationAndroid Beginners Workshop
Android Beginners Workshop at the M O B IL E M O N D AY m 2 d 2 D E V E L O P E R D A Y February, 23 th 2010 Sven Woltmann, AndroidPIT Sven Woltmann Studied Computer Science at the TU Ilmenau, 1994-1999
More informationPROGRAMMING APPLICATIONS DECLARATIVE GUIS
PROGRAMMING APPLICATIONS DECLARATIVE GUIS DIVING RIGHT IN Eclipse? Plugin deprecated :-( Making a new project This keeps things simple or clone or clone or clone or clone or clone or clone Try it
More informationCOMP4521 EMBEDDED SYSTEMS SOFTWARE
COMP4521 EMBEDDED SYSTEMS SOFTWARE LAB 1: DEVELOPING SIMPLE APPLICATIONS FOR ANDROID INTRODUCTION Android is a mobile platform/os that uses a modified version of the Linux kernel. It was initially developed
More informationCS 234/334 Lab 1: Android Jump Start
CS 234/334 Lab 1: Android Jump Start Distributed: January 7, 2014 Due: Friday, January 10 or Monday, January 13 (in-person check off in Mobile Lab, Ry 167). No late assignments. Introduction The goal of
More information(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 1
Level 5: Baccalaureus in Computer Sciences CHAPTER 4: LAYOUTS AND VIEWS Dr. Sonia Saïd LAJMI PhD in Computer Sciences 1 Layout.xml 2 Computer Sciences & IT (girl Section) 1 Layout Requirements android:layout_width:
More informationCS 528 Mobile and Ubiquitous Computing Lecture 2a: Introduction to Android Programming. Emmanuel Agu
CS 528 Mobile and Ubiquitous Computing Lecture 2a: Introduction to Android Programming Emmanuel Agu Editting in Android Studio Recall: Editting Android Can edit apps in: Text View: edit XML directly Design
More informationStanislav Rost CSAIL, MIT
Session 2: Lifecycles, GUI Stanislav Rost CSAIL, MIT The Plan 1 Activity lifecycle Service lifecycle 2 Selected GUI elements UI Layouts 3 Hands on assignment: RoboChat Application GUI Design Birth, death,
More information14.1 Overview of Android
14.1 Overview of Android - Blackberry smart phone appeared in 2003 First widely used mobile access to the Web - Smart phone market now dominated by Android, iphone, and Windows Phone - Tablets are now
More informationCS 528 Mobile and Ubiquitous Computing Lecture 2a: Android UI Design in XML + Examples. Emmanuel Agu
CS 528 Mobile and Ubiquitous Computing Lecture 2a: Android UI Design in XML + Examples Emmanuel Agu Android UI Design in XML Recall: Files Hello World Android Project XML file used to design Android UI
More informationJava & Android. Java Fundamentals. Madis Pink 2016 Tartu
Java & Android Java Fundamentals Madis Pink 2016 Tartu 1 Agenda» Brief background intro to Android» Android app basics:» Activities & Intents» Resources» GUI» Tools 2 Android» A Linux-based Operating System»
More informationEECS 4443 Mobile User Interfaces. More About Layouts. Scott MacKenzie. York University. Overview (Review)
EECS 4443 Mobile User Interfaces More About Layouts Scott MacKenzie York University Overview (Review) A layout defines the visual structure for a user interface, such as the UI for an activity or app widget
More informationLayout and Containers
Geez, that title is freakin' huge. Layout and Containers This week, we'll mostly just be looking at how to better-arrange elements. That will include our first introduction into managed resources (even
More informationDiving into Android. By Jeroen Tietema. Jeroen Tietema,
Diving into Android By Jeroen Tietema Jeroen Tietema, 2015 1 Requirements 4 Android SDK 1 4 Android Studio (or your IDE / editor of choice) 4 Emulator (Genymotion) or a real device. 1 See https://developer.android.com
More informationUsing Eclipse for Android Development
3 Using Eclipse for Android Development This chapter is an introduction to building a complete Android app. The chapter includes creating a new app project, exploring the components of an Android app,
More informationEmbedded Systems Programming - PA8001
Embedded Systems Programming - PA8001 http://goo.gl/ydeczu Lecture 9 Mohammad Mousavi m.r.mousavi@hh.se Center for Research on Embedded Systems School of Information Science, Computer and Electrical Engineering
More information