GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications...

27
Outline Approaches to UI Design Views and Layouts WYSIWYG Tools Some Implementation Details References Questions GUI Design for Android Applications SE3A04 – Tutorial Jason Jaskolka Department of Computing and Software Faculty of Engineering McMaster University Hamilton, Ontario, Canada [email protected] November 28, 2011 Jason Jaskolka GUI Design for Android Applications 1 / 27

Transcript of GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications...

Page 1: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

GUI Design for Android ApplicationsSE3A04 – Tutorial

Jason Jaskolka

Department of Computing and SoftwareFaculty of EngineeringMcMaster University

Hamilton, Ontario, [email protected]

November 28, 2011

Jason Jaskolka GUI Design for Android Applications 1 / 27

Page 2: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Outline

1 Approaches to UI Design

2 Views and Layouts

3 WYSIWYG ToolsADT Graphical Layout EditorDroidDraw

4 Some Implementation Details

5 References

6 Questions

Jason Jaskolka GUI Design for Android Applications 2 / 27

Page 3: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Declarative User Interface

Declarative approach involves using XML to declare what theUI will look likeSimilar to creating a web page using HTMLWe write tags and specify elements to appear on the screenIf you ever hand-coded an HTML page, you did pretty muchthe same work as creating an Android screen

Jason Jaskolka GUI Design for Android Applications 3 / 27

Page 4: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Declarative User Interface

Advantages:Can use what-you-see-is-what-you-get (WYSIWYG) toolsSome WYSIWYG tools ship with the Eclipse AndroidDevelopment Tools (ADT) extension, others come from thirdpartiesXML is fairly human readable and even people unfamiliar withAndroid can determine the intent of the user interface

Disadvantages:XML is great for declaring the look and feel of your userinterface, but that doesn’t provide a good way of handling userinput

Jason Jaskolka GUI Design for Android Applications 4 / 27

Page 5: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Programmatic User Interface

Programmatic approach involves writing Java code to developuser interfacesIf you have ever worked with any Java AWT or Java Swingdevelopment, Android is pretty much the same in that respectIt is also similar to many other UI toolkits in other languagesas well

Jason Jaskolka GUI Design for Android Applications 5 / 27

Page 6: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Programmatic User Interface

Advantages:Everything you can do declaratively, you can also doprogrammaticallyAdditionally, Java also allows you to specify what happenswhen that button is actually clicked

Disadvantages:We end up writing quite a few lines of Java to do somethingquite simple

Jason Jaskolka GUI Design for Android Applications 6 / 27

Page 7: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Which to Use?

The best practice is to use bothUse declarative (XML) approach to declare everything aboutthe user interface that is static, such as the layout of thescreen, all the widgets, etc.Then switch to programmatic (Java) approach to define whatgoes on when user interacts with various widgets of the userinterfaceIn other words, use XML to declare what a button looks like,and Java to specify what it does

Jason Jaskolka GUI Design for Android Applications 7 / 27

Page 8: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Views and Layouts

Android organizes its UI elements into layouts and viewsEverything you see, such as a button, label, or text box, is aviewLayouts organize views, such as grouping together a buttonand label or a group of themLayouts are similar to Java containers and views are similar toJava components (for those with Java AWT or Java Swingexperience)Views in Android are sometimes referred to as widgets

Jason Jaskolka GUI Design for Android Applications 8 / 27

Page 9: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Views and Layouts

Figure: Relationship between Android layouts and views

Jason Jaskolka GUI Design for Android Applications 9 / 27

Page 10: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Views and Layouts

A layout can contain other childrenThose children can furthermore be layouts themselves allowingfor complex user interface structureA layout is responsible for allocating space for each childDifferent layouts use different approaches to laying out theirchild widgetsThere are couple of main layouts that are used morefrequently than others

Jason Jaskolka GUI Design for Android Applications 10 / 27

Page 11: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

LinearLayout

LinearLayout is one of the simplest and most common layoutsIt simply lays out its children next to each other, eitherhorizontally or verticallyThe order of children mattersSince LinearLayout asks its children for how much space theyneed, it allocates desired space to each child in the order theyare addedThis means that if an “older” child comes along and asks forall the space on the screen, there won’t be much left for thesubsequent widgets in this layout

Jason Jaskolka GUI Design for Android Applications 11 / 27

Page 12: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

TableLayout

TableLayout lays out its children in a tableTableLayout consists of only other TableRow widgetsTableRow represents a row in a table and can contain otherUI widgetsTableRow widgets are laid out next to each other horizontally,sort of like LinearLayout with horizontal orientation

Jason Jaskolka GUI Design for Android Applications 12 / 27

Page 13: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

FrameLayout

FrameLayout places its children on top of each other so thatlatest child is covering the previous, like a deck of cardsThis layout is useful for tabs, for exampleFrameLayout is also used as placeholder for other widgets tobe added to it programmatically at some later point in time

Jason Jaskolka GUI Design for Android Applications 13 / 27

Page 14: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

RelativeLayout

RelativeLayout lays out its children relative to each otherIt is very powerful as it doesn’t require you to nestunnecessary layouts in order to achieve certain lookRelativeLayout can minimize the total number of widgets thatneed to be drawn thus improving the overall performance ofyour applicationIt requires each of its child views to have an ID set so that wecan position it relatively to other children

Jason Jaskolka GUI Design for Android Applications 14 / 27

Page 15: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

AbsoluteLayout

AbsoluteLayout positions its children at absolute coordinateson the screenIt is popular layout for WYSIWYG tools that automaticallygenerate the UIWhile very simple, it is not very flexibleThe user interface can look good on one particular screen butas soon as the screen size, orientation, or density changes,AbsoluteLayout would not be able to adjust

Jason Jaskolka GUI Design for Android Applications 15 / 27

Page 16: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

ADT Graphical Layout EditorDroidDraw

ADT Graphical Layout Editor

ADT provides many features to allow you to design and buildyour application’s user interfaceMany of these features are in the graphical layout editor,which you can access by opening one of your application’sXML layout files in EclipseThe graphical layout editor is split up into the following parts:

CanvasOutlinePaletteConfiguration Chooser

Jason Jaskolka GUI Design for Android Applications 16 / 27

Page 17: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

ADT Graphical Layout EditorDroidDraw

ADT Graphical Layout Editor

Jason Jaskolka GUI Design for Android Applications 17 / 27

Page 18: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

ADT Graphical Layout EditorDroidDraw

DroidDraw

DroidDraw is a WYSIWYG tool for building user interfaces forthe Android platformVery similar to the ADT Graphical Layout EditorGenerates XML which needs to be included with your Androidproject

Jason Jaskolka GUI Design for Android Applications 18 / 27

Page 19: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

ADT Graphical Layout EditorDroidDraw

DroidDraw

Jason Jaskolka GUI Design for Android Applications 19 / 27

Page 20: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Some Implementation Details

The XML file for your interface should reside in theres/layout directory of your Android projectMixing the declarative and programmatic approaches isnothing more than referencing your declared views and layoutsand programming the business logic for eachGUI elements can be looked up with:

t h i s . f i ndV i ewBy Id (R . i d .< id >)

Jason Jaskolka GUI Design for Android Applications 20 / 27

Page 21: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Code Fragments for a Button

ExampleSuppose you have a button named with name “Start” and with IDis @+id/start in the file main.xml in res/layout.

You will import the following packages:

import and ro i d . app . A c t i v i t y ;import and ro i d . os . Bundle ;import and ro i d . v iew . View ;import and ro i d . v iew . View . OnC l i c k L i s t e n e r ;import and ro i d . w idget . Button ;

Jason Jaskolka GUI Design for Android Applications 21 / 27

Page 22: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Code Fragments for a Button

Example (continued)

You will have a class that extends Activity and implementsOnClickListener:

p ub l i c c l a s s <Name> extends A c t i v i t yimplements OnC l i c k L i s t e n e r { . . . }

You will have a class variable:

Button s t a r t ;

Jason Jaskolka GUI Design for Android Applications 22 / 27

Page 23: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Code Fragments for a Button

Example (continued)

You will have an onCreate(...) method for the Activity:

@Over r idep ub l i c vo i d onCreate ( Bundle i c i c l e ) {

super . onCreate ( i c i c l e ) ;s e tContentV iew (R . l a y o u t . main ) ;

. . .s t a r t = ( Button ) t h i s . f i ndV i ewBy Id (R . i d . s t a r t ) ;s t a r t . s e tOnC l i c k L i s t e n e r ( t h i s ) ;

}

Jason Jaskolka GUI Design for Android Applications 23 / 27

Page 24: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Code Fragments for a Button

Example (continued)

You will have an onClick(...) method which will handlewhat the application needs to do when the button is clicked(event-handler):

p ub l i c vo i d onC l i c k ( View v ) {// Do someth ing ;

}

Jason Jaskolka GUI Design for Android Applications 24 / 27

Page 25: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Summary

There are a number of ways to approach the user interfacedesignWe have mentioned just a few of the wide variety of optionsThere are numerous online tutorials, screen-casts, and codesamples demonstrating the use of the tools that we havetalked about

Jason Jaskolka GUI Design for Android Applications 25 / 27

Page 26: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

References

Marko GargentaLearning Android: Chapter 6: Android User InterfaceO’Reilly OFPS, 2010.http://ofps.oreilly.com/titles/9781449390501/Android_User_Interface.html

Android DevelopersAndroid Developer Toolshttp://developer.android.com/guide/developing/tools/adt.html

Brendan BurnsDroidDrawhttp://www.droiddraw.org/

Jason Jaskolka GUI Design for Android Applications 26 / 27

Page 27: GUI Design for Android Applications - SE3A04 Tutorial€¦ · GUI Design for Android Applications ... Declarative User Interface ... Approaches to UI Design Views and Layouts WYSIWYG

OutlineApproaches to UI Design

Views and LayoutsWYSIWYG Tools

Some Implementation DetailsReferencesQuestions

Questions

Questions?

Jason Jaskolka GUI Design for Android Applications 27 / 27