https://goo.gl/T7CFJ5

Before we begin

LayoutsViews ,Layouts ,Tools and everything in between

View

● Knows it dimensions● Able to draw itself● Handles input from the user

What are its responsibilities?

Let’s look at some examples

ImageView

Hello World!

TextView Button

Also known as widgets

Hello!● textSize● textColor● Ellipsize● Style (bold, italid)● Change font in code*

scaleType: CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTERFIT_XY

Click meDont use onClick=”method”

ViewGroup?

A view that hold onto other views

View extends ViewGroup

LinearLayout

RelativeLayout

Hello World!FrameLayout

RecyclerView

● TableLayout● ScrollView● ViewPager● GridLayout

SetupCreate the project

Our Layout goes here

wrap_content

BALL_RED.PNG

match_parent

absoluteDP

Dimensions in android

● PX - pixels● DP - density independent pixel● SP - scale independent pixels

LinearLayoutThe one you will use the most

LinearLayout - basic example

LinearLayout orientation

LinearLayout - gravity

LinearLayout - layout_gravity

LinearLayout - weight

Margin

Padding

Padding + Margin

LinearLayout - match reset trick

LinearLayout - common mistake #1

?

Linear Layout - common mistake #2

Use TableLayout - not nested weight GridLayout

TextView and ImageView

TOOLS<>

Debugging a Layout

Purple = margin

NO COLOR = PADDING

LinearLayout

1 2 3

LinearLayout

123

Debugging a Layout

Padding of the parent

Margin of the child

Debugging a Layout ...

Debugging a Layout

Hierarchy Viewer

● Works on emulator out of the box● Android Device Monitor

Measure Layout Draw

FrameLayoutOverlapping views

FrameLayout

FrameLayout - Drawing order

1

2

3OPPOSITE

RelativeLayout

● Hard to understand● Cyclic dependency● Unexpected results*● Inefficient*

ReusingAvoid code duplication

<include>

What is wrong?

<merge>

Custom Viewcreate our own component

*

*

Much more sophisticated logic goes here

<Merge>

What is wrong?

NOTES

Questions

https://goo.gl/T7CFJ5