android
Madhukar Kunam 
Week3.pptxWeek 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
