activities,fragments and intentsweb.cs.laurentian.ca/ppawluk/assets/documents/lecture2-ui.pdf ·...

OutlineIntroduction

UI GuidelinesActivities and Fragments

Activities, Fragments and IntentsMobile App Development

Przemyslaw Pawluk

Przemyslaw Pawluk Activities, Fragments and Intents

OutlineIntroduction


1 IntroductionConfigurationGlobal ValuesColorsUser InterfaceBuilding elements

2 UI Guidelines

Design Principles

3 Activities and FragmentsActivitiesIntentsIntroducing fragmentsFragment Life-CycleFragments in Activity


OutlineIntroduction


ConfigurationGlobal ValuesColorsUser InterfaceBuilding elements


2 UI Guidelines

Design Principles



OutlineIntroduction



Manifest file

AndroidManifest.xml

XML file

Contains name of the application and a default package,

Sets up the various permissions required by this application,

Defines the application-wide parameters,

Defines the startup Activity for the application.


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



res/values/strings.xml

You can use file string.xml to keep global constants such as nameof the app, communicates, headers etc.

1 < s t r i n g name=” a b o u t t i t l e ”>About Android </ s t r i n g >2 < s t r i n g name=” a b o u t t e x t ”>\3 Andro id a l l o w s you to use xml to d e s c r i b e GUI and to s t o r e

v a l u e s .4 You can a s l o use <i >HTML</i > t a g s i n t h e r e .5 </ s t r i n g >


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



res/values/colors.xml

You can define custom colors that can be used in definitions oflayout and layout elements

1 <r e s o u r c e s >2 <c o l o r name=” background ”>#3500 f f f f </c o l o r >3 </ r e s o u r c e s >


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



How?

Declarative

Statically (off-line) declare the interface using XML-basedlanguage. It is similar to building XHTML web page.

Procedural

Simply means in code. You write Java code to create andmanipulate all the user interface objects called Views.

Mixed

Android allows you also to mix both methods. You can build askeleton declaratively and fill in required elements during theexecution. This approach allows for flexibility minimizing coding.


OutlineIntroduction



Advice from Google

Google’s advice is to use declarative XML as much as possible.

The XML code is often shorter and easier to understand than thecorresponding Java code, and its less likely to change in futureversions.


OutlineIntroduction



Why XML? Isn’t it ineffective?

Although you see XML when writing your program, the Eclipseplug-in invokes the Android resource compiler, aapt, to preprocessthe XML into a compressed binary format. It is this format, notthe original XML text, that is stored on the device.


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



Basic elements

View

An object that knows how to draw itself to the screen.

ViewGroup

Views that can contain or group other Views.

Layout

Gives Android hints about how youd like to see the Views arranged.


OutlineIntroduction



Layout

View 1 View 2 ViewGroup

View 3 View 4

Figure: A concept of layouts, groups and views


OutlineIntroduction



Layout

Layout is:

a container for one or more child objects

a behaviour to position them on the screen within therectangle of the parent object


OutlineIntroduction



Layout

Commonly used layouts

FrameLayout – all children start at the top left of the screen

LinearLayout – children in a single column or row

RelativeLayout – children in relation to each other or to theparent

TableLayout – children in rows and columns, similar to anHTML table


OutlineIntroduction



Vertical vs. Horizontal

You can declare layouts fitted for specific position of the device

Horizontal

res/layout/main.xmlCan contain e.g. ListLayout

Vertical

res/layout-land/main.xmlCan contain TableLayout nested in ListLayout to make better useof the space


OutlineIntroduction




OutlineIntroduction


Design Principles


2 UI Guidelines

Design Principles



OutlineIntroduction


Design Principles

Design Principles

Enchant Me

Simplify My Life

Make Me Amazing

Source: http://developer.android.com/design/get-started/principles.html


http://developer.android.com/design/get-started/principles.html

http://developer.android.com/design/get-started/principles.html

OutlineIntroduction


Design Principles

Action Bars and other ...

Action Bar

1 Home button that takes your user to ”Home Screen/Activity”

2 View control (e.g. in Calendar it may be option to showYear/Month/Week/Day)

3 Action buttons such as Search, Zoom etc

4 Overflow actions ...


OutlineIntroduction


Design Principles


OutlineIntroduction


ActivitiesIntentsIntroducing fragmentsFragment Life-CycleFragments in Activity


2 UI Guidelines

Design Principles



OutlineIntroduction



Activity

What is it?

An activity is a user interface screen. Applications can define oneor more activities to handle different phases of the program.

Declaration

In AndroidManifest.xml

Definition

In Java as an extension ofActivity class


OutlineIntroduction



Declaration

1 <a p p l i c a t i o n . . . >2 . . .3 <a c t i v i t y a n d r o i d : name=” . S u n C a l c u l a t o r A c t i v i t y ”4 a n d r o i d : l a b e l=” @ s t r i n g / app name ”>5 < i n t e n t− f i l t e r >6 <a c t i o n a n d r o i d : name=” a n d r o i d . i n t e n t . a c t i o n . MAIN”/>7 <c a t e g o r y a n d r o i d : name=” a n d r o i d . i n t e n t . c a t e g o r y .

LAUNCHER”/>8 </ i n t e n t− f i l t e r >9 </ a c t i v i t y >

10 . . .11 </ a p p l i c a t i o n >


OutlineIntroduction



Definition

1 p u b l i c c l a s s S u n C a l c u l a t o r A c t i v i t y e x t e n d s A c t i v i t y {2

3 /∗∗ C a l l e d when t h e a c t i v i t y i s f i r s t c r e a t e d . ∗/4 @ O v e r r i d e5 p u b l i c v o i d o n Cr e at e ( Bundle s a v e d I n s t a n c e S t a t e ) {6 s u p e r . on C re a te ( s a v e d I n s t a n c e S t a t e ) ;7

8 // Here you i n i t i a l i z e , b u i l d t h e UI e l e m e n t s e t c9

10 }11

12 // then you can add v a r i o u s c a l l b a c k f u n c t i o n s to h a n d l ee v e n t s

13 }


OutlineIntroduction



Activity – main app component


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



Intent

What is it?

An intent is a mechanism for describing a specific action, such aspick a photo, phone home, or show map

How is it done?

An instance of Intent class is created and parameters such asaction, category and data are set.


OutlineIntroduction



Calling specific activity

1

2 I n t e n t myI ntent = new I n t e n t ( t h i s , C a l l e d A c t i v i t y . c l a s s ) ;3 s t a r t A c t i v i t y ( myIntent ) ;4

5 // o r s t a r t A c t i v i t y F o r R e s u l t ( m yIntent resCode ) ;6 // i f you want to g e t a r e s u l t


OutlineIntroduction



Component based architecture

Ask others to do it for you

Android allows you to call activities and services from otherapps!

You can send a request e.g. to open a photo or show a mapand (if there is an app accepting such call) it will be served.

If multiple apps can handle it then user can choose who(which app) will be used.


OutlineIntroduction



Calling activity based on action/category

1

2 I n t e n t myI ntent = new I n t e n t (3 a n d r o i d . c o n t e n t . I n t e n t . ACTION VIEW ,4 // White house l o c a t i o n5 U r i . p a r s e ( ” geo :38 .899533 ,−77.036476 ” )6 ) ;7

8 s t a r t A c t i v i t y ( myIntent ) ;9

10 // o r s t a r t A c t i v i t y F o r R e s u l t ( m yIntent resCode ) ;11 // i f you want to g e t a r e s u l t


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



Fragment

Encapsulated, reusable component with own lifecycle and UI thatcan be used to build activity.It is tightly bound to the Activity into which it is placed.They can be reused in various activities.


OutlineIntroduction



Fragments in Android

Fragments were introduced as a part of Android 3.0 Honeycomb(API level 11).

Recquired

Your activity has to extend FragmentActivity

public class MyActivity extends FragmentActivity


OutlineIntroduction



Create a Fragment Class

Extend Fragment class

Create layout file with view hierarchy (optionally)

If your fragment requires UI override onCreateView handlerto inflate and return the view hierarchy (from layout file orautomatically).


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



Created

Fragment.onAttach

Fragment.onCreate

Fragment.onCreateView

Fragment.onActivityCreated

Fragment.onDeatach

Fragment.onDestroy

Fragment.onDestroyView

..


OutlineIntroduction



Visible

Active

.

Fragment.onStart

Fragment.onResume

Fragment.onStop

Fragment.onPause

.


OutlineIntroduction



Fragment-specific Lifecycle Events

Attach/Deattach

Start and End of the life-cycle

Create/Destroy

Start and End of the created lifetime

Create/Destroy UI

onCreateView should be used to initialize fragment’s UI


OutlineIntroduction



Fragment States

State

A state of the fragment is closely related to the correspondingActivity state and it’s transitions are related to Activity’stransitions.


OutlineIntroduction




2 UI Guidelines

Design Principles



OutlineIntroduction



Fragment Manager

FragmentManager is used to manage fragments that the Activitycontains. It provides the methods to perform fragment transactionto add, remove and replace fragments.


OutlineIntroduction



Layout file

Simplest way to add a fragment to an activity is to add<fragment> tag to the layout.

1 <f ragment2 a n d r o i d : name=”com . paad . w e a t h e r s t a t i o n . D e t a i l s F r a g m e n t ”3 a n d r o i d : i d=”@+i d / f ragment14 a n d r o i d : l a y o u t w i d t h=” m a t c h p a r e n t ”5 a n d r o i d : l a y o u t h e i g h t=” m a t c h p a r e n t ”6 a n d r o i d : l a y o u t w e i g h t=”3”7 />


OutlineIntroduction



Fragment transaction

Fragment Transactions can be used to add, remove, and replacefragments within the activity at runtime.

1 F r a g m e n t T r a n s a c t i o n t = fragmentManager . b e g i n T r a n s a c t i o n ( ) ;2 // to add3 t . add (R . i d . u i c o n t a i n e r , new MyFragment ( ) ) ;4

5 // to remove6 Fragment f = fragmentManager . f i n d F r a g m e n t B y I d (R . i d .

myfragment ) ;7 t . remove ( f ) ;8

9 // to r e p l a c e10 t . r e p l a c e (R . i d . myfragment , new MyFragment ( ) ) ;11

12 t . commit ( ) ;


OutlineIntroduction



Back Stack

If you use fragments to display different screens within the sameactivity, user will expect that back button will revers the FragmentTransaction effects. You can fulfill this expectation by adding thetransaction to the back stackfragmentTransaction.addToBackStack(tag).


OutlineIntroduction



Built-in Fragment Classes

DialogFragment – floating dialog

ListFragment – wrapper class featuring ListView

WebViewFragment – wrapper class featuring WebView


OutlineIntroduction



Summary

Fragment should encapsulate a functionality and be fairyindependent

Fragment can have own UI (but it’s possible to create onewithout it)

Fragments can be dynamically added, removed and replaced

Fragments can communicate through Activity


OutlineIntroduction




activities,fragments and intentsweb.cs.laurentian.ca/ppawluk/assets/documents/lecture2-ui.pdf ·...

Documents