Android Buttons

Android Layouts: 1 2 3 4 5 6

In the previous lesson, you added a Linear Layout to your design surface. We'll now add two buttons to this layout.

Go back to the palette. Click on the Widgets category and locate the Button item. Drag two of these onto your LinearLayout.

If you don't get this right, and have to undo, you can drag widgets onto the Component Tree instead:

Using the Component Tree to add widgets

You can even rearrange your widgets in the Component Tree. In the image below we've put button 6 before button 5:

The Android Studio component tree

With the top button highlighted, drag down to below the bottom button:

Changing widget order via the Component Tree

Your blueprint area should now look like this:

Two buttons added to a LinearLayout

Select the first button. In the properties area on the right, locate the text property and enter London Bridge:

The Text property of a button

(The name of your button will probably not be button5.)

Now select the second button and change the text property to Tower Bridge. Your blueprint will then look like this:

Changing the Text property of two buttons

Almost done, now.

You can change the background colour of the ConstraintLayout to something other than white.

Go back to design view by clicking the icon in the toolbar:

Icons in the Android Studio toolbar

In the Component Tree, click on the ConstraintLayout item to select it:

The ConstraintLayout item showing in the Component Tree

Now look at the properties area on the right. Click on the link at the bottom that says View all properties:

The View all properties link

You'll then see a fuller list of properties.

A list of Widget properties

Locate the Background property and click just to the right of the word Background, where the white box is in the image below:

The Background property

Click on the grey square to bring up a dialogue box. Select Color from the left:

The Color tab of the Resources dialogue box

Select a colour from the list and click OK. We've chosen holo_blue_dark.

Try it out now. Run your app and see what it looks like. You should see something like this:

A layout in portrait view

Rotate your device and you'll see that the buttons in the layout expand to fill the space:

A layout in landscape view


In the next lesson, you'll learn about the XML file. You'll also learn how to add XML strings. This is quite easy!