图像和文本按钮与透明背景

Question

I'm trying to get a button to look like the one at the link I've posted below.

It's a transparent button with image at the top and text on the bottom. When a click occurs, the whole bounding box gets highlighted.

This is how the button looks like when pressed: http://i44.tinypic.com/24nle9e.png

Not sure if this effect is achieved with a Button or an ImageButton. Any ideas? Thanks.

Answer 1

dor506's answer is basically correct, but I'd use a ImageButton instead of a Button, and set it's background to transparent ( android:background="#00000000" - the 0 alpha is the key bit here) before applying your Drawable via android:src="@drawable/your_drawable_id" .

In case this helps, here is an example of a suitable Drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/button_hi" /> <!-- pressed -->
    <item android:drawable="@drawable/button_lo" /> <!-- default -->
</selector>

where 'button_hi' / 'button_lo' are the two images you are switching as a result of a click.

Answer 2

I don't think you can achieve this result with button/imagebutton properties.

here's a simple solution: you can create two images, one for the button when it isn't clicked, and one for the button when it is clicked (with the orange color behind..)

then you should create a selector. it is an xml which handle click/non click/focus image behaviour.

finally give the button the background of the selector

        <Button android:layout_width="wrap_content" android:background="@drawable/selector" 
        android:layout_height="wrap_content" />

Answer 3

By the looks of it, it appears the image you're showing is an ImageButton with the image being a PNG image with transparent sections throughout it. If you want to keep the button selected you should be able to mess with the button parameters:

android:state_selected = "true"

Try that.