SlideShare a Scribd company logo
1 of 60
BUILDING LAYOUTS
VIEW GROUPS
 View Groups are a collection of views. (Container for views)
 There can only be one root view. So if we have more than one view, we
need to put them in a view group
TYPES OF VIEW GROUPS
 Linear Layout
 Relative Layout
LINEAR LAYOUT
 It can arrange its children in a vertical column
 Notice that we are not limited to just one textview and one imageview.
We can have as many as we want.
LINEAR LAYOUT
 It can also arrange its children in a horizontal row
RELATIVE LAYOUT
 Also has its own rules on how to position its children within it.
 For Example
 Relative to the parent
 Relative to t
RELATIVE LAYOUT
 Relative to parent
 A child imageview aligned to the top of the parent
 A child textview aligned to the bottom of the parent
RELATIVE LAYOUT
 Relative to other views
LINEAR LAYOUT
 <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
 </LinearLayout>
WIDTH AND HEIGHT
 Fixed width and height
 Wrap content
 Match parent
EVENLY SPACING OUT VIEWS
LAYOUT WEIGHT
 Can be used to evenly distribute views.
 The higher the weight, the more space the view takes
EXAMPLES
RELATIVE LAYOUT
 This will help you build even more flexible layouts
RELATIVE TO OTHER VIEWS
 When positioning views relative to other views, you can constraints eg;
 One view must be above the other
 Or one imageView must be to the left of another
PADDING VS MARGIN
QUIZ
Learn how to build layouts.
Learn how to build layouts.
Learn how to build layouts.
Learn how to build layouts.
Learn how to build layouts.

More Related Content

Viewers also liked

Accessibility is a missed opportunity
Accessibility is a missed opportunityAccessibility is a missed opportunity
Accessibility is a missed opportunityAndy Goodwin
 
Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)
Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)
Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)New City Church
 
Don't You Forget About Me
Don't You Forget About MeDon't You Forget About Me
Don't You Forget About MeAndy Goodwin
 
4. touchstone method
4. touchstone method4. touchstone method
4. touchstone methodhafsa abbas
 
DTCWV Winter Newsletter 2016
DTCWV Winter Newsletter 2016DTCWV Winter Newsletter 2016
DTCWV Winter Newsletter 2016Chuck Bailey
 

Viewers also liked (6)

Accessibility is a missed opportunity
Accessibility is a missed opportunityAccessibility is a missed opportunity
Accessibility is a missed opportunity
 
Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)
Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)
Sermon Slide Deck: "Responding to a World of Hurt" (Luke 10:25-37)
 
SERDYUK_Resume
SERDYUK_ResumeSERDYUK_Resume
SERDYUK_Resume
 
Don't You Forget About Me
Don't You Forget About MeDon't You Forget About Me
Don't You Forget About Me
 
4. touchstone method
4. touchstone method4. touchstone method
4. touchstone method
 
DTCWV Winter Newsletter 2016
DTCWV Winter Newsletter 2016DTCWV Winter Newsletter 2016
DTCWV Winter Newsletter 2016
 

More from Eng Chrispinus Onyancha

More from Eng Chrispinus Onyancha (6)

Mean stack
Mean stackMean stack
Mean stack
 
Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.Play framework And Google Cloud Platform GCP.
Play framework And Google Cloud Platform GCP.
 
Android beginner presentation
Android beginner presentationAndroid beginner presentation
Android beginner presentation
 
Welcome to android Apps
Welcome to android AppsWelcome to android Apps
Welcome to android Apps
 
Connecting your android application to cloud.
Connecting your android application to cloud.Connecting your android application to cloud.
Connecting your android application to cloud.
 
The android activity lifecycle
The android activity lifecycleThe android activity lifecycle
The android activity lifecycle
 

Recently uploaded

Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Steffen Staab
 
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
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Modelsaagamshah0812
 
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
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...panagenda
 
(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
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
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
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software DevelopersVinodh Ram
 
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
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsArshad QA
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...kellynguyen01
 
Active Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdfActive Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdfCionsystems
 
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
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
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
 

Recently uploaded (20)

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
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
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
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
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
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
(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...
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
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
 
Professional Resume Template for Software Developers
Professional Resume Template for Software DevelopersProfessional Resume Template for Software Developers
Professional Resume Template for Software Developers
 
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
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
Active Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdfActive Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdf
 
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
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
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
 

Learn how to build layouts.

Editor's Notes

  1. +View Groups are a collection of views. +There can only be one root view. So if we have more than one view, we need to put them in a view group. +A view group is a container of views. +When a view group contains chi
  2. +The red and orange rectangles are view groups +They can have a width, height, background color or other attributes +Background color can also be transparent so its not visible to the user +If a view contains other views, we call it the parent of the views +If a view is inside of a view group, we call it a child of that view group +If there are multiple children, then each of those children are siblings to each other
  3. A child imageview aligned to the top of the parent A child textview aligned to the bottom of the parent This also works for aligning to parents left or right edge as well as the center
  4. This is a little more code that we are used Make some ob servations about this code. The parent code is in red and the child code is blue
  5. Go to the visualizer and examin the tags on the XML Open the android documentation for linear layout. Google “android orientation” s
  6. Link to the XML visualizer HINT: Use the Layout cheat sheet to copy and paste the code +View group layout parameters/attributes are handled by the parent e.g layout_width Here are the words we introduced in this video: match_parent ViewGroup layout parameter
  7. http://labs.udacity.com/android-visualizer/#/android/equal-space-children
  8. Go to the visualiser and demonstrate how changing the layout weights can vary the size of the views
  9. Go to the visiualiser : http://labs.udacity.com/android-visualizer/#/android/linear-layout-weight and create the above view
  10. Summary For Linear layouts. +A Linear Layout can have a vertical orientation or a horizontal orientation +The individual views can have a weight values to fill up the extra space
  11. This relative layout is set to have width of match_parent and height of mach_parent so its as big as the device
  12. How children can be aligned
  13. The other values are false by default so you don’t need to include them in the element tag
  14. There are even more attributes that you can set. Eg centerHorizontal
  15. By default all views are aligned to the left of the parent as seen in this slide +http://labs.udacity.com/android-visualizer/#/android/relative-layout-align-to-parent
  16. Go To code here: https://gist.github.com/anonymous/e7eb5ceff9dedfc376eb
  17. We would start with these view. The will act as the anchor views The rest will be positioned relative to these
  18. So wee need to specify view IDs for the reference while positioning views
  19. This is how we assign view IDs We can assign view IDs to any view Go to the documentation website to read about more attributes
  20. Go to link: http://labs.udacity.com/android-visualizer/#/android/relative-layout-list-item
  21. Go to this link to demo: http://labs.udacity.com/android-visualizer/#/android/padding-and-margin