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:
And like this in landscape:
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:
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):
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:
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.
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:
On the lower row, we have these icons in earlier versions of Android Studio:
And these ones in later versions:
On the top row, we have these in earlier Android Studio versions:
And these in later versions:
You'll learn about the icons we've highlighted as you go along.
Two more areas to examine are the Palette:
and 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.