Programming Android UI J. Serrat Software Design December 2017 - - PowerPoint PPT Presentation

Programming Android UI

• J. Serrat

Software Design December 2017

Preliminaries : Goals

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

Preliminaries: why Android

• Many students own an Android phone
• Free development environment, Android Studio
• Well documented
• Good chance to learn UI design
• Challenging design
• T

ake away course project in your pocket

• Add Android to your CV
• Starting point to learn more

Preliminaries: why Android

• Drawbacks: learning curve
• Many things left out

Preliminaries: how to Android

T ry to solve small relevant problems in separate projects :

• create an app bar with tabs / actions and
• verflow action
• create bottom bar
• customize ListView to show project/task name,

date and time, intervals

• make a contextual app bar
• report and new project/task forms
• ...

Contents

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

References

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

References

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

Building blocks

Main logical components of Android applications :

• Activity : UI component typically corresponding to
• ne screen. They contain views = UI controls like

buttons, labels, editable text ... and layouts = view groups (composite) May react to user input and events (intents) An application typically consists of several screens, each screen is implemented by one activity. Moving to the next screen means starting a new activity.

Building blocks

• Service : application part that runs in background

without the user’s direct interaction, similar to a Unix daemon. For example, a music player.

• Content provider : generic interface to manage

(access, change) and share (like “contacts”) application data. Can be stored as SQLite databases.

Activity Activity Application Activity Activity Application Activity Activity Content Provider Content Provider Service Service Application Data file Data file SQLite XML file XML file Remote Store Content Resolver Content Resolver Content Resolver Content Resolver Content Resolver Content 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

• ccurred so that it can be handled

Fundamental to decouple cooperating application components.

• Post 3.0 APIs include some more components:

fragments, tasks...

Building blocks

Structure of an Android project: create and run a “Hello world” application

Do not close the emulator! It takes a lot to start. Each time you build the project, the new version is uploaded and execution starts automatically.

Android Studio

• Install Android Studio (3.0.1 in Dec. 2017)
• Add some virtual devices, e.g. Galaxy Nexus + API24

Nougat, installing dependencies

• Follow tutorial Training → Getting started → “Building

your first App”

Android platforms and APIs

Compatibility with existing devices based

• n Playstore downloads

+ Oreo ...

Android platforms and APIs

Android Studio

Android Studio

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

Android Studio

Android Studio

Structure of an Android App

MainActivity.java Automatically generated code

“Inflates” the UI from the activity_main.xml file specifying it Autogenerated class R

Structure of an Android App

Structure of an Android App

activity_main.xml

Structure of an Android App

Structure of an Android App

The interface design is represented in XML, decoupling design from code (opposite to “programmatic UI”). The call in Mainactivity.java setContentView(R.layout.activity_main) “inflates” the UI. Layouts are special (group) view that contain

• ther views / group views in specific spatial

arrangements : LinearLayout, Gridlayout, RelativeLayout, ConstraintLayout... TextView is a non-editable text label.

<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/editT extLongitud" android:inputT ype="number" > <requestFocus /> </EditT ext> <TextView android:id="@+id/textViewLabelUnitatsLongitud" android:text="mm" /> </TableRow> : : </TableLayout> <Button android:id="@+id/butocalcul" android:text="Calcula" /> </LinearLayout>

layout/main.xml

Structure of an Android App

Structure of an Android App

res/values/strings.xml

Place to define UI constant strings, values, arrays

• f integers and strings, colors, size of things

(dimensions)...

Structure of an Android App

Structure of an Android App

AndroidManifest.xml

Structure of an Android App

This activity may be the application entry point.

• 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)

Structure of an Android App

AndroidManifest.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 Cycle

States 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 background Not 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() +

• nCreate()

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

Views, Layouts

Common controls : T extView, EditT ext (many types), Button, ListView, ExpandableList, Spinner, Checkbox, ProgressBar, SeekBar, RadioGroup, RatingBar, Time and Date picker …

Views, Layouts

Layouts control the position of child controls on a screen. Can be nested, creating arbitrarily complex interfaces. Common layouts:

• LinearLayout adds each child View in a straight

line, either vertically or horizontally

• RelativeLayout define the positions of child

Views relative to each other or screen boundaries

• ConstraintLayout like relative layout but more

flexible, avoids nesting layouts in complex

• designs. Check tutorial!

Views, Layouts

1 2 3 4 1 2 3 4

3 LinearLayout

1 2

Views, Layouts

RelativeLayout

<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <T extView android:id="@+id/textViewTitol" android:text="T ubeQuoter V0.10" /> <TableLayout android:id="@+id/tableLayout1" android:layout_marginLeft="20dp" > <T ableRow android:id="@+id/tableRow1"> <T extView android:id="@+id/textViewLabelLongitud" android:text="Longitud" /> <EditT ext android:id="@+id/editT extLongitud" android:inputT ype="number" > <requestFocus /> </EditT ext> <T extView android:id="@+id/textViewLabelUnitatsLongitud" android:text="mm" /> </T ableRow> : : </TableLayout> <Button android:id="@+id/butocalcul" android:text="Calcula" /> </LinearLayout>

T

• DoList example :

How to react to user input ? How to bind data to the UI (lists) ?

Views, Layouts

Views, Layouts

Views, Layouts

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

Views, Layouts

Java anonymous class Override onKey of class onKeyListener Which listeners has an EditT ext ?

Views, Layouts

Java anonymous class Override onKey of class onKeyListener Which listeners has an EditT ext ?

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

• rigin

context activity to start

Intents

Need to declare all activities in AndroidManifest.xml

Broadcast Receivers

Intents can also be used to broadcast messages to anonymous components within one same application. The sender can associate data to those intents. A broadcast receiver (maybe within other app. component):

• listens for selected types of broadcast intents
• responds to them = processes associated data

'anonymous' means components do not need to know each other.

Broadcast Receivers

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_LIFE String name double longitude double latitude

Broadcast Receivers

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

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 in foreground and unregister when not. T ypically when the receiver updates am UI element.

Activity Life Cycle

States 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 background Not visible. Will remain in memory. Need to save data, such as a database record being edited.

TimeTracker architecture

LlistaActivitatsActivity.java LlistaIntervalsActivity.java ListView controls

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

TimeTracker architecture

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

TimeTracker architecture

Show a part of the tree, the childs of some node . P T P P T P T P I I I

root

different fields

TimeTracker architecture

DONAM_FILLS PUJA_NIVELL BAIXA_NIVELL DONAM_FILLS ENGEGA_CRONOMETRE PARA_CRONOMETRE PUJA_NIVELL

TimeTracker architecture

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

TimeTracker architecture

Intent data to activities is a serialized array list of these

• bjects.

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

Homework

• Get some recommended book AND read

developer.android.com/training main topics

• Install Android Studio
• Create a Hello world project, with string and

icon resources, try nested layouts and ConstraintLayout

• Import our Android TT project into Android

Studio, replace our first milestone classes by yours and edit code to integrate it and make it work

• Read comments, identify activities, service...