Android Development: Application Layout Richard S. Stansbury 2015.

Slides:



Advertisements
Similar presentations
LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Android UserInterfaces Nasrullah Niazi. overView All user interface elements in an Android app are built using View and ViewGroup objects. A View is an.
CE881: Mobile and Social Application Programming Simon M. Lucas Layouts.
Tutorial 6 Creating Fixed-Width Layouts
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
More on User Interface Android Applications. Layouts Linear Layout Relative Layout Table Layout Grid View Tab Layout List View.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
Using HTML to Create Tables in Web pages Connie Lindsey November 2005.
HTML Essentials Tables and Table Tags. Overview Use of Tables goes beyond tabulating data Frequently used to format Web pages / control layout Especially.
Android: Layouts David Meredith
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
Creating Android user interfaces using layouts 1Android user interfaces using layouts.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 9: Customize! Navigating with a Master/Detail.
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
Liang, Introduction to Java Programming, Eighth Edition, (c) 2011 Pearson Education, Inc. All rights reserved Modify Android Objects Using.
PROG Mobile Java Application Development PROG Mobile Java Application Development Developing Android Apps: Components & Layout.
CO1552 – Web Application Development Lists, Special Characters, and Tables.
Favorite Twitter® Searches App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
Tip Calculator App Building an Android App with Java © by Pearson Education, Inc. All Rights Reserved.
Android Layouts. Layouts Define the user interface for an activity Layouts are defined in.xml files – within /res/layout folder – different layout can.
ANDROID – INTERFACE AND LAYOUT L. Grewe. Interfaces: Two Alternatives Code or XML  You have two ways you can create the interface(s) of your Application.
Understanding Hello Android 1 CS300. Activity  Similar to a form  Base class for the visual, interactive components of your application  Android API.
CHAPTER 10 Formatting Tables and Forms. Using Tables the Right Way  HTML and XHTML have a LOT of tags dedicated to building a table  If you have only.
HTML: Tables & Frames Internet Technology1. HTML: Tables Table tags ► surround the entire table ► header row (text is boldfaced) ► surround each row ►
Responsive design - Bedrock to our site Responsive site templates included.
10/4/2015Tables1 Spring, 2008 Modified by Linda Kenney 4/2/08.
Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout.
User Interfaces: Part 1 (View Groups and Layouts).
Application Development for mobile Devices
XHTML 1.1  Derived from Standard Generalized Markup Language (SGML) of ISO  XHTML concerned primary with content rather than presentation and style 
XHTML1-1 Extensible HyperText Markup Language (XHTML) Part 2 Xingquan (Hill) Zhu
ECA 228 Internet/Intranet Design I Tables. ECA 228 Internet/Intranet Design I Basic HTML Tables Created as a way to present rows and clumns of data.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
Unit 4 Create and Use Tables. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Reasons for using tables Unit 4 Page 1 Display.
1 Lesson 13 Organizing and Enhancing Worksheets Computer Literacy BASICS: A Comprehensive Guide to IC 3, 3 rd Edition Morrison / Wells.
Lecture 6 More Advanced HTML Boriana Koleva Room: C54
Android Development: Basic Widgets Richard S. Stansbury 2015.
MIMOS Berhad. All Rights Reserved. Nazarudin Wijee Mohd Sidek Salleh Grid Computing Lab MIMOS Berhad P-GRADE Portal Heuristic Evaluation.
HW#9 Clues CSCI 571 Fall, HW#9 Prototype
Using Tables for Layout INP150 Session #8. Layout Map out your page Design with paper and pencil Determine number of rows and columns you need Determine.
1 Android Development Lean and mean introduction Based on a presentation by Mihail L. Sichitiu.
CS378 - Mobile Computing User Interface Basics. User Interface Elements View – Control – ViewGroup Layout Widget (Compound Control) Many pre built Views.
20-753: Fundamentals of Web Programming 1 Lecture 6: Advanced HTML Fundamentals of Web Programming Lecture 6: Advanced HTML.
Building User Interfaces Basic Applications
CS378 - Mobile Computing More UI. UI Review Containers – more formally ViewGroups – store widgets and other containers – examples: LinearLayout, RelativeLayout,
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Chapter 2 Building User Interfaces and Basic Applications.
ANDROID LAYOUTS AND WIDGETS. Slide 2 Introduction Parts of the Android screen Sizing widgets and fonts Layouts and their characteristics Buttons, checkboxes.
CMPE419 Mobile Application Development Asst.Prof.Dr.Ahmet Ünveren SPRING Computer Engineering Department Asst.Prof.Dr.Ahmet Ünveren
Laying out Elements with CSS
Mobile Software Development for Android - I397
Android Basic XML Layouts
Mobile Application Development BSCS-7 Lecture # 8
Mobile Application Development Chapter 4 [Android Navigation and Interface Design] IT448-Fall 2017 IT448- Fall2017.
HNDIT2417 Mobile Application Development
CIS 470 Mobile App Development
Exercise 39 - Skills A table on your Web page provides one of the best ways to organize and align graphics, text and other objects on the page. You can.
CMPE419 Mobile Application Development
Mobile Computing With Android ACST 4550 Android Layouts
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Chapter 11 Review.
CIS 470 Mobile App Development
CMPE419 Mobile Application Development
Korea Software HRD Center
Lesson 5: HTML Tables.
CMPE419 Mobile Application Development
CS 240 – Advanced Programming Concepts
Android Sensor Programming
Presentation transcript:

Android Development: Application Layout Richard S. Stansbury 2015

Linear Layout: Fill Default: older layout elements have higher priority when it comes to display real estate Consider the following scenario: – Linear layout with three children – The first child has “wrap_content” – The second child has “match_parent” – Regardless of its configuration, a third child would not have space

Linear Layout: Weight Some people were a bit confused about weight when it came to the last build activity. Details… Weight by default for a component is zero (0) Weight indicates the proportion of the real-estate that a widget gets – Two widgets of equal weight will have equal space. – If widget 1’s weight is 2 and widget 2’s weight is 1, then widget 1 will have twice the space of widget 2.

Linear Layout: Weight Continued Allocating a percentage of space is possible (vertical orientation) – Set heights to zero – Set weights for each component to percentage of real-estate you want to give the component – Weights 50, 20, 30 would result in an widget 1 having 50%, widget 2 20%, and widget 3 having 30%

Gravity Gravity within the widget – Where does the content of the widget align within its borders Gravity within the space of a layout

Relative Layout Supports: – Alignment relative to the container – Alignment relative to other objects XML parameters for alignment within the container (set true or false): – Android:layout_alignParentTop – Android:layout_alignParentBottom – Android:layout_alignParentLeft – Android:layout_alignParentRight – Android:layout_centerInParent – Android:layout_centerHorizontal – Android:layout_centerVertical  See also:  ayout.LayoutParams.html

Relative Layout (continued) Relative to other widgets – Android. = ” or, ” if first use of Position parameters:  android:layout_above  android:layout_below  android:layout_toLeftOf  android:layout_toRightOf

Relative Layout (continued) Alignment Parameters – android:layout_alignTop – android:layout_alignBottom – android:layout_alignLeft – android:layout_alignRight – android:layout_alignBaseline Base line is the implicit line in which text sits – e.g. for two buttons the labels of the buttons would align vertically Processed in two passes so you can align to things that have not yet been declared and vice-versa

Example How would you implement this view? – Components? – Alignments

Relative Layout and Overlap Relative Layout supports overlap with each new item being added to a higher layer in the z direction – i.e. newer stuff sits on top of older stuff Consider a background image with content on top.

Table Layout TableLayout defines a view in which content is divided into rows. – TableRow defines a new row – Content added to the TableRow are divided into columns – Total number of columns for the table is equal to the maximum number of columns across all defined rows – At least one column per widget

Table Layout (cont) parameters – Widgets filled left to right unless a a widget is given an explicit column android:layout_column = “ ” – Where is indexed from zero (0) – Each widget consumes one column – Column span can be set to extended across multiple columns android:layout_span = “ ”

Table Layout Column manipulation – Parameters for a specific column number can be set as a parameter to the TableLayout Stretch – android:stretchColumns – setColumnShrinkable Shrink – android:shrinkColumns – setColumnStretchable() Collapse – Make a column invisible android:collapseColumns setColumnCollapsed()

Example How many rows? How many columns? How do we get the EditText field to span remainder of table? How do we move Reset and Submit to the right?

ScrollView A scroll view can be a layout of layouts. Allows support for smaller devices lacking screen real-estate - vertical scroll - horizontal scroll view (Android 1.5 or later)