ANDROID INTERFACE AND LAYOUT L Grewe Android GUI

ANDROID – INTERFACE AND LAYOUT L. Grewe

Android GUI –the concept GUI = hierarchy of View and View. Group objects View = UI component (e. g. button, textfields, imageviews, . . ) View. Group = containers that have a layout defined controlling how View widgets are arrange in it.

Views There are many –read book and look at API android. view. View. * = base class for all Views. example sub-classes include: Text. View, Image. View, etc.

View. Group ---specify Layout android. view. View. Group = Layout for views it contains, subclasses include android. widget. Linear. Layout android. widget. Absolute. Layout android. widget. Table. Layout android. widget. Relative. Layout android. widget. Frame. Layout android. widget. Scroll. Layout Controls location of Views in that View. Group Linear. Layout: all children aligned in single direction, horizontally or vertically Relative. Layout: Child object relative to each other List. View: a list of scrollable items Grid. View: displays items in two-dimensional, scrollable grid

Interfaces: Two Alternatives for creation: Code or XML 1. 2. You have two ways you can create the interface(s) of your Application. Code = write code using SDK with classes like Linear. Layout, Text. View, …… XML = create XML files in res/Layout (i. e. main. xml) that contain Android XML view tags like <Linear. Layout> <Text. View>, etc.

Option: XML Interface Lets look at this option first

XML Interface Creation Generally, I would say if it is possible, doing XML would be better as it means a decoupling of design from Java code. You can have both in your system…. Lets discuss this first.

The Layout --- the interface Layouts defined with XML located in res/layout

The Layout-the interface res/layout/main. xml = contains layout for interface <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: orientation="vertical" android: layout_width="fill_parent" android: layout_height="fill_parent" > <Text. View android: layout_width="fill_parent" android: layout_height="wrap_content" android: text="@string/hello" /> </Linear. Layout> The above will create an interface in vertical (versus portrait) mode that fills the parent Both in width and write and wraps and content as necessary.

XML interface it's a tree of XML elements, Inspired by web authoring Build up UI quickly each node is the name of a View class (example is just one View element). Create your own View ---extends Each node can have multiple attributes Look to API for details

XML interface <Text. View xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent" android: text="@string/hello"/> xmlns: android XML namespace declaration that tells the Android tools that you are going to refer to common attributes defined in the Android namespace. The outermost tag in every Android layout file must have this attribute. android: layout_width This attribute defines how much of the available width on the screen this View should consume. As it's the only View so you want it to take up the entire screen, which is what a value of "fill_parent" means. android: layout_height This is just like android: layout_width, except that it refers to available screen height. android: text This sets the text that the Text. View should display. In this example, you use a string resource instead of a hard-coded string value. The hello string is defined in the res/values/strings. xml file.

Using Android Studio IDE to Visually Create XML file Visual creation of XML file Create File-> New->XML -> Layout XML File Specify name of xml file Specify Layout type

Visually creating interface in drag and drop Drag and drop Call alter properties in Properties window Below we see Linear. Layout of 6 widgets

<? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="match_parent" android: layout_height="match_parent" android: orientation="vertical"> <Text. View android: layout_width="wrap_content" android: layout_height="wrap_content" android: text. Appearance="? android: attr/text. Appearance. Large" android: text="Please Login" android: id="@+id/text. View_Top. Label" /> <Text. View android: layout_width="wrap_content" android: layout_height="wrap_content" android: text. Appearance="? android: attr/text. Appearance. Small" android: text="login" android: id="@+id/text. View_login" /> <Edit. Text android: layout_width="match_parent" android: layout_height="wrap_content" android: id="@+id/edit. Text_Login" /> <Text. View android: layout_width="wrap_content" android: layout_height="wrap_content" android: text. Appearance="? android: attr/text. Appearance. Small" android: text="password" android: id="@+id/text. View_password" /> <Edit. Text android: layout_width="match_parent" android: layout_height="wrap_content" android: input. Type="text. Password" android: ems="10" android: id="@+id/edit. Text_Password" /> <Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="New Button" android: id="@+id/button_Enter" /> </Linear. Layout> Here is code of layout created

XML Interface tags Besides drag and drop you can edit the xml file directly…. you will see examples throughout this lecture

Lets return to looking at some of the possible View. Group Layouts

Layout Options ---there a number Determines how the layout is structured. Linear. Layout A Layout that arranges its children in a single column or a single row. The direction of the row can be set by calling set. Orientation(). You can also specify gravity, which specifies the alignment of all the child elements by calling set. Gravity() or specify that specific children grow to fill up any remaining space in the layout by setting the weight member of Linear. Layout. Params. The default orientation is horizontal. Relative. Layout Frame. Layout Grid. Layout Linear. Layout AND MANY MORE (see children of View. Group in API) Relative. Layout Grid. Layout

Linear. Layout Good for smaller devices (like phones over Tablets) or when simple interface makes sense More commonly used in Vertical Layout in column (for Vertical) or row (for Orientation Horizontal) one after another child View objects Some Examples

Linear. Layout Good: Simple Know exactly how it will look on every device Bad: Well for many interfaces too simple…. BUT see next slide BUT, REMEMBER you can have a View. Group (another Layout) inside as a member of the Linear. Layout to make a more COMPLEX interface ALSO can make more coplex

Linear. Layout Very SIMPLE Example arranges by single column (vertical orientation) <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent" android: orientation="vertical" > <Text View android: layout_width=“fill_parent” android: layout_height=“wrap_content” android: text=“@string/hello”/> </Linear. Layout> VERY simple example – Linear. Layout with one child View object, a Text. View saying Hello….

Linear. Layout Example 2 <? xml version="1. 0" encoding="utf-8"? > <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="fill_parent" android: layout_height="fill_parent“ android: orientation="vertical" > <Button android: id="@+id/btn_webbrowser" android: layout_width="fill_parent" android: layout_height="wrap_content" android: text="Web Browser“ android: on. Click="on. Click. Web. Browser" /> <Button android: id="@+id/btn_makecalls" android: layout_width="fill_parent" android: layout_height="wrap_content“ android: text="Make Calls" android: on. Click="on. Click. Make. Calls" /> <Button android: id="@+id/btn_show. Map" android: layout_width="fill_parent" android: layout_height="wrap_content“ android: text="Show Map" android: on. Click="on. Click. Show. Map" /> <Button android: id="@+id/btn_launch. My. Browser" android: layout_width="fill_parent" android: layout_height="wrap_content" android: text="Launch My Browser" android: on. Click="on. Click. Launch. My. Browser" /> </Linear. Layout> Linear. Layout with 4 child View objects, all are buttons

Linear. Layout attributes You can set either in XML or with set*() methods. Xml android: orientation=“vertical” code (ll is Linear. Layout instance) ll. set. Orientation(VERTICAL);

Each View or View. Group can have its own set of attributes…but, some are very common Attribute Description layout_width specifies width of View or View. Group layout_height specifies height layout_margin. Top extra space on top layout_margin. Bottom extra space on bottom side layout_margin. Left extra space on left side layout_margin. Right extra space on right side layout_gravity how child views are positioned layout_weight how much extra space in layout should be allocated to View (only when in Linear. Layout or Table. View) layout_x x-coordinate layout_y y-coordinate

Linear. Layout XML attributes & the java class’s corresponding methods android: baseline. Aligned set. Baseline. Aligned(boolean) When set to false, prevents the layout from aligning its children's baselines. android: baseline. Aligned. Child. Index set. Baseline. Aligned. Child. Index(int) When a linear layout is part of another layout that is baseline aligned, it can specify which of its children to baseline align to (that is, which child Text. View). android: gravity set. Gravity(int) Specifies how to place the content of an object, both on the x- and y-axis, within the object itself. android: measure. With. Largest. Child When set to true, all children with a weight will be considered having the minimum size of the largest child. android: orientation set. Orientation(int) Should the layout be a column or a row? Use "horizontal" for a row, "vertical" for a column. android: weight. Sum Defines the maximum weight sum.

What about more complex interfaces? …. . yes you can do this especially with Nested Layouts

More Complexity Example of Nested Linear. Layouts Here have First Linear. Layout (vertical) that contains Image. View and then another Linear. Layout (itself has 2 Text. Views) Image. View 2 Text. Views

<? xml version="1. 0" encoding="utf-8"? > Another Nested Linear. Layout Example <Linear. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="match_parent" android: layout_height="match_parent" android: layout_margin="10 dp" android: orientation="vertical"> <Text. View android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Without using weight. Sum" android: text. Color="@android: color/black" android: text. Size="25 sp" /> <Linear. Layout android: layout_width="match_parent" android: layout_height="wrap_content" android: orientation="horizontal"> <Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Android" /> <Button android: layout_width="wrap_content" android: layout_height="wrap_content" android: text="Java" /> </Linear. Layout> <Linear. Layout <Text. View android: layout_width="match_parent" android: layout_width="wrap_content" android: layout_height="wrap_content" android: layout_margin. Top="10 dp" android: layout_margin. Top="20 dp" android: orientation="horizontal" android: text="Using weight. Sum" android: weight. Sum="1"> android: text. Color="@android: color/black" <Button android: text. Size="25 sp" /> android: layout_width="wrap_content" android: layout_height="wrap_content" <Linear. Layout android: layout_weight="0. 5" android: layout_width="match_parent" android: text="Android" /> android: layout_height="wrap_content" <Button android: orientation="horizontal" android: layout_width="wrap_content" android: weight. Sum="1"> android: layout_height="wrap_content" android: layout_weight="0. 5" There are 3 Linear. Layouts nested inside the outer Linear. Layout <Button android: text="C" /> android: layout_width="wrap_content" </Linear. Layout> android: layout_height="wrap_content" <Linear. Layout android: layout_weight="0. 7" android: layout_width="match_parent" android: text="Android" /> android: layout_height="wrap_content" <Button android: layout_margin. Top="10 dp" android: layout_width="wrap_content" android: orientation="horizontal" android: layout_height="wrap_content" android: weight. Sum="1"> android: layout_weight="0. 3" android: text="C" /> </Linear. Layout> <Button android: layout_width="wrap_content"

You can nest Any kind of Layouts –like here you can have a View. Group (another Layout) inside as a member of the Linear. Layout to make a more COMPLEX interface

Whatever Layout you choose ---it will contain Views and even other Layouts As we see here we have an Interface that overall is a Linear. Layout It contains 2 Views and 1 Relative. Layout The Relative. Layout contains 3 Views

Another Option to get Complexity What about Other Layouts Relative. Layout is good ---and can make your design EASIER Note: there is more than one way to use Layouts to create a look in an interface that is the same --so, this in part is an art and in part how you think of things ---but, sometimes as we will see later some Layouts can be faster (especially when compared to nested layouts)

Relative. Layout GOOD: Can give more complex interfaces Know what will look like on different sized devices Position relative to another position CAUTION This is meant to be flat –meaning you don’t want/need to nest Relative. Layouts in each other –sometimes may impact speed in rendering and some have reported problems.

Relative. Layout – how it works Parameters in XML (or can map to method calls in Java Relative. Layout class) Position relative to Parent android: layout_align. Parent. Top, android: layout_align. Parent. Bottom, android: layout_align. Parent. Left, android: layout_align. Parent. Right VALUE = ‘true’ ---If "true", moves to that edge of Parent android: layout_center. Vertical VALUE= “true” -- If "true", centers this child vertically within its parent. Position relative to another widget android: layout_below, android: layout_above, android: layout_to. Left. Of, android: layout_to. Right. Of VALUE=“resource ID of other widget” -- Positions the top edge of this view below/aboveof the view specified with a resource ID. OR Positions the left edge of this view to the left/right of the view specified with a resource ID.

Relative. Layout – how it works Example <? xml version="1. 0" encoding="utf-8"? > <Relative. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="match_parent" Says we have Relative. Layout android: layout_height="match_parent" android: padding. Left="16 dp" that width and height match parent android: padding. Right="16 dp" > (which is the entire app screen) <Edit. Text android: id="@+id/name" android: layout_width="match_parent" 1 st View object in Relative. Layout android: layout_height="wrap_content" will be at the top and is the Edit. Text android: hint="@string/reminder" /> <Spinner android: id="@+id/dates" android: layout_width="0 dp" 2 nd View object here is specified to be android: layout_height="wrap_content" st object Edit. Text (id = name) below the 1 android: layout_below="@id/name" & aligned to left of parent(app ) android: layout_align. Parent. Left="true" android: layout_to. Left. Of="@+id/times" /> & Left of the Button with id=times (see below) <Spinner android: id="@id/times" android: layout_width="96 dp" 3 rd View object here is specified to be android: layout_height="wrap_content" st object Edit. Text (id = name) android: layout_below="@id/name" below the 1 android: layout_align. Parent. Right="true" /> & aligned to left of parent(app ) <Button android: layout_width="96 dp" android: layout_height="wrap_content" 4 th View object here is specified to be android: layout_below="@id/times" below the 2 nd object Spinner (id = times) android: layout_align. Parent. Right="true" android: text="@string/done" /> & aligned to right of parent(app ) </Relative. Layout>

More on Relative. Layout parameters Center Top Bottom of Parent

There are many other Layouts Look them up on Android Developer site They include: Table. Layout (think a table), Grid. Layout, Frame. Layout, and MORE!! Table. Layout Read book and look at developer website to learn about others like Table. Layout

Table. Layout Example <? xml version="1. 0" encoding="utf-8"? > <Table. Layout xmlns: android="http: //schemas. android. com/apk/res/android" android: layout_width="match_parent" android: layout_height="match_parent" android: stretch. Columns="1"> <Table. Row> <Text. View android: text="@string/table_layout_4_open" android: padding="3 dip" /> <Text. View android: text="@string/table_layout_4_open_shortcut" android: gravity="right" android: padding="3 dip" /> </Table. Row> <Table. Row> <Text. View android: text="@string/table_layout_4_save" android: padding="3 dip" /> <Text. View android: text="@string/table_layout_4_save_shortcut" android: gravity="right" android: padding="3 dip" /> </Table. Row> </Table. Layout> This Table has 2 Rows

Table. Layout example 2 Here use gravity to move the 2 nd item in row to the right ONLY partial XML code <? xml version="1. 0" encoding="utf-8"? > <Table. Layout xmlns: android="http: //schemas. android. com/apk/res/a android: layout_width="match_parent" android: layout_height="match_parent" android: stretch. Columns="1"> <Table. Row> <Text. View android: layout_column="1" android: text="Open. . . " android: padding="3 dip" /> <Text. View android: text="Ctrl-O" android: gravity="right" android: padding="3 dip" /> </Table. Row> <Table. Row> now Con. TIn. UE on For 2 nd row

Do different Layouts have better performance? ? ? …. . actually yes they can

CAUTION --- speed of rendering can be impacted by design choices Example from developer website Problem: nesting several instances of. Linear. Layout that use the layout_weight parameter can be especially expensive as each child needs to be measured twice.

Comparing speeds: Nested Linear. Layout VERSUS Relative. Layout Nested Linear. Layout Relative. Layout speed: Measure: 0. 977 ms Layout: 0. 167 ms Draw: 2. 717 ms Relative. Layout is FASTER Measure: 0. 598 ms Layout: 0. 110 ms Draw: 2. 146 ms

More on improving performance Go to Developer site and search on “Improving Layout Performance” https: //developer. android. com/training/improvinglayouts/index. html

Related Layout Tags to create a DYNAMIC layout contents –one where the contents are dynamic (maybe read in from database or? ? ? ) Subclasses of Adapter. View

SOME Examples of Layout Tags that can load contents/data dynamically List. View Gallery Grid. View All these (and there are more) are descendants of Adapter. View

List. View <List. View …. . > A view that shows items in a vertically scrolling list. Attributes android: divider Drawable or color to draw between list items. android: divider. Height of the divider. android: entries Reference to an array resource that will populate the List. View. android: footer. Dividers. Enabled When set to false, the List. View will not draw the divider before each footer view. android: header. Dividers. Enabled When set to false, the List. View will not draw the divider after each header view.

Gallery <Gallery …. > A view that shows items in a centerlocked, horizontally scrolling list. The default values for the Gallery assume you will be using Theme_gallery. Item. Background as the background for each View given to the Gallery from the Adapter. If you are not doing this, you may need to adjust some Gallery properties, such as the spacing. Attributes android: animation. Duration set. Animation. Duration(int) Sets how long a transition animation should run (in milliseconds) when layout has changed. android: gravity set. Gravity(int) Specifies how to place the content of an object, both on the x- and y-axis, within the object itself. android: spacing set. Spacing(int) android: unselected. Alpha set. Unselected. Alpha(float) Sets the alpha on the items that are not selected.

Code—setting up Gallery See our website, book and developer website for more detailed explanation of Gallery @Override public void on. Create(Bundle saved. Instance. State) { super. on. Create(saved. Instance. State); set. Content. View(R. layout. main); //use xml file that contain a <Gallery> Gallery gallery = (Gallery) find. View. By. Id(R. id. gallery); gallery. set. Adapter(new Image. Adapter(this)); gallery. set. On. Item. Click. Listener(new On. Item. Click. Listener() { public void on. Item. Click(Adapter. View parent, View v, int position, long id) { Toast. make. Text(Hello. Gallery. this, "" + position, Toast. LENGTH_SHORT). show(); We need a “HANDLE” to the Gallery } we created from XML in our Java code to }); handle events when an item in Gallery is } clicked on

How to populate the Grid. View, or Gallery or List. View Look on our class website for more detailed examples (too much code to put into powerpoint) or look in your book or at developer website or search on google for tutorials This is a power point “beginning” lecture on Layout and we can’t cover all the many and elaborate examples --- that is best served by websites and tutorials and books

Note there is also Absolute Layout You position View widgets exactly where you want them. It is DEPRECATED Great for fast creation of GUI –NOT GOOD for changing GUI dimension between different devices that is why we have those different “controlled” layouts like Linear. Layout, Relative. Layout and more Interesting tutorial on Absolute. Layout : https: //developer. xamarin. com/guides/xamarin-forms/user-interface/layouts/absolute-layout/