Android Layouts

In our previous project, we just used the default widget, which was a Text View that displayed the text "Hello Android World". We'll now explore ways you can design smart-looking layouts with Android Studio. The layout you'll design in this section looks like this in portrait view:

A layout in portrait mode

And like this in landscape:

A layout in landscape mode

Let's get started.

Create a new project for this. Click File > New > New Project from the Android Studio menu at the top. If you have already closed down your app, select Start a new Android Studio project from the list. In older versions of Android Studio, you'll see the New Project dialogue box. Type Quiz Layout for the Application name:

The New Project dialogue box

Click Next, and accept all the defaults on the rest of the dialogue boxes. Your new project will then load.

In newer versions of Android Studio, you'll see the Choose Your Project dialog box again. Select Empty Activity, as before, and click Next to see the Configure Your Project screen. In the Name box at the top, type Quiz Layout. Make sure the Language dropdown is set to Java. Your screen should look like this (but with a different Package name and Save location):

Project configuration screen for Android Srudio 3

To give yourself more space in the Android Studio IDE, you can minimize the Project Explorer on the left. You can do this by clicking View from then menu at the top, then Tools Windows > Project. Or by clicking the Project tab on the very left edge of the screen:

Closing the project window in Android Studio

Click the tab again, if you want to get the Projects list back.

First, let's have a look at the Designer, and the toolbar icons you'll use most frequently. Open up your activity_main.xml file. In older versions of Android Studio, you should see a Design button and a Text button at the bottom. Click on Design.

The Design tab

For newer versions of Android Studio, there is now three buttons: Code, Split, Design. They can be found in the top right:

Make sure the Design item is selected.

Now examine the toolbar at the top of your simulated app:

The Design toolbar in Android Studio

On the lower row, we have these icons in earlier versions of Android Studio:

Icons on the toolbar

And these ones in later versions:

Icons on the toolbar in Android Studio 3

On the top row, we have these in earlier Android Studio versions:

More toolbar icons

And these in later versions:

Icons on the top row of the toolbar in Android Studio 3

You'll learn about the icons we've highlighted as you go along.

Two more areas to examine are the Palette:

The Android Studio Palette

Palette in Android Studio 3

and the Component Tree:

The Component Tree

The Palette is where you drag and drop controls onto your design surface. The Component Tree shows you a list of controls that you have dropped on your design surface. You can click an item in the Component Tree to select it in the designer.

In the next lesson, you'll start adding widgets to your Android layout.

Back to the Android Contents Page