2.5.

Width and Height

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray">

<TextView
android:text="VIP List"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:textSize="24sp" />

<TextView
android:text="Kunal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:textSize="24sp" />

<TextView
android:text="Kagure"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:textSize="24sp" />

<TextView
android:text="Lyla"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:textSize="24sp" />

</LinearLayout>
2.6. Quiz: Evenly Spacing Out Children Views
Is it possible to evenly distribute buttons across the width of a LinearLayout

I have a LinearLayout (oriented horizontally) that contains 3 buttons. I want the 3

buttons to have a fixed width and be evenly distributed across the width of
the LinearLayout.
I can manage this by setting the gravity of the LinearLayout to center and then
adjusting the padding of the buttons, but this works for a fixed width and won't
work for different devices or orientations.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">

<Button
 android:id="@+id/btnOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="120dp" />

<Button
android:id="@+id/btnTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="120dp" />

<Button
android:id="@+id/btnThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="120dp" />
</LinearLayout>

Linear Layout and weight in Android

I always read about this funny weight value in the Android documentations. Now
I want to try it for the first time but it isn't working at all.

As I understand it from the documentations this layout:

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:text="Register"
android:id="@+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
weight="1" />

<Button
android:text="Not this time"
android:id="@+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dip"
weight="1" />

</LinearLayout>
2.8.Relative Layout

Summary

XML attributes
android:layout_above Positions the bottom edge of this view above the given anchor view ID.

android:layout_alignBaseline Positions the baseline of this view on the baseline of the given anchor view ID.

android:layout_alignBottom Makes the bottom edge of this view match the bottom edge of the given anchor view

android:layout_alignEnd Makes the end edge of this view match the end edge of the given anchor view ID.

android:layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID.

android:layout_alignParentBotto If true, makes the bottom edge of this view match the bottom edge of the parent.
m

android:layout_alignParentEnd If true, makes the end edge of this view match the end edge of the parent.

android:layout_alignParentLeft If true, makes the left edge of this view match the left edge of the parent.

android:layout_alignParentRight If true, makes the right edge of this view match the right edge of the parent.

android:layout_alignParentStart If true, makes the start edge of this view match the start edge of the parent.

android:layout_alignParentTop If true, makes the top edge of this view match the top edge of the parent.

android:layout_alignRight Makes the right edge of this view match the right edge of the given anchor view ID.

android:layout_alignStart Makes the start edge of this view match the start edge of the given anchor view ID.

android:layout_alignTop Makes the top edge of this view match the top edge of the given anchor view ID.

android:layout_alignWithParentIf If set to true, the parent will be used as the anchor when the anchor cannot be be fou
Missing layout_toLeftOf, layout_toRightOf, etc.

android:layout_below Positions the top edge of this view below the given anchor view ID.

android:layout_centerHorizontal If true, centers this child horizontally within its parent.

android:layout_centerInParent If true, centers this child horizontally and vertically within its parent.
android:layout_centerVertical If true, centers this child vertically within its parent.

android:layout_toEndOf Positions the start edge of this view to the end of the given anchor view ID.

android:layout_toLeftOf Positions the right edge of this view to the left of the given anchor view ID.

android:layout_toRightOf Positions the left edge of this view to the right of the given anchor view ID.

android:layout_toStartOf Positions the end edge of this view to the start of the given anchor view ID.

2.9.Relative To parents

RelativeLay
out

xmlns:android="http://schemas.android.com/apk/res/andr
oid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:text="I’m in this corner"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
 android:layout_alignParentLeft="true" />
<TextView
android:text="No, up here"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<TextView
android:text="Wait, I’m here"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" />
<TextView
android:text="Actually, I’m here"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true" />
</RelativeLayout>

2.10.Quiz: Relative to other views

Summary

XML attributes
android:layout_above Positions the bottom edge of this view above the given anchor view ID.

android:layout_alignBaseline Positions the baseline of this view on the baseline of the given anchor view ID.

android:layout_alignBottom Makes the bottom edge of this view match the bottom edge of the given anchor view

android:layout_alignEnd Makes the end edge of this view match the end edge of the given anchor view ID.

android:layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID.

android:layout_alignParentBotto If true, makes the bottom edge of this view match the bottom edge of the parent.
m

android:layout_alignParentEnd If true, makes the end edge of this view match the end edge of the parent.

android:layout_alignParentLeft If true, makes the left edge of this view match the left edge of the parent.

android:layout_alignParentRight If true, makes the right edge of this view match the right edge of the parent.
android:layout_alignParentStart If true, makes the start edge of this view match the start edge of the parent.

android:layout_alignParentTop If true, makes the top edge of this view match the top edge of the parent.

android:layout_alignRight Makes the right edge of this view match the right edge of the given anchor view ID.

android:layout_alignStart Makes the start edge of this view match the start edge of the given anchor view ID.

android:layout_alignTop Makes the top edge of this view match the top edge of the given anchor view ID.

android:layout_alignWithParentIf If set to true, the parent will be used as the anchor when the anchor cannot be be fou
Missing layout_toLeftOf, layout_toRightOf, etc.

android:layout_below Positions the top edge of this view below the given anchor view ID.

android:layout_centerHorizontal If true, centers this child horizontally within its parent.

android:layout_centerInParent If true, centers this child horizontally and vertically within its parent.

android:layout_centerVertical If true, centers this child vertically within its parent.

android:layout_toEndOf Positions the start edge of this view to the end of the given anchor view ID.

android:layout_toLeftOf Positions the right edge of this view to the left of the given anchor view ID.

android:layout_toRightOf Positions the left edge of this view to the right of the given anchor view ID.

android:layout_toStartOf Positions the end edge of this view to the start of the given anchor view ID.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
 android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times" />
<Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentRight="true"
android:text="@string/done" />
</RelativeLayout>
 Ffffffffffffffffffffffffffffffffff

RelativeLayout.LayoutParams
Kotlin |Java
public static class RelativeLayout.LayoutParams
extends ViewGroup.MarginLayoutParams

↳ android.view.ViewGroup.LayoutParams
java.lang.Object

↳ android.view.ViewGroup.MarginLayoutParams
↳ android.widget.RelativeLayout.LayoutParams

Specifies how a view is positioned within a RelativeLayout. The relative layout

containing the view uses the value of these layout parameters to determine where to
position the view on the screen. If the view is not contained within a relative layout,
these attributes are ignored. See the Relative Layout guide for example code
demonstrating how to use relative layout's layout parameters in a layout XML. To learn
more about layout parameters and how they differ from typical view attributes, see
the Layouts guide.

Summary

XML attributes
android:layout_abo Positions the bottom edge of this view above the given anchor view ID.
ve
android:layout_alig Positions the baseline of this view on the baseline of the given anchor view ID.
nBaseline
android:layout_alig Makes the bottom edge of this view match the bottom edge of the given anchor
nBottom view ID.
android:layout_alig Makes the end edge of this view match the end edge of the given anchor view ID.
nEnd
android:layout_alig Makes the left edge of this view match the left edge of the given anchor view ID.
nLeft
android:layout_alig If true, makes the bottom edge of this view match the bottom edge of the parent.
nParentBottom
android:layout_alig If true, makes the end edge of this view match the end edge of the parent.
nParentEnd
android:layout_alig If true, makes the left edge of this view match the left edge of the parent.
nParentLeft
android:layout_alig If true, makes the right edge of this view match the right edge of the parent.
nParentRight
android:layout_alig If true, makes the start edge of this view match the start edge of the parent.
nParentStart
android:layout_alig If true, makes the top edge of this view match the top edge of the parent.
nParentTop
android:layout_alig Makes the right edge of this view match the right edge of the given anchor view
nRight ID.
android:layout_alig Makes the start edge of this view match the start edge of the given anchor view
nStart ID.
android:layout_alig Makes the top edge of this view match the top edge of the given anchor view ID.
nTop
android:layout_alig If set to true, the parent will be used as the anchor when the anchor cannot be be
nWithParentIfMissin found for layout_toLeftOf, layout_toRightOf, etc.
g
android:layout_belo Positions the top edge of this view below the given anchor view ID.
w
android:layout_cent If true, centers this child horizontally within its parent.
erHorizontal
android:layout_cent If true, centers this child horizontally and vertically within its parent.
erInParent
android:layout_cent If true, centers this child vertically within its parent.
erVertical
android:layout_toEn Positions the start edge of this view to the end of the given anchor view ID.
dOf
android:layout_toLe Positions the right edge of this view to the left of the given anchor view ID.
ftOf
android:layout_toRi Positions the left edge of this view to the right of the given anchor view ID.
ghtOf
android:layout_toSt Positions the end edge of this view to the start of the given anchor view ID.
artOf
Inherited XML attributes

ist Item with RelativeLayout

Raw

activity_main.xml

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ImageView

android:layout_weight="56dp"

android:layout_height="56dp"

android:scaleType="centerCrop"

android:src="@drawable/ocean" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Pebble Beach"

android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="California"

android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="10 miles away"

android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>
 2.14 gratvwork

Lesson Review
In this lesson, you learned more about Views and the XML layout in Android.

How to select views

How to style views
How to position views

Learn More on Your Own

LessonDownloads

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(opens in a new tab) on the Android Developers
blog(opens in a new tab). It's written by Google Design Advocate, Roman
Nurik, who was the lead designer on the Google I/O 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 Twitter page(opens in a new tab)

 Google Developers YouTube channel(opens in a new tab)

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:

 Chris Banes' blog(opens in a new tab): A blog that gives you a deeper look
into Android support libraries.
 Fragmented Podcast(opens in a new tab): A weekly podcast filled with
Android development discussion.

Lesson Overview

In this lesson, you'll learn more about Android Studio and start using it to develop Android Apps.

You'll install Java and Android Studio on your computer

We'll take a look at starting a project in Android Studio

You'll get a quick tour of Android Studio

We'll practice using the Device Emulator

After you complete all this, you'll build a birthday card app at the end of the lesson!
Two Strategies

1.Troubleshooting Document(opens in a new tab) is a growing document

that lists solutions to common problems that students run into.

2. Google(opens in a new tab) is a great tool for troubleshooting.

Copy the exact error message you're getting and search for it.
Try adding Java (if you're installing the JDK) or Android (if you're installing Android
Studio).
Install Java: Windows Guide
Lesson

Downloads
Installing The Java Development Kit: Windows Guide
There are several steps you need to take before installing Android Studio. Some of these steps might seem very technical, and
it's OK if you don't fully understand the terminology.

Make sure to follow the instructions carefully.

1. Check If You Have Java on Your Computer

Open the Terminal
Before you start, you will need to open a program on your computer called the Terminal. To do this, go to the Task Bar at the
bottom of your computer screen, click Start, and navigate to Run...

Type cmd in the box that pops up. (Your box might look slightly different than ours, depending on what version of Windows
your computer is running.)
This will open the Terminal window.

Use the Terminal to find information

Now you are ready to check if you have the Java Developer Kit, version 7 or greater, already installed on your computer. To
check if you have JDK installed (and which version), open a terminal window and type:

java -version

Then hit enter.

The example below shows Java version 8.0_05 -- the version number comes after the “1.”

If you have Java 7 or greater, you can move on to the next node: Install Android Studio.

If the JDK is not available, or the version is lower than 7, go on to Step 2, below.

2. Download the Java Development Kit

Download the Java Development Kit, aka, the JDK, from this page(opens in a new tab).

Oracle, the company that maintains Java, has a lot of options and acronyms.
We're looking for the plain old JDK. This is the kit you need to start developing your apps with Java.

After you click the download link, you'll see a list of options for download.
Go to the Java SE Development Kit menu of options.
Do not go to the demos and samples (the menus look very similar, so make sure to read the heading at the top).

Install
You've got a lot of options here, but the two you care about are the Windows options.

If your computer is only a few years old, you're most likely going to download the 64-bit option.
If your computer is a little older you can follow these instructions(opens in a new tab) to double check.

I'm going to download the 64-bit option (highlighted below).

Accept the license agreement, and download it. Once you've downloaded it, go ahead and double click it to install.

3: Verify that Java is Installed

Go back to Step 1 and follow the instructions to open your Terminal and verify that you have Java version 7 or higher installed.

Install Java: Mac Guide

Lesson

Downloads
Installing The Java Development Kit: Mac Guide

There are several steps you need to take before installing Android Studio. Some
of these steps might seem very technical, and it's OK if you don't fully
understand the terminology.

Make sure to follow along with the instructions carefully.

1. Check If You Have Java on Your Computer

Open the Terminal

Before you start, you will need to open a program on your computer called the
Terminal. To do this, click the search icon (magnifying glass) on the top right of
your desktop, and type in "terminal."

You can also navigate to the Terminal from your Applications > Utilities folder.

Use the Terminal to find information

Now you are ready to check if you have the Java Developer Kit, version 7 or
greater, already installed. To check if you have JDK installed (and which
version), open the Terminal and type:

java -version into the window, and hit enter.

The example below shows Java version 8.0 -- the version number comes after
the “1.”

If you have Java 7 or greater, move on to the next node: Install Android Studio.

If the JDK is not available, or the version is lower than 7, go on to Step 2, below.

2. Download the Java Development Kit

Download the Java Development Kit, aka, the JDK, from this page(opens in a
new tab).

Oracle, the company that maintains Java, has a lot of options and acronyms.
We're looking for the plain old JDK. This is the kit you need to start developing
your apps with Java.

After you click the download link, you'll see a list of options for download. Go to
the Java SE Development Kit menu of options.

Do not go to the demos and samples (the menus look very similar, so make sure
to read the heading at the top).

Install

Select the JDK for your operating system (Mac OSX). In most cases, if you have
a machine that is less than 4 years old, you should choose the x64 (64-bit)
version (highlighted below). Search online for instructions if you have an older
machine and are unsure what version to download.
Accept the license agreement to download and locate the file, and double click
it to begin the installation process.

3: Verify that Java is Installed

Go back to Step 1 and follow the instructions to open your Terminal and verify
that you have Java version 7 or higher installed.

Do not move on with Android Studio install until after you have installed the
JDK. Without a working copy of Java, the rest of the process will not work. If
you can't get the download to work, look for error messages, and try googling to
find a solution.

Link to Java download site

Make sure you're computer is capable of running Android Studio by checking the system
requirements(opens in a new tab).

Android Studio for Windows(opens in a new tab) and Android Studio for Mac(opens in a new tab)

Troubleshooting Document(opens in a new tab)

If on a corporate network, you may need to Set Your Proxy Settings(opens in a new tab) or check in with
your IT team on help setting up Android Studio.

Windows: Guide to Install Android Studio

Lesson

Downloads

Note 1: Install JDK before you proceed for installing Android Studio IDE.

Note 2: Appearance of the installation wizard may change over time. However, the installation steps
would remain the same.

Step 1. Download Android Studio

Navigate to the Android developers' site(opens in a new tab). This page will automatically detect your
operating system. Click on the "DOWNLOAD ANDROID STUDIO" button.
Mac: Guide to Install Android Studio

Lesson

Downloads

Note 1: Install JDK before you proceed for installing Android Studio IDE.

Note 2: Appearance of the installation wizard may change over time. However, the installation steps
would remain the same.

Step 1. Download Android Studio

Navigate to the Android developer’s site(opens in a new tab). This page will automatically detect your
operating system. Click on the "DOWNLOAD ANDROID STUDIO" button.

iscussion about Constraint Layout

Lesson

Downloads

Before starting on the next video, we want to bring to your attention a new feature in new Android
Studio - Constraint Layout - that may require you to make some code modifications to the steps you see
in the following videos.

Keeping up with the changes

Google is constantly improving the Android platform and adding new features. This is great for you as a
developer, but it makes learning harder sometimes. Recently Google released ConstraintLayout; a tool
that makes it super fast to create responsive UIs with many different types of components.
ConstraintLayout is a great tool to have on the sleeve, but for this class, we will use RelativeLayout,
LinearLayout simpler.
All of this matters to you because the new project templates in Android Studio now use
ConstraintLayout as default, which makes the code you see on your computer a bit different from what
is on the screen.

Current Layout File

In the new versions of Android Studio, after choosing the Empty Activity template, the layout file
app/src/main/res/layout/activity_main.xml will look like this:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout

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

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!"

app:layout_constraintLeft_toLeftOf="@+id/activity_main"

app:layout_constraintTop_toTopOf="@+id/activity_main"

app:layout_constraintRight_toRightOf="@+id/activity_main"

app:layout_constraintBottom_toBottomOf="@+id/activity_main" />
</android.support.constraint.ConstraintLayout>

Note the use of ConstraintLayout, and that TextView has a list of limiters that position it within
ConstraintLayout.

Modify the Layout File

Unlike the above code, our videos and start code assume that the template looks more like the
following, using as the root of the view a RelativeLayout:

<?xml version="1.0" encoding="utf-8"?>

<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:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World!" />

</RelativeLayout>

When you create your new project, go to app/src/main/res/layout/activity_main.xml and copy and
paste the above code. Then you're ready to go!
Learn More About Constraint Layout

If you want to understand more about the great features that ConstraintLayout provides, check out the
documentation at: https://developer.android.com/studio/write/layout-editor.html(opens in a new tab)

Additionally, for those wanting a hands-on demo using Android Studio Layout Editor with
ConstraintLayout, here's a Code Lab(opens in a new tab). Note that this is important information, but is
beyond the current scope of this course.