Reputation: 1709

image on top of button android

Is it possible to add an image(view) on top of a button (which as a background image)?

I'm porting an iOS app to Android and it wasn't a problem on iOS, but I'm wondering if it is the right approach on Android because of layouts.

Edit :

To clarify, check this screen shot :

http://a4.mzstatic.com/us/r1000/062/Purple/v4/7c/4b/cd/7c4bcd53-ba55-94d7-a26c-ce1bfe040003/mza_2736801523527387264.320x480-75.jpg

I need to do the bottom left button "carte" (card in french)

I need :

a button with a background image
an image displayed on top of the button which is loaded from internet (a card , there is a lot of different and news cards are added daily, in the screnshot it s "MIDI PASS" )
a text localised on the button , so I cant use Imagebutton class.

Upvotes: 0

Answers (5)

Rajesh

Reputation: 15774

It is not quite clear what you want to achieve, but the following may be helpful for you:

Use an ImageButton
Set the Image as the background of the button either in XML (using android:background) or in code (using setBackgroundResource)

Update:

Looking at your updated requirements, it would be better to use a custom component to achieve what you want.

Upvotes: 2

Veer

Reputation: 2071

Your question is somewhat unclear but from what i understood, following may work for you:

        <ImageButton android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_image"
            android:src="@drawable/top_image"/>

Hope it will be helpful.

UPDATE: If Your background is common, then you can set the bitmap using following code:

((ImageButton)findViewById(R.id.imgButton)).setImageBitmap(bmp);

Here, you will need to get the bitmap of the card image in bmp variable.

Upvotes: 1

overbet13

Reputation: 1674

You could try something like this:

First, you create a selector for the button in the res/drawable/ folder (let's call it selector_button.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/image_resource_for_button_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/image_resource_for_button_pressed"
          android:state_focused="true" />
    <item android:drawable="@drawable/image_resource_for_button_normal" />
</selector>

Here you can define as and android:drawable not just @drawable's, but @color's or @layout's, too. If you want a more complex layout, you should define one with the background image of the button and another image on top of it using a RelativeLayout for example.

In order to do this, you have to have image_resource_for_button_pressed.png (for pressed and focused state) and image_resource_for_button_normal.png (for normal state) in your res/drawable/ folder.

After that, you create a button, like this:

<Button
    android:id="@+id/aButton"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/selector_button"
    android:text="Hardcoded string" />

This approach helps you maintain code readability, since you just extracted the changing of the image resource into an .xml file.

Upvotes: 0