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

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.

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 on 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

Structure of an Android App Autogenerated class R “Inflates” the UI from the activity_main.xml file specifying it

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 other views / group views in specific spatial arrangements : LinearLayout, Gridlayout, RelativeLayout, ConstraintLayout ... TextView is a non-editable text label.

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/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 >

Structure of an Android App

Structure of an Android App res/values/strings.xml

Structure of an Android App Place to define UI constant strings, values, arrays of integers and strings, colors, size of things (dimensions)...

Structure of an Android App

Structure of an Android App AndroidManifest.xml This activity may be the application entry point.

Structure of an Android App 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)

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 Activity is active = visible in foreground and methods invoked interacting with user when changing state Activity is visible in background Not visible. Will remain in memory. Need to save data, such as a database record being edited. Hello Android. Ed Burnette. The Pragmatic Programmer, 2010

States of an activity and methods invoked when changing state Changing orientation landscape ←→ portrait calls onDestroy() + onCreate()

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: HelloWordActivity.java main.xml

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 3 LinearLayout 1 2 3 4 1 1 2 2 3 4

Views, Layouts RelativeLayout