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

Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyFrank van der Linden
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
What is Binary Language? Computer Number Systems
What is Binary Language?  Computer Number SystemsWhat is Binary Language?  Computer Number Systems
What is Binary Language? Computer Number SystemsJheuzeDellosa
 
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
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptkotipi9215
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about usDynamic Netsoft
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityNeo4j
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...ICS
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
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
 
Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...aditisharan08
 
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
 
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
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110
 
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
 
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
 

Recently uploaded (20)

Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The Ugly
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
What is Binary Language? Computer Number Systems
What is Binary Language?  Computer Number SystemsWhat is Binary Language?  Computer Number Systems
What is Binary Language? Computer Number Systems
 
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...
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about us
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
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...
 
Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...Unit 1.1 Excite Part 1, class 9, cbse...
Unit 1.1 Excite Part 1, class 9, cbse...
 
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
 
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
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
 
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
 
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
 

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