Android Layouts

Android Layouts: 1 2 3 4 5 6

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

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. Make sure you're on the Design tab, rather than the Text tab:

The Design tab

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

The Design toolbar in Android Studio

On the lower row, we are these icons:

Icons on the toolbar

On the top row, we have these:

More toolbar icons

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

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.