The document discusses mobile application development, focusing on layout, UI, sizing, and positioning techniques. It explains absolute positioning, layout managers, and the ViewGroup superclass, along with XML for describing layouts. Additionally, it covers various layout types such as LinearLayout and RelativeLayout, and their respective use cases in organizing widgets in an app.

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

6. Gravity

7. Weight

8. Widget box model

9. Sizing an individual widget

10. Padding

11. Margin

12. GridLayout

13. GridLayout example 1

14. GridLayout example 2

15. Nested layout

16. Nested layout template

17. Nested layout exercise

18. Nested layout solution

19. RelativeLayout

20. Relative anchor points

21. RelativeLayout example

22. FrameLayout

23. Thank You
T. Yousef Alamir 2023
http://Yousef.omairtech.com