This very simple tutorial will add to your Android UI (user interface) development arsenal. How? Buttons that display as simple text or as images are basic elements of any application. By following the two steps below, these buttons can be easily created with Google’s Android by simply extending the current Button and ImageButton classes.

We will create these two new Button extensions as shown:

Text and Image Buttons

Step 1: Set Background to ‘null’ in XML or code

The recommended technique is to use the ‘empty’ drawable variable in your ImageButton or TextButton’s XML to set your background to null:

android:background=”@android:drawable/empty”

An optional technique is to extend ImageButton or TextButton and to set the background to null in the constuctor. As above, this is not the recommended approach but may be useful at times:

public YourButtonExtension() {

setBackground(null);

}

And that’s it, only your image or text will display but will have button functionality…except for visually displaying focus. Let’s address that next.

Step 2: Handle onFocus() by overriding onDraw()

We listen for the focus event and update the Button’s text color or button image that way as well. But we’ll do it this way for now.

public void onDraw(Canvas canvas) {

// Since this Button now has no background. We must set the text color to indicate focus.
if (isFocused()) {

// Set the focused text color. In the case of ImageOnlyButton we would .
// instead do setImageResource(imageResourceFocused);
setTextColor(focusedTextColor);

} else {

// Set the non-focused text color. In the case of ImageOnlyButton we would .
// instead do setImageResource(imageResourceNotFocused);
setTextColor(notFocusedTextColor);

}

super.onDraw(canvas);

}

You might be wondering where those text color and image variables come from. We will obtain these focused & not-focused images or text colors from variables passed in from the XML resource file as you’ll see by reading the source code. I won’t go into how that happens here. Instead, I’ll keep this tutorial simple and point you to my next tutorial where I will discuss how to create & pass such custom variables.

And That’s It

You can download the source to see for yourself.

Prior Tutorials

Tutorial 1: Transparent Panel (Linear Layout) On MapView (Google Map)
Tutorial 2: “Hit” testing on a View (MapView)
Tutorial 3: Custom Media Streaming with MediaPlayer

Tagged with →  
Share →

15 Responses to Android Tutorial #4.1: Image & Text-Only Buttons (UPDATED)

  1. [...] Pocket Journey Home « Android Tutorial #4.1: Image & Text-Only Buttons [...]

  2. Magellan says:

    And for Pressed state ?

    Your button works fine for focused (with directionnal keypad, but is animated with a third state when we press the button with finger.

    Do you know the right way to do this ?

  3. Biosopher says:

    Hi Magellan ,

    Last time we tried using the old (Pre-0.9) SDK, there wasn’t a way to capture finger presses. We’ll update these tutorials as we migrate them to the new SDK though. Perhaps we’ll find a solution at that time.

    Sorry…

  4. Arun says:

    This is not working for me, in and Android 1.0, can you please tell how to do that.

  5. Maxim Kornilov says:

    Hello,

    Thank a lot for this article.

    In your code you wrote:

    // Requesting focus doesn’t work for some reason. If you find a solution to setting
    // the focus, please let me know so I can update the tutorial
    requestFocus();

    I resolved problem with the requesting focus by adding the following line in init method:

    this.setFocusableInTouchMode(true);

    Also, method call requestFocus() can be safely removed.

    Maybe it will helpfull.

    Thanks.

  6. [...] Panel (Linear Layout) On MapView (Google Map) Tutorial 2: “Hit” testing on a View (MapView) Tutorial 4.1: Image and Text-Only Buttons Possibly related posts: (automatically generated)Compro showcases VideoMate T1000W network media [...]

  7. [...] 2: “Hit” testing on a View (MapView) Tutorial 3: Custom Media Streaming with MediaPlayer Tutorial 4.1: Image and Text-Only Buttons Possibly related posts: (automatically generated)Building mix-up custom Android component/widget [...]

  8. I am still confused with the usage of javascript like the picture above, is there anything easier?
    but this can add to the experience for me, maybe good to try.

  9. [...] here we go. We’ll use the same code as Tutorial 4.1 to keep this [...]

  10. Jose Vigil says:

    This worked for me. Thanks
    android:background=”@android:color/transparent”

Leave a Reply

Your email address will not be published. Required fields are marked *

*

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>