Linear-Layout (Building Layout)

As i have mentioned before, “View is simply a rectangular area on the screen and it’s responsible for drawing and event handling”. However, to organize those rectangular areas on purpose, we will need the help of ViewGroups.

The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.

In this session, we will only discuss two ViewGroup, Linear-Layout and Relative-Layout, as they’re really straightforward and efficient.

Linear-Layout:

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.

Syntax:

<LinearLayout android:layout_width=”match_parent”
 android:layout_height=”match_parent”
 android:orientation=”vertical”>
<childrenView />
<childrenView />
…..
</LinearLayout>
Vertical Linear-Layout

android:layout_width and android:layout_height are required attributes for almost every view because they decide how much space that view will occupy our phone screen. The value of these two attribute can be:

“match_parent” :Setting the layout of a widget to fill_parent will force it to expand to take up as much space as is available within the layout element it’s been placed in.
Using match_parent

or

“wrap_content” : Setting a View’s size to wrap_content will force it to expand only far enough to contain the values (or child controls) it contains.
Using wrap_content

Beside that, we can also adjust View size by using “dp” or “dip”

Density-independent Pixels — an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both “dip” and “dp”, though “dp” is more consistent with “sp”.
Using dp

For Linear-layout, there’s one more attribute that you need to keep eyes on it, android:orientation (with two values, “vertical” and “horizontal”) , since it specifies the direction of all your children view inside Linear-layout. By default, the value of android:orientation is “horizontal”.

Task 2: Create this layout (two images are 150dp*150dp) in XML visualizer

Hint: looking for available images of the site and “android:src” attribute of ImageView

Task 1 answer:

  • 3 Views (3 TextView(s)) and 1 ViewGroup (LinearLayout) (ViewGroup is a special View)
  • 2 attribute-names “android:layout_width” “android:layout_height”
  • 2 attribute-values “match_parent” “wrap_content”