Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Mobile Computing GUI (Graphical User Interface) Assg 1 Copyright 2014 by Janson Industries Objectives ▀ Learn about: Building a GUI using XML Using basic GUI components and listeners Casting An Android project’s internal structure Publishing device Copyright 2014 by Janson Industries an app to your mobile 2 Resources ▀ The other “things” that comprise the Android app Pictures Values Text files Screen ▀ Copyright 2014 by Janson Industries definitions Screen definitions can be defined programmatically using java or in a separate file using XML 3 Java vs. XML ▀ Which way is better? XML If using java, must run java program to see UI If screen used by many programs, best to define once in XML Most apps (98%?) use XML Most help will discuss XML not java If multiple UIs (tablet, phone), system will select best XML defined UI for device There Copyright 2014 by Janson Industries are GUI tools to generate and 4 view the XML screen definition XML ▀ Extensible Markup Language Basically ▀ Can do a lot more than just layouts As ▀ the duct tape of apps you will see later in the course Like HTML comprised mostly of paired tags 5 Copyright 2014 by Janson Industries Screen Definition Stored in a separate file in res/layout All XML files begin with a declaration of the xml version and encoding as follows <?xml version="1.0" encoding=“UTF-8"?> There’s actually only one version of XML but in the future that may not be true Also, XML parsers are supposed to reject any file without it Copyright 2014 by Janson Industries 6 Screen Definition Encoding identifies the character set being used UTF means Unicode Next a layout is specified using layout tags A layout defines how the individual GUI components will be positioned on the screen Copyright 2014 by Janson Industries All GUI component definitions are within the layout tags 7 Layouts Lots of different kinds TableLayout, FrameLayout, RelativeLayout A LinearLayout organizes the screen into a series of bands Good resource for more info: http://code.tutsplus.com/tutorials/android-sdk-user-interface-design--mobile-20323 8 Copyright 2014 by Janson Industries LinearLayout In the layout start tag must identify the XML name space (xmlns) The location of predefined XML elements and attributes i.e. The name space contains the definitions of a button, text view, etc. Also, gives the namespace an alias. E.g.: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" The Copyright 2014 by Janson Industries alias is android 9 LinearLayout The screen definition can now use any of the attributes or elements in the namespace For example, the layout’s Orientation Width, Height Background Color (black) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" 10 android:background="#000000"> Copyright 2014 by Janson Industries LinearLayout Vertical means the layout bands will be arranged from top to bottom: Fill parent means it will take up the whole screen width or height Need an end LinearLayout tag </LinearLayout> Copyright 2014 by Janson Industries 11 GUI Components All the GUI components (aka views, widgets, or controls) go between the start and end layout tags A TextView displays static text <TextView android:layout_width="fill_parent" android:layout_height=“fill_parent" android:text="This is an example of some static text that is more than one line in length“ android:textSize = ".25in" android:textColor=“#ffffff” /> 12 Copyright 2014 by Janson Industries GUI Components Once again, width and height declared, this time based on layout size (i.e. parent) Foreground color (white) and size defined with textColor & textSize <TextView android:layout_width="fill_parent" android:layout_height=“fill_parent" android:text="This is an example of some static text that is more than one line in length“ android:textSize = ".25in" android:textColor=“#ffffff” /> 13 Copyright 2014 by Janson Industries GUI Components Putting all the XML together <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#000000" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="This is an example of some static text that is more than one line in length“ android:textSize = ".25in" android:textColor="#ffffff" /> </LinearLayout> 14 Copyright 2014 by Janson Industries GUI As mentioned, screen definition must be stored in a file in res/layout Create a file called example1.xml Enter the XML 15 Copyright 2014 by Janson Industries File , New, File 16 Copyright 2014 by Janson Industries Initially brings up a Graphical Layout editor – not very good Copyright 2014 by Janson Industries Switch to source code view 17 Enter XML (from earlier slide – beware copying quotation marks!) and error icons displayed Save source code and error icons will be removed 18 Copyright 2014 by Janson Industries Will flag the text statement with a warning. (Yield sign with ! and statement underlined with yellow squiggly.) Warnings won’t stop app from executing. However, defining text/strings in xml or java code is frowned on by Android/Eclipse because of redundancy. Have to update the application to display example1.xml 19 Copyright 2014 by Janson Industries GUI In HowdyActivity’s onStart need to put the following statement setContentView(R.layout.example1); As the name implies, setContentView displays the screen HowdyActivity inherited setContentView from Activity Copyright 2014 by Janson Industries R is a class that is generated when the XML is compiled 20 GUI Within R is a class called layout (which corresponds to the folder layout) Within layout is a “link” to the compiled XML (example1) Need to modify onStart (in HowdyActivity) as follows protected void onStart(){ super.onStart(); setContentView(R.layout.example1); } Copyright 2014 by Janson Industries 21 Run the app Now you do it! 22 Copyright 2014 by Janson Industries Input To Application A little more complicated An EditText view allows user to enter and change text EditText content can be read by app <EditText android:id=”@+id/userName” android:layout_width=”fill_parent” android:layout_height=”fill_parent” /> 23 Copyright 2014 by Janson Industries Input To App Width and height the same as before id is new attribute Defines a name for the view Need to be able to identify the view so we can read it <EditText android:id=”@+id/userName” android:layout_width=”fill_parent” android:layout_height=”fill_parent” /> 24 Copyright 2014 by Janson Industries Input to App Will change TextView also <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:background="#000000" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height= "wrap_content" android:text="What is your name? " android:textSize = ".25in" android:textColor="#ffffff"/> <EditText android:id= "@+id/userName" android:textColor="#ffffff" android:layout_width= "fill_parent" android:layout_height= "wrap_content" /> Copyright 2014 </LinearLayout> by Janson Industries 25 We changed the height so that the EditText doesn’t fill the whole screen from top to bottom Now when run looks like this 26 Copyright 2014 by Janson Industries Input to App ▀ To read EditText, need to: Import the EditText class ► import Define android.widget.EditText; an EditText class level variable ► EditText name; Retrieve the EditText (userName) and assign it to name ► name = (EditText)findViewById(R.id.userName); • findViewById inherited from Activity Retrieve the text ► name.getText() Copyright 2014 by Janson Industries • EditText has a method called getText 27 Input to App ▀ The read will be done in the onRestart method and we will display the name in LogCat 28 Copyright 2014 by Janson Industries Run app, specify a name then stop app by clicking the home button 29 Copyright 2014 by Janson Industries Input to App ▀ ▀ Rerun app (to restart it) Kind of a round about way to do the read (stopping and rerunning the app) 30 Copyright 2014 by Janson Industries HowdyActivity ▀ Want to change app such: User enters a name User clicks a button Info ▀ displayed in the textview Will need a button tied to a listener to make this happen 31 Copyright 2014 by Janson Industries Like this… 32 Copyright 2014 by Janson Industries Msg displayed and name blanked out 33 Copyright 2014 by Janson Industries Listener ▀ ▀ A java class that reacts to an action Some components can be tied to a listener. Can do this: Programmatically In ▀ using Java the screen def using XML Which way is better? Well, the XML is much simpler! 34 Copyright 2014 by Janson Industries Listeners ▀ When an action is performed on the component (e.g. it is clicked), the listener is invoked Specifically, a particular method in the listener (e.g. onClick) is invoked 35 Copyright 2014 by Janson Industries Listeners ▀ In XML: Change the initial text in the TextView To be able to change the content of the TextView, it needs an id <TextView android:id="@+id/greeting" android:text="Enter your name and click Submit " Add a button under the EditText <Button android:id= "@+id/submit" android:layout_width= "fill_parent" android:layout_height= "wrap_content" android:text= "Submit" /> 36 Copyright 2014 by Janson Industries The XML 37 Copyright 2014 by Janson Industries Listeners - Java Implementation ▀ ▀ For a class to be a listener: Must implement OnClickListener Have an onClick method So, in HowdyActivity must Implement listener in the class header …extends Activity implements OnClickListener{ Create an onClick method public void onClick(View v) {} 38 Copyright 2014 by Janson Industries Listeners onClick will: ► put text in the TextView and work with the button, so need to add these imports import import import import ► get android.view.View; android.view.View.OnClickListener; android.widget.TextView; android.widget.Button; the TextView and EditText objects name = (EditText)findViewById(R.id.userName); TextView greeting = (TextView)findViewById(R.id.greeting); ► get name from EditText, build msg, set TextView text to msg greeting.setText("Hi " + name.getText() + ". Nice to meet you."); 39 Copyright 2014 by Janson Industries Listeners ► Blank out the name in the EditText name.setText(""); In onStart, retrieve the button object and tie the listener (this object, aka HowdyActivity) to the button Button button = (Button)findViewById(R.id.submit); button.setOnClickListener(this); 40 Copyright 2014 by Janson Industries 41 Copyright 2014 by Janson Industries Run app, notice new text and the button 42 Copyright 2014 by Janson Industries Enter a name and click the Submit button 43 Copyright 2014 by Janson Industries New msg displayed and name blanked out 44 Copyright 2014 by Janson Industries XML Implementation ▀ In XML button definition, specify the method to call when clicked android:onClick="submitClicked" ▀ Define submitClicked method to perform onClick functions public void submitClicked(View v){ greeting.setText("Hi " + name.getText() + ". Nice to meet you."); name.setText(""); } 45 Copyright 2014 by Janson Industries XML File 46 Copyright 2014 by Janson Industries Commented out Added code Commented out Added code Commented out 47 Copyright 2014 by Janson Industries How Does This Work? ▀ (EditText)findViewById(R.id.userName); brings up a couple of topics Primitive Variables Casting ► Converting from a larger/general type to a smaller/more specific type Internal structure of an Android project ► gen ► assets ► bin ► res Copyright 2014 by Janson Industries 48 Primitive Variable Types ▀ boolean: true or false (default is false) ▀ char: single character, use single quotes ▀ byte: 8 bit whole number (-128 to 127) ▀ short: 16 bit whole number (32,767 max) ▀ int: 32 bit whole number (2**31 max) ▀ long: 64 bit whole number ▀ float: floating point (7 decimal place max) ▀ double: double precision (15 dec places) 49 Copyright 2014 by Janson Industries Primitive Variable Name Rules ▀ Must begin with a character Traditionally a lower case character ▀ Can be made of letters, numbers, _, or $ ▀ No Special characters (%, #, @, etc.) Spaces Reserved ▀ words (char, byte, class, etc.) Are case sensitive!! age and aGe are two different variables 50 Copyright 2014 by Janson Industries Defining and Assigning ▀ Primitive data type then variable name int numberOfDependents; char gender, maritalStatus; ▀ A value can be assigned when the variable is declared: float ▀ taxRate = .28; Or a value can be assigned later: numberOfDependents Copyright 2014 by Janson Industries = 2; 51 Primitive Variable Types ▀ Defining and assigning values very similar to String variables boolean married = true, genderMale = false; int age = 22; float weeklySalary = 1285.75; ▀ ▀ Notice, no quotes around values or thousands separator Easy to assign the value in a smaller variable type to a larger variable type weeklySalary = age; Copyright 2014 by Janson Industries 52 Casting ▀ ▀ To assign the value in a larger variable type to a smaller variable type you must cast the larger variable type into the smaller type General syntax: smallerVariable = (smallerVariableType) largerVariable ▀ So to move weeklySalary into age: age = (int) weeklySalary; ▀ Problem: age now equals 1285 53 Copyright 2014 by Janson Industries Casting Primitive Types ▀ Other examples: long a; int b = 1; char c = ‘2’; b = (int)a; c = (char)b; 54 Copyright 2014 by Janson Industries Casting ▀ Earlier we talked about how all classes are related Object View TextView EditText ▀ View is a subclass of Object, TextView is a subclass of View, etc. 55 Copyright 2014 by Janson Industries Casting ▀ ▀ ▀ Another way to say it that View is a more specific type of Object, TextView is a more specific type of View, etc. When findViewById returns the GUI component we requested, it is returned as a View For us to access the TextView or EditText, we have to cast the View into the more specific type 56 Copyright 2014 by Janson Industries Casting ▀ ▀ ▀ (EditText)findViewById(R.id.userName); In this example the returned View is cast as an EditText (and should be assigned to an EditText variable) So to access all of the retrieved GUI component’s functions, the returned View has to be cast into the subclass type 57 Copyright 2014 by Janson Industries Android Project Structure ▀ ▀ gen – a package containing AAPT (Android Asset Packaging Tool) generated java code assets – folder to hold any type of resource/file Supports ▀ ▀ bin – holds class files & resources in a specific structure for app installation res – folder to hold specific resources like images and layouts Does Copyright 2014 by Janson Industries subfolders not support subfolders 58 Android Project Structure ▀ ▀ Will talk more about res when working with images Two things we do need to cover values R.java ▀ values, in res, holds application wide values (colors, dimensions, fonts, etc.) Instead of defining values in java, define them once in a file in values Adv: can change values without recompiling java code Copyright 2014 by Janson Industries 59 Android Project Structure ▀ For example strings.xml Instead of defining String objects and assigning text in various java classes define them with xml in strings.xml ▀ When app created, strings.xml generated with the following 3 strings defined <resources> <string name="app_name">Howdy</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string> </resources> 60 Copyright 2014 by Janson Industries Android Project Structure ▀ Notice that the default screen definition, activity_howdy, references hello_world and dimension values <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".HowdyActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> 61 </RelativeLayout> Copyright 2014 by Janson Industries Android Project Structure ▀ Advantages to values: Defined ► Takes one time therefore: up less space ► Updating ► Less faster chance of errors when updating Defined in xml therefore no need to recompile java code when making changes 62 Copyright 2014 by Janson Industries Android Project Structure ▀ ▀ How to reference the resources in res in java programs is a little complicated This is where R.java comes in R.java stored in a package with the same name as the app package in the folder gen Generated by AAPT when application built (and when changes are made) ▀ Copyright 2014 by Janson Industries R contains the project ids of all objects defined in res 63 Android Project Structure ▀ All resources in res are compiled Converted into binary and packaged so they can be loaded on a device ▀ Each resource is given a unique project id For each resource in res, an int variable is created (with the same name as the resource) in R.java The resource project id is assigned to the int variable ▀ Copyright 2014 by Janson Industries The int variables are grouped (by type) into inner classes within R.java 64 ▀ To refer to a resource specify R, then the inner class name, then the variable name 65 Copyright 2014 by Janson Industries Android Project Structure ▀ ▀ ▀ (EditText)findViewById(R.id.userName); Which is how we referred to the EditText in the above Again, in an XML layout definition, when @+id/xxxx is specified for a view: ▀ ▀ ▀ Copyright 2014 by Janson Industries A project id is generated An int variable named xxxx is created in the id inner class The project id is assigned to the int variable xxxx 66 How Does This Work? name = (EditText)findViewById(R.id.userName); greeting = (TextView)findViewById(R.id.greeting); ▀ ▀ Copyright 2014 by Janson Industries To work with the screen views we have to retrieve them and assign them to variables in the activity findViewById (inherited from Activity) retrieves the object for the project id number in the int variable 67 How Does This Work? name = (EditText)findViewById(R.id.userName); greeting = (TextView)findViewById(R.id.greeting); ▀ ▀ Unfortunately the system returns the components as View objects So we need to cast from the more general object type (View) to the more specific object type (EditText, TextView, etc.) 68 Copyright 2014 by Janson Industries View Properties ▀ Instead of setting a view’s width to fill_parent, can specify wrap_content android:layout_width="wrap_content" ▀ Since the view doesn’t fill the parent, can specify the gravity (justification) android:layout_gravity="center" 69 Copyright 2014 by Janson Industries 70 Copyright 2014 by Janson Industries EditText and Button sizes dictated by its text content 71 Copyright 2014 by Janson Industries View Attributes ▀ height – view set to a specific size ▀ textColor ▀ textSize ▀ textStyle - (bold, italic) ▀ width – view set to specific size ▀ Sizes can be specified many ways px Copyright 2014 by Janson Industries - Pixels in – Inches mm – Millimeters dp – Density-independant Pixels (preferred) 72 73 Copyright 2014 by Janson Industries 74 Copyright 2014 by Janson Industries Input Accepting Views ▀ digits – only specified numeric characters can be entered (digits=“135”) ▀ hint – defines text for view when empty ▀ inputType textAutoCorrect number phone –corrects some misspellings – only numeric characters allowed - only phone keypad characters allowed date – only date chars (numbers, /, ., -) time – only time chars (numbers, :, a, p, m) 75 Copyright 2014 by Janson Industries Hint default color is gray – doesn't show up on black background – so have to set it to a color that will show 76 Copyright 2014 by Janson Industries 77 Copyright 2014 by Janson Industries Enter adn and then… 78 Copyright 2014 by Janson Industries … enter a space 79 Copyright 2014 by Janson Industries 80 Copyright 2014 by Janson Industries Initial display, click on EditText and type and 81 Copyright 2014 by Janson Industries All letters converted to numbers according to a phone keypad No delete, only backspace allowed 82 Copyright 2014 by Janson Industries However none of these options can prevent all nonsense input 83 Copyright 2014 by Janson Industries Installing on a Device ▀ ▀ ▀ Have to enable USB debugging On the device, go to Settings, Scroll down to SYSTEM and click Developer Options On an Android 4.0 device, may have to turn Developer options on 84 Copyright 2014 by Janson Industries Installing on a Device ▀ ▀ To turn Developer options on, tap About phone in SYSTEM area Scroll to the bottom and tap Build number 7 times the 3rd tap a dialog will be displayed saying your only 4 taps away from being a developer After ▀ Copyright 2014 by Janson Industries Make sure USB Debugging is checked 85 Installing on a Device ▀ To install from Win 7 for the first time If not Win7 go here for instructions ► http://developer.android.com/tools/extras /oem-usb.html ▀ Connect your Android-powered device to your computer's USB port Win 7 will try to install drive software Won’t find the driver 86 Copyright 2014 by Janson Industries Installing on a Device ▀ ▀ ▀ Right-click on Computer from your desktop or Windows Explorer and select Manage Select Device Manager in the left pane Expand Other device in the center pane 87 Copyright 2014 by Janson Industries Right click device name and select Update Driver Software 88 Copyright 2014 by Janson Industries Driver software in the SDK, so select Browse my computer 89 Copyright 2014 by Janson Industries Navigate to android-sdk then go to \extras\google\usb_driver\ 90 Copyright 2014 by Janson Industries Click Next 91 Copyright 2014 by Janson Industries If you have a developer phone (like I do) need either the Google USB Driver (for a Nexus One, or a Nexus S) or a Galaxy Nexus driver from Samsung (listed as model SCH-I515) instead of the OEM driver in the android-sdk 92 Copyright 2014 by Janson Industries http://www.samsung.com/us/support/downloads/verizonwireless/SCH-I515MSAVZW 93 Copyright 2014 by Janson Industries 94 Copyright 2014 by Janson Industries Scroll to bottom click on Software tab then click EXE 95 Copyright 2014 by Janson Industries Disclaimer 96 Copyright 2014 by Janson Industries Select Save as and save to the Mobile folder 97 Copyright 2014 by Janson Industries Go back and specify new location Double click to run 98 Copyright 2014 by Janson Industries 99 Copyright 2014 by Janson Industries 100 Copyright 2014 by Janson Industries Note the install location 101 Copyright 2014 by Janson Industries 102 Copyright 2014 by Janson Industries If you start over and specify where you installed to (C:\Program Files\SAMSUNG\USB Drivers) 103 Copyright 2014 by Janson Industries 104 Copyright 2014 by Janson Industries When app run, device & any running emulators are given as choices If no emulators running, will automatically install and run on the attached device Else, select the device and click OK. App will be installed and run. HowdyActivity icon will now appear in the apps menu 105 Copyright 2014 by Janson Industries 106 Copyright 2014 by Janson Industries Assg ▀ Create a project called Assg1 Build ▀ ▀ level should be 2.1 Create an activity called Add Initial screen display should look like this… 107 Copyright 2014 by Janson Industries ▀ Note: The alignment of the views Text Text alignment Colors 108 Copyright 2014 by Janson Industries ▀ ▀ The user enters two numbers Note: Only numbers can be entered ▀ When the user clicks Add… 109 Copyright 2014 by Janson Industries ▀ The numbers are blanked out ▀ The “result” is displayed ▀ Extra credit (10 points) Have add actually do the addition Meaning, when the user clicks Add… 110 Copyright 2014 by Janson Industries ▀ The real result is displayed 111 Copyright 2014 by Janson Industries Assg ▀ To turn in an Assg Export the project as an Archive file ► Put your initials in the name of the archive file Send the Archive file as an email attachment to [email protected] ▀ To export as an Archive file… 112 Copyright 2014 by Janson Industries Right click the project name and select Export Expand General, select Archive File and click Next 113 Copyright 2014 by Janson Industries Specify the location to save to and the file name with your initials Click Finish Copyright 2014 by Janson Industries 114 Verify that is was created 115 Copyright 2014 by Janson Industries