The document discusses various layouts and views in Android app development, including linear layout, relative layout, table layout, grid layout and constraint layout. It explains that views are basic UI elements and layouts define how views are arranged. It provides examples of how to use attributes like android:orientation, android:layout_weight, and android:gravity in linear layout as well as android:collapseColumns in table layout.

1. Mobile Application
Development
Instructor:
Muhammad Jameel
Muhammad.jameel@superior.edu.pk

2. Outline
View, View Groups, Layouts, Layout Types, Linear Layout, Linear Layout Attributes, Linear
Layout Example, Table Layout, Absolute Layout, Frame Layout

3. What is View in Android App Development?
•The basic building block for user interface is
a View.
•View is created from the View class and occupies a
rectangular area on the screen.
•View is responsible for drawing and event
handling.
•View is the base class for widgets, which are used
to create interactive UI components like buttons,
text fields, etc.

4. View Groups in Android App Development?
• The View Group is a subclass of View and provides
invisible container that hold other Views or other View
Groups and define their layout properties.

5. What is Layout in Android App Development
• Layouts are subclasses of View Group class, and a typical layout defines
the visual structure for an Android user interface.
• The layout defines the visual structure of your application.
• Android Studio uses this structure to display the view elements on the
screen.
• Layouts are also called view containers.
• A layout may contain any type of views such as buttons, labels, textboxes,
and so on.

6. Android Studio Layout Types
• Linear Layout
• Relative Layout
• Table Layout
• Absolute Layout
• Frame Layout
• Grid Layout
• Constraint Layout

7. Linear Layout
• Android Linear Layout is a View Group that aligns all its
children in either vertically or horizontally.

8. Linear Layout Attributes
• android:id - This is the ID which uniquely identifies the layout.
• android:baselineAligned - This must be a Boolean value, either "true"
or "false" and prevents the layout from aligning its children's baselines.
• android:divider - This is drawable to use as a vertical divider between
buttons. You use a color value, in the form of "#RGB", "#ARGB",
"#RRGGBB", or "#AARRGGBB".
• android:gravity - This specifies how an object should position its
content, on both the X and Y axes. Possible values are top, bottom, left,
right, center, center_vertical, center_horizontal etc.
• android:orientation - This specifies the direction of arrangement and
you will use "horizontal" for a row, "vertical" for a column. The default is
horizontal.

9. Linear Layout Attributes
• android:layout_weight – This assigns importance on how much screen
a View can relatively occupy compare to others.

10. Linear Layout android:baselineAligned Example

11. Linear Layout android:baselineAligned Example

12. Linear Layout android:layout_weight Example

13. Linear Layout android:divider Example

14. Table Layout
• Android Table Layout going to be arranged groups of views into rows
and columns.
• You will use the <TableRow> element to build a row in the table. Each
row has zero or more cells; each cell can hold one View object.

15. Table Layout Example

16. Table Layout Example

17. Assignment
Q-1: Explain the following attributes of Table Layout with the help of an
Example.
1. android:collapseColumns
2. android:shrinkColumns
3. android:stretchColumns

18. android:shrinkColumns
• android:shrinkColumns="0"—The first column's width shrinks or
reduces by word-wrapping its content. android:shrinkColumns="*"—
The content of all columns is word-wrapped to shrink their widths.

19. android:stretchColumns
• The specified columns are stretched to take up any available space on
the row. Examples: android:stretchColumns="1"—The second column
(because the column numbers are 0-based) is stretched to take up
any available space in the row.

20. android:collapseColumns
• android:collapseColumns means it hide given column.
android:stretchColumns="*" TextView :- android:layout_column="2"
Meanning if tablerow first column layout parameter not start with 0
then empty view added into row.

21. Absolute Layout
• An Absolute Layout lets you specify exact locations (x/y coordinates) of its
children.
• Absolute layouts are less flexible and harder to maintain than other types
of layouts without absolute positioning.

22. Absolute Layout Example

23. Frame Layout
• You can add many views or View Groups to Frame layout just like the
other layouts.
• Views are stacked on the top of each other, for example if you are going to
add two buttons, one button is going to be add on the top of other button.
• This layout is very handy when you want to display one view at given time
of instant, and you want to ensure other views hidden from the user site.
• For example in e-books app you have one page visible at a time and other
invisible to user.
• The size of the frame layout is the size of largest view contained inside so
smaller views may be stretched.

24. Frame Layout Example

25. Frame Layout Example

26. Assignment
Q-2: Explain the following Layouts with the help of an Example.
1. Grid Layout
2. Constraint Layout

27. ConstraintLayout
• ConstraintLayout allows you to create large and complex layouts with
a flat view hierarchy (no nested view groups).
fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.keyframe_one)
constraintLayout = findViewById(R.id.constraint_layout) // member
variable
}

28. Grid layout
• A layout that places its children in a rectangular grid.
GridLayout.setColumnOrderPreserved(boolean).

29. Assignnment_02a
Create an application named “Student” in which design “Register
Activity” and “Login Activity” using Linear and Relative layout.
Note:
Student Name (Edit Text)
Student Email
Student Address
Student Phone
Register Button

30. Assignment_02b
Design a calculator layout as given in your mobile phone, you can use
grid layout.