The elements of the XML file are mapped to corresponding Android GUI class elements and drawn

The elements of the XML file are mapped to corresponding Android GUI class elements and drawn

Week 3 – The Android UI

Objectives, to understand:

the components of a screen

views and view groups

how to adapt to display orientation

how to anchor views

how to resize and reposition views and managing changes to display orientation

how to persist state information during configuration changes

how to detect orientation changes

CQU – COIT20270 Application Development for Mobile Platforms

The components of a Screen

An Android activity has its UI defined in an XML file, usually Main.xml

The onCreate() method sets the content view based on this XML file

The elements of the XML file are mapped to corresponding Android GUI class elements and drawn

CQU – COIT20270 Application Development for Mobile Platforms

Explain script functions

2

Views and ViewGroups

A View is an interface object that has an appearance on the screen and derives from android.view.View

Views can be grouped into ViewGroups

The following ViewGroups are supported;

LinearLayout – single horizontal or vertical row

AbsoluteLayout – allows position of each of its children to be specified

TableLayout – groups views into rows and columns RelativeLayout – specifies how each child is laid out relative to the others

FrameLayout – a placeholder (frame) used to display a single view

ScrollView – a special FrameLayout that allows for scrolling of its contained views

CQU – COIT20270 Application Development for Mobile Platforms

Explain script functions

3

Adapting to Display Orientation

Smartphones and tablets can switch between portrait and landscape layouts

When the device is rotated the view needs to be automatically redrawn to fit the new layout

The onCreate() method is called when the device is reorientated

Views can be anchored to the four edges of the screen

Views can be resized to fit the new orientation

CQU – COIT20270 Application Development for Mobile Platforms

Explain script functions

4

Anchoring Views

Anchoring is usually achieved using the RelativeLayout. The following attributes can then be used to anchor the elements

layout_AlignParentLeft – aligns view to parents left

layout_AlignParentRight – aligns view to parents right

layout_AlignParentTop – aligns view to parents top

layout_AlignParentBottom – aligns view to parents bottom

Layout_centerVertical – centres the view vertically

Layout_centerHorizontal – centres the view horizontally

CQU – COIT20270 Application Development for Mobile Platforms

Explain script functions

5

Resizing, Repositioning and Managing Changes to Orientation

A separate res/layout folder containing a file called layout-land.xml is used to define the landscape orientation view and the default res/layout main.xml file then defines the portrait layout

Android uses state information to pick between the two layouts dependent on the devices orientation

CQU – COIT20270 Application Development for Mobile Platforms

Explain script functions

6

Persistent State Information During Configuration Changes

The onSaveInstanceState() method is called whenever an activity is killed or put into the background and this method can be used to save state data in a Bundle object

The onRestoreInstanceState() method is used to restore previously saved Bundle object

The onRetainNonConfigurationInstance() method is more general and can be used to save a general object

The getLastNonConfigurationInstance() method is then used to restore the general object

CQU – COIT20270 Application Development for Mobile Platforms

Explain script functions

7

Detecting Orientation Changes

The WindowManager class is used to detect orientation changes during runtime

The WindowManager’s getDefaultDisplay() method returns a Display object whose width and height fields can be used to deduce the devices orientation

CQU – COIT20270 Application Development for Mobile Platforms

Explain script functions

8

Week 3 – The Android UI

Objectives, to understand how to:

control the orientation of an activity

utilise the action bar

add and customise items in the action bar

create the UI programmatically

listen for UI notifications

CQU – COIT20270 Application Development for Mobile Platforms

Controlling Orientation of an Activity

You can programmatically force a change of orientation using setRequestOrientation()

Use ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE or ActivityInfo.SCREEN_ORIENTATION_PORTRAIT to set landscape or portrait orientations

You can also set the android:screenOrientation value to “portrait” or “landscape” in the <activity> tag in the AndroidManifest.xml file

CQU – COIT20270 Application Development for Mobile Platforms

Utilising the Action bar

The Action bar displays an icon and a title on the top of the display screen

To show the action bar add setSupportActionBar(toolBar) in your onCreate() method

On the right of the action bar are optional action items (menus)

You can get access to the action bar at runtime by using getActionBar()

You can show() and hide() the action bar

You can hide the action bar using an android:theme attribute but then getActionBar() returns null

CQU – COIT20270 Application Development for Mobile Platforms

Adding Action Bar Items

Action bar items are used to call commonly performed operations in your application

The action bar adds action items when the onCreateOptionsMenu() method is called

Within onCreateOptionsMenu() you call a CreateMenu() method to add the items

To add the items you create a MenuItem instance and call your Menu’s add() method

Items can optionally have an icon associated with them using setIcon()

CQU – COIT20270 Application Development for Mobile Platforms

…Adding Action Bar Items

When the menu is selected the onOptionsItemSelected() method is called

This contains a MenuChoice() method that returns the choice

The parameter in MenuChoice() is used to determine what choice is made and what action to take as a result

CQU – COIT20270 Application Development for Mobile Platforms

Customising Items and Application Icon

Use SHOW_AS_ACTION_WITH_TEXT constant in setShowAsAction() to put text alongside action items

To allow the application icon to be clickable pass true in the action bars setDisplayHomeAsUpEnable(true) call

If so the application icon has been clicked you can check the MenuChoice() items getItemId() to see if it’s android.R.id.home

To use a click on the application icon to return to the main activity create an Intent object and set the Intent.FLAG_ACTIVITY_CLEAR_TOP flag and then call startActivity()

CQU – COIT20270 Application Development for Mobile Platforms

Programmatically Creating the UI

Rather than defining the UI in XML files you can dynamically define the UI at runtime

You have to duplicate the process carried in in the XML files

First you create a LayoutParams instance

You then create a layout, eg LinearLayout, and create and instantiate its fields

TextView, Button and other UI widgets are created and added to the layout

You then create any required LayoutParams object

Finally you add the layout object to the activity using addContentView()

CQU – COIT20270 Application Development for Mobile Platforms

Listening to UI Notifications

Common methods that can be over-ridden in you activity include:

onKeyDown – key pressed and not handled elsewhere

onKeyUp – key released and not handled elsewhere

onMenuItemSelected – called when panels menu item selected

onMenuOpened – called when panel is opened by the user

CQU – COIT20270 Application Development for Mobile Platforms


Comments are closed.