Udacity Android Basics / Part 2 - scratchpad notes

margins-paddings.md

Margins and Paddings

Paddings

Paddings are always applied by the view itself.

On all four sides

android:padding = "8dp"

On each side

android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"

Margins

Margins are defined in a view but are applied by the parent view. So they need a parent "GroupView" in order to be applied.

On all four sides

android:layout_margin = "8dp"

On each side

android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"

Tips:

• To remember that margin is applied by the parent view, remember that its definition starts with "layou"
• Use 8dp increments, as it is recommended by material design.
• Margins of adjacent views do not collapse (as in HTML). So 16dp margin on each view means 2x16dp = 32dp between them.

udacity-android-basics-2-notes.md

Udacity: Android Basics: Notes

Recommended button/touch size

The recommended minimum width/height for elements that must be touched by fingers (buttons, etc.) is 48dp.

Always namespace the root view

Always add the XML namespace xmlns:android= in root view

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  ...

match parent in root view

match_parent in root view actually means "match the size of the device screen"

layout_xxx handling

layout_xxx properties in a child view are actually handled/rendered by a parent view

layout_width/height values

• wrap_content: exactly the size of the content
• match_parent: strech to match the parent's view size
• XXdp: exactly XX dp (device independent pixels)

Group Views

LinearLayout

• Aligns childs
  • Vertically
  • Horizontally

RelativeLayout

• Aligns childs
  • Relative to parent (bottom, top, center)
  • Relative to sibling views (bottom, top, left, right)

General Tips

• Don't use RelativeLayout everywhere. It is an overkill. Use Linear if you don't need Relative.

From Mockup to Code tips

• First identify "repeating" blocks and build those components to re-use.
• Then start building larger blocks using the small blocks.

udacity-android-basics-2-relative-layouts.md

Relative Layouts

Declaring a Relative View

Declaring that parent view will align child views relatively

<RelativeLayout ...>
...
</RelativeLayout>

Relative to parent

Positioning View related to parent views:

on bottom right

    <TextView
        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" />

on top left

   <TextView
       ...
       android:layout_alignParentTop="true"
       android:layout_alignParentLeft="true" />

for centering

    ...
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"

Relative to Sibling Views

First define one or more "sibling" views as anchors. This means they are the reference position around which the other elements will be positioned.

Anchors positioned related to the paren views.

Then give to anchor views an distiguishing id.

<TextView ...
    android:id="@+id/my_anchor_view"
    ...
>

Then position other elements by refering to the anchor view.

<TextView...
    android:layout_toRightOf="@id/my_anhcor_view"

sibling relative positions

    android:layout_toLeftOf=...
    android:layout_toRightOf=...
    android:layout_above=...
    android:layout_below=...

RelativeLayout.LayoutParams

https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

udacity-android-basics-2-weights.md

About Layout Weights

Weight Calculation

Android first calculates the size of static-size views and then 'distributes' the remaining space to views with layout_weight element accordingly.

Adding Weight

To add weight to a view by settings its height/width correspondingly to "0dp".

...
  android:layout_height="0dp"
  android:layout_weight="1"
...

Planning a layout

Before start coding a layout plan its widths, heights, weights using a table like this:

            Width       Height      Weight
View 1
View 2
View 3
View 4
....

Example: Vertical Layout: Email app

From, To, Subject single-line text boxes on top and "body" text box occupying rest of vertical space

                      Width          Height     Weight  
TextView From      match_parent   wrap_content    0
TextView To        match_parent   wrap_content    0
TextView Subject   match_parent   wrap_content    0
TextView Body      match_parent       0dp         1

Example: Horizontal Layout: Chat bar

A single bar with an icon-image on left and right and a text-box in the middle occupying the rest of the space.

                    Width         Height    Weight
ImageView Icon1  wrap_content wrap_content    0
TextView Chat        0dp      wrap_content    1
ImageView Icon2  wrap_content wrap_content    0

Default weight = "0"

If layout_weight is missing then it is assumes of value 0.