chapter 5 - layouts
TRANSCRIPT
Layouts
Basic Concept on How to Design Android App
Tab Bar (fixed)
Body (Flexible)
Footer (fixed)
Holo Holo Material Design
Top Bar (fixed)
Ques<on is how height?
How these things are
laid on the screen?
How many type of
components that we can
place?
So how are those components laid on the screen?
Through a thing called
“Layout”
ViewGroup
ViewGroup A ViewGroup is a special view that can
contain other views (called children.)
What is Layouts?
Layouts A layout defines the visual structure for
a user interface
LayoutParams
LayoutParams are used by views to tell their parents
how they want to be laid out
First look in UI XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<View
android:layout_width="90dp"
android:layout_height="90dp“
android:layout_centerInParent=“true”
android:background="#F44336"
/>
</RelativeLayout>
Layout
LayoutParams
Rule 4: Graphical Editor is really useful. But don’t be too spoiled. You s<ll MUST be able to write it all in XML.
Width & Height in Android
• You have to define at least two XML fields for each View or ViewGroup • layout_width • layout_height
• Or Compila<on Error <Button
android:text="Text"
android:layout_width=“120dp"
android:layout_height=“120dp"
/>
Width & Height in Android
match_parent (previously known as fill_parent) The view should be as big as its parent (minus padding)
wrap_content The view should be only big enough to enclose its content (plus padding)
Specific value
56dp, 48sp, etc (See more in Dimension types in next sec<on)
Rule 5: Set layout_width and layout_height before doing anything else
LinearLayout
LinearLayout is a view group that aligns all children in a single direc<on, ver<cally or horizontally
LinearLayout: Example
Orienta<on: Ver<cal Orienta<on: Horizontal
LinearLayout: Layout Weight *
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent“
android:layout_height="match_parent“ android:orientation="horizontal">
<TextView
android:id="@+id/tvHello"
android:text="TextView 1"
android:layout_width="0dp“ android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ffcccc"/>
<TextView
android:text="TextView 2"
android:layout_width="0dp“ android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ccffcc"/>
<TextView
android:text="TextView 3"
android:layout_width="0dp“ android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ffccff"/>
</LinearLayout>
LinearLayout: Real Example
RelaLveLayout
RelativeLayout
is a view group that displays child views in rela<ve posi<ons
either to the sibling elements or to the parent
RelaLveLayout: Align to Parent
Align to Parent
layout_alignParentTop layout_alignParentLe9
layout_alignParentRight layout_alignParentBo=om layout_centerHorizontal layout_centerInParent layout_centerVerCcal
RelaLveLayout: Align to Sibling View(s)
Neighbourhood
layout_below layout_above
layout_toRightOf layout_toLe9Of
Edge Align
layout_alignTop layout_alignBo=om
layout_alignLe9 layout_alignRight
LinearLayout: Real Example
FrameLayout
FrameLayout
is designed to block out an area on the screen to display a single item. Generally,
FrameLayout should be used to hold a single child view, because it can be difficult
to organize child views in a way that's scalable to different screen sizes without
the children overlapping each other
FrameLayout: Align to Parent
Align to Parent
layout_gravity
AbsoluteLayout
AbsoluteLayout A layout that lets you specify exact loca<ons
(x/y coordinates) of its children deprecated since API Level 3
Rule 6: Don’t use AbsoluteLayout
GridLayout
GridLayout
A layout that places its children in a rectangular grid
GridLayout
Pros
Support both colspan & rowspan
Cons Weight is not supported
TableLayout
TableLayout
A layout that arranges its children into rows and columns
TableLayout
Pros
Good for “n-Columns Form”
Cons A liele bit confusing
Rule 7: Thinks about Layout, thinks about LinearLayout, Rela<veLayout and FrameLayout first. The rest are occasionally used.
Margin & Padding
android:layout_margin* are the spaces outside the border
android:padding* is the space inside the border
Margin & Padding
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Hello"
android:layout_margin="10dp"
android:background="#ffcccc"
/>
<TextView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Hello"
android:padding="10dp"
android:background="#ffcccc"
/>
Gravity & Layout Gravity
android:gravity is the Inside gravity of that View
android:layout_gravity is the Outside gravity of the View
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="Hello"
android:padding="10dp"
android:layout_gravity="bottom"
android:background="#ffcccc"
/>
Gravity & Layout Gravity
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:text="Hello"
android:padding="10dp"
android:gravity="bottom"
android:background="#ffcccc"
/>