Android Buttons

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. In earlier versions of Android Studio, click on the Widgets category and locate the Button item. In later versions, there is a Buttons category. Click on this and you'll see a 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: (You'll see error warnings about this. We'll fix them in the next lesson.)

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 in earlier versions of Android Studio:

Icons in the Android Studio toolbar

In later versions, there is a menu instead. Select Design from the menu instead of Blueprint:

Switching to Design View instead of Blueprint in Android Studio

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. If you have an earlier version of Android Studio, click on the link at the bottom that says View all properties:

The View all properties link

For later versions, click to expand the All Attributes item:

Atrributes items in Android Studio

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


However, if you're using a real device, your app will probably crash on rotation. You'll see why, and how to fix it, later in the course, when we move on to Activities.

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

Back to the Android Contents Page