SlideShare a Scribd company logo
1 of 23
Mobile Application
Development
Lecture 2
Layout
App UI Sizing and Positioning
T. Yousef Alamir
Absolute positioning (C++, C#, others):
- The programmer specifies the exact pixel coordinates of every
component.
- "Put this button at (x=15, y=75) and make it 70x31 px in size."
Layout managers (Java, Android):
- Objects that decide where to position each component based on some
general rules or criteria.
"Put these four buttons into a 2x2 grid and put these text boxes in a
horizontal
flow in the south part of the app.“
- More flexible and general; works better with a variety of devices.
Sizing and Positioning
ViewGroup superclass represents containers of widgets/views
- layouts are described in XML and mirrored in Java code.
- Android provides several pre-existing layout managers;
you can define your own custom layouts if needed.
- layouts can be nested to achieve combinations of features.
In the Java code and XML:
- an Activity is a ViewGroup.
- various Layout classes are also ViewGroups.
- widgets can be added to a ViewGroup, which will then
manage that widget's position/size behavior
ViewGroup as layout
XML: a language for describing hierarchical text data. *
– Uses tags that consist of elements and attributes.
Tags can be nested.
Some tags are opened and closed;
others self-close.
Example:
<!-- this is a comment -->
<Course
name=“Android"
Year="2016-2017“>
<Instructor color="#000" >Yousef</Instructor>
<Major>Management Information Systems</Major >
</Course>
XML, in brief
XML is case-
sensitive!
Example of LinearLayout:
<LinearLayout ...
android:orientation="horizontal"
tools:context=".MainActivity">
<Button … android:text= “Button 1“ />
<Button … android:text= “Button 2“ />
<Button … android:text= “Button 3“ />
</LinearLayout>
lays out widgets/views in a single line.
LinearLayout
orientation of horizontal (default) or vertical
items do not wrap if they reach the edge
of the screen
Gravity
Weight
Widget box model
Sizing an individual widget
Padding
Margin
GridLayout
GridLayout example 1
GridLayout example 2
Nested layout
Nested layout template
Nested layout exercise
Nested layout solution
RelativeLayout
Relative anchor points
RelativeLayout example
FrameLayout
Thank You
T. Yousef Alamir 2023
http://Yousef.omairtech.com

More Related Content

Similar to Lecture 02: Android Layouts.pptx

Android ui layout
Android ui layoutAndroid ui layout
Android ui layoutKrazy Koder
 
View groups containers
View groups containersView groups containers
View groups containersMani Selvaraj
 
android layouts
android layoutsandroid layouts
android layoutsDeepa Rani
 
Android Tutorial
Android TutorialAndroid Tutorial
Android TutorialFun2Do Labs
 
"Android" mobilių programėlių kūrimo įvadas #2
"Android" mobilių programėlių kūrimo įvadas #2"Android" mobilių programėlių kūrimo įvadas #2
"Android" mobilių programėlių kūrimo įvadas #2Tadas Jurelevičius
 
Android ppt with example of budget manager
Android ppt with example of budget managerAndroid ppt with example of budget manager
Android ppt with example of budget managerNalini Mehta
 
Workshop Android for Java Developers
Workshop Android for Java DevelopersWorkshop Android for Java Developers
Workshop Android for Java Developersmhant
 
Android Screen Containers & Layouts
Android Screen Containers & LayoutsAndroid Screen Containers & Layouts
Android Screen Containers & LayoutsVijay Rastogi
 
03 layouts & ui design - Android
03   layouts & ui design - Android03   layouts & ui design - Android
03 layouts & ui design - AndroidWingston
 
Android Application Development - Level 1
Android Application Development - Level 1Android Application Development - Level 1
Android Application Development - Level 1Isham Rashik
 
[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Androidrizki adam kurniawan
 
Lecture 05. UI programming for Mobile Apps
Lecture 05. UI programming for Mobile AppsLecture 05. UI programming for Mobile Apps
Lecture 05. UI programming for Mobile AppsMaksym Davydov
 
Lec005 android start_program
Lec005 android start_programLec005 android start_program
Lec005 android start_programEyad Almasri
 

Similar to Lecture 02: Android Layouts.pptx (20)

Android ui layout
Android ui layoutAndroid ui layout
Android ui layout
 
View groups containers
View groups containersView groups containers
View groups containers
 
android layouts
android layoutsandroid layouts
android layouts
 
Android Tutorial
Android TutorialAndroid Tutorial
Android Tutorial
 
01 06 - android programming basics
01  06 - android programming basics01  06 - android programming basics
01 06 - android programming basics
 
"Android" mobilių programėlių kūrimo įvadas #2
"Android" mobilių programėlių kūrimo įvadas #2"Android" mobilių programėlių kūrimo įvadas #2
"Android" mobilių programėlių kūrimo įvadas #2
 
Swift
SwiftSwift
Swift
 
Android UI Development
Android UI DevelopmentAndroid UI Development
Android UI Development
 
Android ppt with example of budget manager
Android ppt with example of budget managerAndroid ppt with example of budget manager
Android ppt with example of budget manager
 
Android views and layouts-chapter4
Android views and layouts-chapter4Android views and layouts-chapter4
Android views and layouts-chapter4
 
Workshop Android for Java Developers
Workshop Android for Java DevelopersWorkshop Android for Java Developers
Workshop Android for Java Developers
 
Android Screen Containers & Layouts
Android Screen Containers & LayoutsAndroid Screen Containers & Layouts
Android Screen Containers & Layouts
 
03 layouts & ui design - Android
03   layouts & ui design - Android03   layouts & ui design - Android
03 layouts & ui design - Android
 
Struts 1
Struts 1Struts 1
Struts 1
 
Ui 5
Ui   5Ui   5
Ui 5
 
Android Application Development - Level 1
Android Application Development - Level 1Android Application Development - Level 1
Android Application Development - Level 1
 
6. safe users-guide
6.  safe users-guide6.  safe users-guide
6. safe users-guide
 
[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android[PBO] Pertemuan 12 - Pemrograman Android
[PBO] Pertemuan 12 - Pemrograman Android
 
Lecture 05. UI programming for Mobile Apps
Lecture 05. UI programming for Mobile AppsLecture 05. UI programming for Mobile Apps
Lecture 05. UI programming for Mobile Apps
 
Lec005 android start_program
Lec005 android start_programLec005 android start_program
Lec005 android start_program
 

Recently uploaded

HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comFatema Valibhai
 
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxA Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxComplianceQuest1
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfkalichargn70th171
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdfWave PLM
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationkaushalgiri8080
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about usDynamic Netsoft
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsArshad QA
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendArshad QA
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataBradBedford3
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVshikhaohhpro
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsJhone kinadey
 

Recently uploaded (20)

HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
A Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docxA Secure and Reliable Document Management System is Essential.docx
A Secure and Reliable Document Management System is Essential.docx
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanation
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about us
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Exploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the ProcessExploring iOS App Development: Simplifying the Process
Exploring iOS App Development: Simplifying the Process
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and Backend
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 

Lecture 02: Android Layouts.pptx

  • 1. Mobile Application Development Lecture 2 Layout App UI Sizing and Positioning T. Yousef Alamir
  • 2. Absolute positioning (C++, C#, others): - The programmer specifies the exact pixel coordinates of every component. - "Put this button at (x=15, y=75) and make it 70x31 px in size." Layout managers (Java, Android): - Objects that decide where to position each component based on some general rules or criteria. "Put these four buttons into a 2x2 grid and put these text boxes in a horizontal flow in the south part of the app.“ - More flexible and general; works better with a variety of devices. Sizing and Positioning
  • 3. ViewGroup superclass represents containers of widgets/views - layouts are described in XML and mirrored in Java code. - Android provides several pre-existing layout managers; you can define your own custom layouts if needed. - layouts can be nested to achieve combinations of features. In the Java code and XML: - an Activity is a ViewGroup. - various Layout classes are also ViewGroups. - widgets can be added to a ViewGroup, which will then manage that widget's position/size behavior ViewGroup as layout
  • 4. XML: a language for describing hierarchical text data. * – Uses tags that consist of elements and attributes. Tags can be nested. Some tags are opened and closed; others self-close. Example: <!-- this is a comment --> <Course name=“Android" Year="2016-2017“> <Instructor color="#000" >Yousef</Instructor> <Major>Management Information Systems</Major > </Course> XML, in brief XML is case- sensitive!
  • 5. Example of LinearLayout: <LinearLayout ... android:orientation="horizontal" tools:context=".MainActivity"> <Button … android:text= “Button 1“ /> <Button … android:text= “Button 2“ /> <Button … android:text= “Button 3“ /> </LinearLayout> lays out widgets/views in a single line. LinearLayout orientation of horizontal (default) or vertical items do not wrap if they reach the edge of the screen
  • 23. Thank You T. Yousef Alamir 2023 http://Yousef.omairtech.com