Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
Programming Android UI basics
J. SerratSoftware DesignDecember 2015
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 best materials for self study, read them before programming , trial and error takes longer
● Understand provided project implementation
Preliminaries: why Android
● Many students own an Android phone
● Known and free development environment (Android Studio or Eclipse + ADK plugin)
● Well documented
● Good chance to learn UI design
● Take away course project in your pocket, funny to see and show your software running in a phone
● Starting point to learn more on mobile development
Preliminaries: why Android
● Drawbacks: learning curve, lots of details
● Many things left out: fragments, programming action bars, themes...
● How to learn: try to solve small problems in separate projects, like
● create an action bar with actions and overflow action
● customize a ListView to show name and time
● make a contextual action bar
● ...
Contents
1. References
2. Development framework
3. Building blocks
4. Structure of an Android project
5. Activity life cycle
6. Views, Layouts
Contents
7. Menus
8. Action bar
9. Intents, Broadcast receivers, Adapters
10. Dialogs, Preferences
11. Services
12. TimeTracker architecture
ReferencesPublished since 2010 (O'Reilly, Apress, Wrox, Manning)
and many more ...
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.
Professional Android 4 application development. Reto Meier. Wiley, 2012.Complete, comprehensive, basic and advanced topics. I used the Android 2 version to learn. Source code at eu.wiley.com
Referenceshttp://developer.android.com/training/index.html
Development framework
http://developer.android.com/resources/dashboard/platform-versions.html
Development framework1.6
2.2
4.0
Building blocks
Main logical components of Android applications :
● Activity : UI component typically corresponding to one screen. They contain views = UI controls like buttons, editable text boxes...
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. An activity may return a result to the previous 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.
ActivityActivity
ApplicationActivityActivity
Application
ActivityActivity
Content ProviderContent Provider
ServiceService
Application
Data file
Data file
SQLite XML file
XML file
Remote Store
Content ResolverContent Resolver Content ResolverContent Resolver
Content ResolverContent Resolver
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.
Automatically generated code
HelloWordActivity.java
“Inflates” the UI from the main.xml file specifying it
Autogenerated class R
HelloWordActivity.java
Place to define UI constant strings, values, arrays of integers and strings, colors, size of things (dimensions)... Can use the Resources assistant to edit.
values/strings.xml
Message displayedin the screen
values/strings.xml
other viewsxml view
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)
AndroidManifest.xml
This activity may be the application entry point.
Won't start on devices supporting an older API
AndroidManifest.xml
The interface design is represented in XML, decoupling design from code (opposite to “programmatic UI”). The call setContentView(R.layout.main)“inflates” the UI.
Layout is a special view that contains other views in specific spatial arrangements. LinearLayout arranges its children in a single column or row.TextView is a non-editable text label.
XML view of the UI design
layout/main.xml
string id defined in string.xml
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>
layout/main.xml
Graphical view of the UI design, better to design.
Select item and edit properties.
layout/main.xml
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 CycleStates of an activity and methods invoked when changing state
Hello Android. Ed Burnette. The Pragmatic Programmer, 2010
Activity is active = visible in foreground interacting with user
Activity is visible in backgroundNot visible. Will
remain in memory. Need to save data, such as a database record being edited.
States of an activity and methods invoked when changing state.
Changing orientation landscape ←→ portrait calls onDestroy() + onCreate(). Ctrl-F11 on virtual device.
Homework recap
● Get some recommended book AND read developer.android.com/training main topics
● Create a Hello world project, with string and icon resources, try different nested layouts
● Import our Android TT project into Android Studio, replace our “nucli.jar” for your package “nucli”, edit code to integrate it and make it work
● Read comments, identify activities, service...
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:
main.xml
HelloWordActivity.java
Controls: catalog and appearance depends on API level.
Look at
http://developer.android.com/guide/topics/ui/controls.html
http://developer.android.com/guide/topics/ui/declaring-layout.html
Views, Layouts
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.
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
● TableLayout lay out Views using a grid of rows and columns
Can be nested, creating arbitrarily complex interfaces.
Views, Layouts
1 2 3 4
1
2
3
4
LinearLayout
1
2
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>
ToDoList example : how to react to user input ?How to bind data to the UI (lists) ?
Views, Layouts
Write to the edit box and then press Enter to add as a new item to the ToDo list.
Views, Layouts
main.xml
Views, Layouts
From now on, changes on ArrayList todoItems are shown in the screen when adapter notifies it.
Views, LayoutsJava anonymous class
Override onKey of class onKeyListener
Which listeners has an EditText ?
Views, Layouts
It is possible to customize the aspect and content of items in a ListView. See Ch. 4 Reto Meier's book and source code at www.wrox.com
Contents
7. Menus
8. Action bar
9. Intents, Broadcast receivers, Adapters
10. Dialogs, Preferences
11. Services
12. TimeTracker architecture
Menus
Present application functionality using little screen space.
Each Activity can specify its own menu in the action bar.
Menus
Context menu
● from Android 3.0 on, better use a contextual action bar to present actions the user can perform on the currently selected item
context menu
contextual action bar: actions depend on selected item(s)
pre 3.0 3.0+
Action bar (now App bar)
One of the most important design elements of an Android app. :
● dedicated piece of screen
● visible throughout the app. running
● makes our app. consistent with the core Android apps.
Action bar
Examples
Action bar
Purposes :
● make important actions prominent and accessible [3]
● support consistent navigation and view switching [2] (with spinner or tabs)
● reduce clutter by providing an action overflow for rarely used actions [4]
● show app identity [1]
action buttons
action overflow
spinnerapp. icon
Action bar
Action bars can be split
Display actions and, if necessary, the action overflow
main action bar
top bar
bottom bar
If the user can navigate, contains the up caret, at a minimum
To quickly switch between the views, use tabs or a spinner in the top/main action bar
Action bar
spinner
action overflow
Dialogs
Small windows displayed over the screen.
● modal: block all user input and must be dismissed before the user can continue.
● partially obscures the Activity that launched it.
Purposes :
answer questions Yes/No, Ok/Cancel...
make selections
read warning or error messages
show bar progress
Dialog share a common structure:
● Optional title region: Introduces content
● Content area: text, UI elements, text fields, checkboxes, etc...
● Action Buttons: Typically OK/Cancel, indicating the preferred option.
Dialogs
Special types of Dialogs:
● Alerts: Inform user from a situation that requires confirmation.
● Pop-ups: Lightweight dialogs with a single selection from the user.
● Toasts: Small pop-up that feedbacks about something. Disappear automatically.
Dialogs
Dialogs
Programming (1)
Dialogs should normally be created(instantiated) within the Activity's onCreateDialog(int). This is called only the first time the dialog is showed.
To show the dialog, call showDialog(int)
To change dialog properties each time the dialog is opened, define onPrepareDialog(int)
1st call showDialog(id) onCreateDialog(id)
onPrepareDialog(id)
onPrepareDialog(id)
2nd call showDialog(id)
Programming (2)
The best way to define onCreateDialog(int) is with a switch statement that checks the id of the dialog being created. The method must return the dialog created.
Dialogs
Programming (3)
When it's time to show one of the dialogs, call showDialog with the desired ID.
To close a dialog, you can dismiss it by calling dismiss() from the Dialog object. If necessary, you can also call dismissDialog(int) from the Activity.
Dialogs
Preferences
Android provides classes to manage application preferences and implement the preferences UI.
● ensures consistency, with specific UI elements (e.g ListPreference)
● all preferences within each application is maintained in the same manner.
Preferences
The SharedPreferences class:
● provides a general framework to save and retrieve key-value pairs.
● there is a single instance of this class.
● its data will persist across user sessions (even if the app is killed)
Preferences
Steps to implement the Preferences:
1. Add string resources needed for preferences.
Preferences
2. Create the preferences UI layout (using standard Preference UI elements).
We can reference the string resources
Preferences
3. Create the Preferences Activity, and inflate the layout overriding the onCreate method.
4. Add static string values to identify each of the preferences by a unique key.
Preferences
5. Implement the OK/Cancel listeners and a method to save preferences.
This method commits changes on the sharedPreferences object
Preferences
Add pairs “string,value” to the SharedPreferences object
Commit changes. If the preferences file MYPREFS does not exist, it will be created
5. Implement the OK/Cancel listeners and a method to save preferences.
Preferences
6. Apply the preferences when the activity starts.
Preferences file name. If it does not exist will be created
when committing changes
Unique preference key (string)
Default value if it is not defined
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 can return a result: startActivityForResult()
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
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.
NEW_LIFEString namedouble longitudedouble latitude
Broadcast Receivers
Broadcast intent type
Broadcast Receivers
data field names
Broadcast intent type
Broadcast Receivers
The broadcast receiver will always be active (listening), even when MyActivity has been killed or not started
Broadcast intent type
Broadcast Receivers
Alternatively, register the receiver when MyActivity is visible and unregister when not.
Typically when the receiver updates am UI element.
TimeTracker architecture
LlistaActivitatsActivity.java
LlistaIntervalsActivity.java
ListView controls
TimeTracker architecture
Contains the actual activities and intervals tree
Analogous to TimerTask or Timer, which are not usable in Android. See code comments and references there.
Harder to destroy by Android OS than activities
TimeTracker architectureShow a part of the tree, the childs of some node
.
P TP P T
P TP I I I
root
different fields
TimeTracker architecture
DONAM_FILLSPUJA_NIVELL
BAIXA_NIVELLDONAM_FILLSENGEGA_CRONOMETREPARA_CRONOMETREPUJA_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)