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:
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.
