09. Buttons

There’s nothing difficult about adding buttons really, except it’s a good point to talk about the android:id attribute.

In the previous step you may have noticed we had an attribute in the Instructions textview that gave it an id. This is because later on, I am going to want to change what that textview says and so I need to be able to refer to it. This is the same with our buttons…we are going to need to be able to respond when they’re clicked on and so we need to have an id for them.

When creating an id, it is good practice to include the type of UI element it is as a suffix. You’ll see why we make it a suffix when we start adding Java code to this app.

So with this in mind, we’re going to replace the comment place holder we had that said this…

 <!-- ... buttons go here ... -->

…with this:

<Button android:id        = "@+id/hit_but"
    android:text          = "@string/hit_but_text"
    android:layout_width  = "wrap_content"
    android:layout_height = "wrap_content"
    android:paddingLeft   = "22sp"
    android:paddingRight  = "22sp" />

<Button android:id        = "@+id/stay_but"
    android:text          = "@string/stay_but_text"
    android:layout_width  = "wrap_content"
    android:layout_height = "wrap_content"
    android:paddingLeft   = "30sp"
    android:paddingRight  = "30sp" />

<Button android:id        = "@+id/again_but"
    android:text          = "@string/again_but_text"
    android:layout_width  = "wrap_content"
    android:layout_height = "wrap_content" />

Notice here that the text in each of these buttons requires us to create more entries in the “strings.xml” file, I’m sure you’ll be fine with that. Your app should now look like this:

Notice also how I added some padding around the first two buttons to give them the approximate width of the third button. There’s many ways to get that effect but adding padding is a nice simple way.

Okay, it’s now time to add the card pictures!

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>