Mobile Development Dr Msury Mahunnah email msury mahunnahifm

Mobile Development Dr. Msury Mahunnah e-mail: msury. mahunnah@ifm. ac. tz course website: https: //mahunnah. wordpress. com/

Lecture Week 5 Layouts

Outline • • Introduction Defining Layouts XML Layouts Assigning Layouts Views & View. Groups Layout Attributes Frame. Layout, Linear. Layout, Relative. Layout, Grid. Layout, Scroll. View

Introduction • A layout defines the visual structure for a user interface i. e. its UI

Defining Layouts • Using XML layout files – Android provides XML tags and attributes that correspond to View classes and subclasses – Advantage – separation of presentation logic & behavior – Also, easier to visualize structure of UI • Via Java code – App creates View & View. Group objects (and manipulate their properties) programatically

XML Layouts • XML Layouts are defined in /res/layout folder • A layout specifies the View. Groups, Views, their relationships and their attributes via XML representation

Assigning Layouts to Activities

Accessing an XML-defined view • Using unique ID via the android: id attribute • This creates a new ID if necessary in the R. java file and assigns the defined ID to the corresponding view

Views • A view in Android represents a UI widget e. g. a button, a layout manager etc. • SDK provides standard views (widgets) classes i. e. Button, Text. View, Edit. Text, List. View etc. • All views extand the android. view. View class

Layout manager and View. Groups • A layout manager is a subclass of View. Group • Contains other views & is responsible for their layout • Examples: Linear. Layout, Frame. Layout, Relative. Layout & Grid. Layout

Layout attributes • You can define different attributes for layouts • Child views can also define attributes evaluated by their parents • Two important attributes – height and width • Can be fixed size e. g. 100 dp • match_parent – maximize widget in parent • wrap_content – minimum amount for the widget to display properly

Frame. Layout • Draws all children on top of each other

Linear. Layout • Aligns all children into a single column or row depending on the android: orientation attribute android: orientation = “horizontal” android: orientation = “vertical” • *Linear. Layout supports android: layout_weight parameter

Relative. Layout • Allows to position widgets relative to each other

Linear. Layout vs Relative. Layout

Grid. Layout Introduced in Android 4. 0 Organizes child views into a Grid Rows, columns and cells Can specify no. of columns for each view, which row and column it should be placed & no. of columns and rows it should use. • Default – 1 column, 1 row & position depending on the order of declaration • •

Scroll. View • Used to contain one View that might be too big to fit on one screen • Will display a scroll bar to scroll the context