Creating Layouts

We’ll use two layouts in this app, one for the main landing page and the other for each of the rows to display airport status information. Let’s start with the design of the first one.

Designing initial layout

In the Project pane, under app/res/layout, you’ll see the file activity_main.xml—it was created by the IDE when the project was created. Double click this file name and take a look at the layout. You can view and edit the layout using the Design view, or directly view and edit the XML document using the Text view. Let’s edit the layout from the Design view.

The Android Studio provides powerful ways to add various widgets to the layout. Start by deleting the TextView with the words Hello World from the middle of the layout. Then from the Text section under the Palette, drag and drop a TextView onto the layout. On the right pane, change the text value for the newly placed widget from TextView to Airport Code. In the right pane, above the text box that you changed, take note of a rectangle with four + symbols around it.

Click the top + and change the number that appears to 48. Likewise, click the left + and change the number to 16. These changes tell the newly added widget to be placed at 16dp from the left and 48dp from the top.

Next, drag and drop Plain Text from the Text section of Palette to the right of the previously placed TextView. This new widget is an object of an EditText. Change the ID to airportCode. Provide a three-letter code for the text box next to Hint. Click + in the sequence left, top, and right, and enter the values 8, 32, and 88, respectively. In the Attributes pane, scroll down to find the text label and remove the Name value in the text box next to the label.

Now, click the Buttons section in the palette and place a Button next to EditText. Change the ID to addAirportCode, the value for text from Button to Add. Click the + symbols on the left, top, and right, and change the values to 8, 32, and 8, respectively.

We’ll use a RecyclerView to display the status of the airports. Under Palette, click Common, and drag and drop RecyclerView to right below the TextView we placed before. Enter airportStatus for the ID, and change the layout_width value to match_parent. Click the + symbols at the left, top, and right, and key in the number 8 for each.

Once you place the four components, the design view of the layout in activity_main.xml will look like this: