Layout: organize the views on your screens

Loading...

From the course by CentraleSupélec

Build Your First Android App (Project-Centered Course)

561 ratings

CentraleSupélec

Build Your First Android App (Project-Centered Course)

561 ratings

What you’ll achieve: In this project-centered course*, you’ll design, build, and distribute your own unique application for the Android mobile platform. We’ll provide you with a set of customizable building blocks that you can assemble to create many different types of apps, and that will help you become familiar with many important specificities of Android development. When you complete the project, in addition to having a personalized app that you can use and share, you’ll have the skills and background you need to move on to more advanced coursework in Android development. What you’ll need to get started: This project-centered course is designed for learners who have some prior experience programming in Java, such as an introductory college course or Coursera’s Java Programming Specialization (https://www.coursera.org/specializations/java-programming). You will need a computer with a stable Internet connection, but you will not need an Android phone - we’ll use free software that you can use to emulate a phone on your computer. We'll use Android Studio as IDE; it is compatible with most computer and operating systems. You can find detailed system requirements here: https://developer.android.com/sdk/index.html#Requirements. *About Project-Centered Courses: Project-centered courses are designed to help you complete a personally meaningful real-world project, with your instructor and a community of learners with similar goals providing guidance and suggestions along the way. By actively applying new concepts as you learn, you’ll master the course content more efficiently; you’ll also get a head start on using the skills you gain to make positive changes in your life and career. When you complete the course, you’ll have a finished project that you’ll be proud to use and share. Time: 10 hours of study, 10 hours of active project work

From the lesson

Create the Storyboard for Your Application

In this module you will design your personalized app from a user's perspective. We will show you elements you can combine in your design, and how to document it to get feedback from prospective users or to organize your thoughts. If you get stuck on the quiz or peer-reviewed assignment, you should post on the Discussion Forum to ask for help. And if you finish early, we hope you'll go there to help your fellow classmates as well. To get started, please jump into the first lesson below!

Some components of the graphical user interface3:55

Layout: organize the views on your screens5:24

Add actions5:24

Meet the Instructors

Dr. Virginie Galtier
Associate Professor
Computer Science
Michel Ianotto
Associate Professor
Computer Science

In the first part of the presentation, you've learned that the screen presented

to the user to be his graphical interface is displayed by an activity.

And we've reviewed some of the components which can be part of the graphical

user interface of an activity, such as buttons and text views.

These widgets are called views.

A graphical user interface is often composed of multiple views.

And in this video, I'll show you how you can arrange

them to obtain a nice, organized interface.

Android allows you to organize the views on the screen in different ways.

For instance, if I use a Vertical LinearLayout,

my screen is divided into rows and

each row would receive a view in the order I provide them.

Let's say, I want to create a simple calculator to add two numbers.

I'll need first an EditText for the first operand, it goes into the first row.

Next, let's add a TextView to display the addition sign.

It goes into the second row.

In the third row,

I'll put an EditText to allow the user to enter the second operand.

And in the following row, I'll place a Button to request the computation.

And in the last row, another TextView will display the result of the addition.

If I use a horizontal layout instead, the screen is divided into columns.

So that is how our calculator would look like with this orientation.

But let's keep a Vertical LinearLayout for now.

One interesting thing about layouts is that layouts are in fact views themselve.

It means that I can nest one layout within another.

For instance, I can use an Horizontal LinearLayout to set my plus sign and

the second operand EditText side by side.

And next, I can place this horizontal layout in one of the rows of the vertical LinearLayout

and let's repeat that for the equal sign and the result.

It looks a little bit nicer.

This tree here represents the structure of the layout of our screen.

It's mandatory for your screen to have one and only one root layout,

which will contain everything displayed on the screen.

Even if there are no limitations on depth of the hierarchy,

having too many layouts nested into each other can have a negative

impact on performances, on the time it takes to render your user interface.

So instead, you can use another popular layout, the RelativeLayout.

It enables you to position your views in relation to each other.

For instance, I can position this EditView here in

the upper right corner of the screen.

Next, I can specify that I want the second operand EditText

to be below it, below the first EditText and the plus sign,

which is in the TextView to be to the left, but to the left of what?

To the left of this EditText or to the left of this one?

I need a way to distinguish between the first EditText and the second EditText.

So Android allows you to associate a name or ID with each view.

Each time you need to refer to your view, you can use its ID.

Now I can specify that my TextView is below the first

EditText using the ID of the first EditText and

it's to the left of the second EditText, so

I can specify my layout without ambiguity anymore.

The ID must be unique within your application,

there are various naming conventions around.

But personally, I compose the ID of my view using the kind of view followed by

something related to the information or action associated with the view.

For instance, this view as a button and it triggers the computation.

Layouts are a views, which can contain other views, but are other views,

which can act as containers.

The RadioGroup, for instance, can hold multiple RadioButtons.

A ScrollView containing another view, like a TextView, for instance,

will add a scroll bar if the view is too large to be displayed in one piece.

So now we have a beautiful interface to present to our user and

he does not turn his back on us anymore, but

let's see what happen when he clicks on the OK button.

Nothing, so we'll loosing him again.

It's time to add something more to our interface.

We'll deal with that in the next video.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play