Lesson 1B_ Building Layouts

01 - View Groups

Nested ViewGroups

A View is a rectangular area on the screen. For example, aTextView displays text and an ImageView displays an image.
A ViewGroup is a big View that can contain smaller Views inside of it. The smaller Views are called the children of the ViewGroup and might be TextViews or ImageViews. The ViewGroup is called the parent of its children. Each child isnested (completely contained) within its parent.
A child might have children of its own. For example, the illustration shows a vertical LinearLayout containing two children. The first is a horizontal LinearLayout with three children; the second is a RelativeLayout with four children. One of these four children has a child of its own.

Paste_Image.png

02 - Types of ViewGroups

LinearLayout

• Description: A View is a rectangular area on the screen. For example, aTextView displays text and an ImageView displays an image. A ViewGroup is a big View that can contain smaller Views inside of it. The smaller Views are called the children of the ViewGroup and might be TextViews or ImageViews. The ViewGroup is called the parent of its children. A LinearLayout is a common type of ViewGroup. It arranges its children in a vertical column or a horizontal row.
  Paste_Image.png
  Paste_Image.png
  Paste_Image.png
  Paste_Image.png
• Sample Code:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="some content"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="some content"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="some content"/>
</LinearLayout>

RelativeLayout

• DESCRIPTION: A View is a rectangular area on the screen. For example, a TextView displays text and an ImageView displays an image.
  A ViewGroup is a big View that can contain smaller Views inside of it. The smaller Views are called the children of the ViewGroup and might be TextViews or ImageViews. The ViewGroup is called the parent of its children.
  A RelativeLayout is a common type of ViewGroup that lets us position its children relative to its own edges. For example, the three children in the illustration are placed in the corners of a RelativeLayout. A RelativeLayout also lets us arrange its children relative to each other: one child can be placed to the right of another, and can even overlap.
  Paste_Image.png
• Sample Code

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="upper left">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="upper right"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="lower left"/>
</RelativeLayout>

Paste_Image.png

SAMPLE 2

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/ocean_image_view"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ocean" />

    <TextView
        android:id="@+id/pebble_beach_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/ocean_image_view"
        
        android:text="Pebble Beach"
        android:textAppearance="?android:textAppearanceMedium" />

    <TextView
        android:id="@+id/california_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/ocean_image_view"
        android:layout_below="@id/pebble_beach_text_view"
        android:text="California"
        android:textAppearance="?android:textAppearanceSmall" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/ocean_image_view"
        android:layout_below="@id/california_text_view"
        android:text="10 miles away"
        android:textAppearance="?android:textAppearanceSmall" />

</RelativeLayout>

Paste_Image.png

SAMPLE 3

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/lyla_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:textSize="24sp"
        android:text="Lyla" />

    <TextView
        android:id="@+id/me_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/lyla_text_view"
        android:textSize="24sp"
        android:text="Me" />

    <TextView
        android:id="@+id/natalie_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/jennie_text_view"
        android:textSize="24sp"
        android:text="Natalie" />

    <TextView
        android:id="@+id/jennie_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:textSize="24sp"
        android:text="Jennie" />

    <TextView
        android:id="@+id/omoju_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_above="@id/jennie_text_view"
        android:textSize="24sp"
        android:text="Omoju" />

    <TextView
        android:id="@+id/amy_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_above="@id/omoju_text_view"
        android:textSize="24sp"
        android:text="Amy" />

    <TextView
        android:id="@+id/ben_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="24sp"
        android:text="Ben" />

    <TextView
        android:id="@+id/kunal_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@id/ben_text_view"
        android:textSize="24sp"
        android:text="Kunal" />

    <TextView
        android:id="@+id/kagure_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/ben_text_view"
        android:textSize="24sp"
        android:text="Kagure" />

</RelativeLayout>

Paste_Image.png

XML Namespaces

• XML Namespaces provide a method to avoid element name conflicts.

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

03 - Width and Height

Paste_Image.png Paste_Image.png

04 - Layout Weight

layout_weight

• Description:A View is a rectangular area on the screen. A LinearLayout is a big view that can contain smaller Views, called its children. A horizontalLinearLayout arranges its children in a row, and a vertical LinearLayout arranges them in a column.
  Each child in a horizontal LinearLayout can request a certain minimal amount of width for itself. If the layout is wide enough, it will have width left over after satisfying these requests.
  The leftover width is then parcelled out among the children that claim shares of it. The number of shares claimed by each child is called thelayout weight of that child.
  In the code sample and illustration, the horizontal LinearLayout contains three children that ask for a total of 48dp of layout_width. This is much less than the width of the layout. The EditText child then claims one share of the leftover width, and the other two children claim no shares at all. The leftover width is therefore divided into a total of one share, and the EditText expands to fill the share it claimed.
  A similar rule applies to the children of a vertical LinearLayout. If the LinearLayout is tall enough, the leftover vertical space is apportioned among the children that request shares of it.
  Paste_Image.png
  
  
  Paste_Image.png
  Paste_Image.png
  Paste_Image.png

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/ocean"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="centerCrop" />

    <TextView
        android:text="You're invited!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="54sp"
        android:background="#009688" />

    <TextView
        android:text="Bonfire at the beach"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="34sp"
        android:background="#009688" />

</LinearLayout>

06 - Padding vs. Margin

Material Design - Layout - Metrics & keylines

Padding

• DESCRIPTION: A View is a rectangular area on the screen. For example, a TextView contains text and an ImageView contains an image.
  A View will shrink wrap itself around its content if we set the View’s width and/or height to the special value wrap_content. To prevent it from wrapping too tightly, we can specify an amount of padding on each side.
• SAMPLE CODE:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#C0C0C0"
    android:text="CLAUSTROPHOBIA"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:background="#C0C0C0"
    android:text="CLAUSTROPHOBIA"/>

Paste_Image.png
Paste_Image.png
Paste_Image.png

Margin

• DESCRIPTION: A View is a rectangular area on the screen. For example, a TextView displays text and an ImageView displays an image.
  By default, two Views can be placed next to each other. If we don’t want them to touch, we can specify an amount of margin along one side of one of the Views. In fact, we can ask for a margin along all four sides of a View.
• SAMPLE CODE:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFC400"
        android:text="The"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:background="#2196F3"
        android:text="End"/>
</LinearLayout>

Paste_Image.png
Paste_Image.png
Paste_Image.png

• Padding vs. Margin

  
  Paste_Image.png

How to Learn More on Your Own

After this course, if you choose to continue learning Android, an important skill to have is the ability to learn on your own. You might find resources out there that feel too advanced for where you are on your journey, but we want you to become accustomed to how developers speak and share their ideas. You don’t have to understand every word, but you can skim for important ideas. Or you can google search for terms that you aren’t familiar with.
Read your first Android blogpost article
Start by reading this post on the Android Developers blog. It's written by Google Design Advocate, Roman Nurik, who was the lead designer on the Google I/O 2014 app. Google I/O is an annual conference that Google holds for developers.
Follow official Android Development channels on social media
Aside from the blog, you can get the latest news about Android development via:

• Android Developers G+ page
• Android Developers Twitter page
• Google Developers YouTube channel

Kirill's Favorite Resources
In addition to the official channels for Android development news, there’s a ton of content online, and a vibrant ecosystem of Android developers who are happy to share their knowledge through blog post articles, social media tips, and conference talks.
Here are some of Kirill’s favorite Android resources:

• Styling Android blog: A blog that shows off various technical aspects of building design elements of Android apps.
• Chris Banes' blog: A blog that gives you a deeper look into Android support libraries.
• Fragmented Podcast: A weekly podcast filled with Android development discussion.
  You can find Kirill on G+, and check out his #pixelpushing series.