CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
blub
blub

Reputation: 9207

Android: Placing button relative to ImageView

I want to make a part of a bitmap clickable and my layout looks like this:

________________________________
|             #####             |
|             #####             |
|      ___________________      |
|      |                 |      |
|      |                 |      |
|      |      image      |      |
|      |                 |      |
|      |                 |      |
|      ___________________      |
________________________________

I thought the easiest way to this would be to place a button over the image with a relative layout:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageView
        android:id="@+id/ImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ImageView>

    <Button
        android:id="@+id/Button"
        android:layout_width="200dip"
        android:layout_height="150dip"/>
</RelativeLayout>

But I haven't figured out how to get the button to align with the upper left corner of the image (instead of the upper left corner of the relative layout, as it does now). Is this possible with a relative layout?

Suggestions for other approaches are also welcome, I considered this: http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/ But it seems a bit of an overkill for my simple rectangle area.

Upvotes: 0

Views: 1761

Answers (3)

Akshatha S R
Akshatha S R

Reputation: 1345

You can also use

<Button
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/image1" 
        android:drawableLeft="@drawable/image2t"
        android:drawableRight="@drawable/image3"
        android:drawableTop="@drawable/image4"
        android:drawableTop="@drawable/image4"
        android:textColor="#ffffff"
        />

Upvotes: 1

blub
blub

Reputation: 9207

Okay, my google-fu improved and thanks to asenovm I figured it out! The imageview has a android:adjustViewBounds property, which is by default set to false. Setting it to true adjusts the imageviews bounds to the image, so that alignLeft and alignTop work correctly for the button.

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/ImageView"
        android:layout_centerInParent="true" 
        android:adjustViewBounds="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ImageView>

    <Button
        android:id="@+id/Button"
        android:layout_alignLeft="@id/ImageView"
        android:layout_alignTop = "@id/ImageView"
        android:layout_width="200dip"
        android:layout_height="150dip"/>
</RelativeLayout>

Upvotes: 0

asenovm
asenovm

Reputation: 6517

Try this: 

    <ImageView
        android:id="@+id/ImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
    </ImageView>

    <Button
        android:id="@+id/Button"
        android:layout_alignLeft="@id/ImageView"
        android:layout_alignTop = "@id/ImageView"
        android:layout_width="200dip"
        android:layout_height="150dip"/>
</RelativeLayout>

Upvotes: 1

Related Questions