Making one image into several image buttons

Question

I asked this question once before, but didn't get any good feedback, so I'm posting it again to try to get more help

Ok, I'm making an app with this kind of of disk in it: http://dl.dropbox.com/u/8051037/disk_full.png

I have the two rings as separate images, but I need to figure out a way to position them like they are in the image, first off. I'm not great at figuring out layouts, so I don't really know where to start with that.

Also, I need each section defined by the black lines to be a different imagebutton. I've been everywhere looking for an answer to this, but no one's been able to help me so far.

Thanks for any help, been stuck on this problem for a few MONTHS now!

EDIT: To help make my problem a bit more clear, I'll fully explain what I'm doing. I'm making a launcher modification to make it kinda look like Tony Stark's phone from Iron Man 2, like this: http://perceptionnyc.com/sites/default/files/D_01_PDA_flat_01.jpg.

(Original question: How make one image into multiple buttons and some other stuff)

[How make one image into multiple buttons and some other stuff](http://stackoverflow.com/questions/5385033/how-make-one-image-into-multiple-buttons-and-some-other-stuff) - Improve the previous question, do not repost the same. You can explain in your own question why the answer given is not sufficient — Aleadam, May 24 '11 at 16:42
I'm not sure what you want from your images, but I just posted an example from the image you posted. If you're more specific I might be able to help more — mazlix, May 24 '11 at 16:54
I'm sorry about the double post- I was trying to bump it up, because I think my original question just got lost in the masses — c0dege3k, May 24 '11 at 17:12

Jake Wharton · Answer 1 · 2011-05-24T18:02:00.880

5

Your best best would be to create the image as a single view, override onTouchEvent() method, and call .getX() and .getY() on the event. Then you can determine where was clicked with some simple math.

This will result in a much better solution than trying to create multiple overlapping views and non-rectangular buttons.

edit:

enter image description here

Given (x, y) you can calculate where the click was using the Pythagorean theorem to get the length of the hypotenuse (for which circle was clicked) and get the angle using tan^-1(opp/adj) (for which pie slice was clicked).

FYI, the (x,y) noted in the picture would actually be the respective difference from the center of the image, NOT the values of getX() and getY() directly.

Here is an example of similar code being used for a circular color picker in ADW.Launcher.

edited May 24 '11 at 18:02

answered May 24 '11 at 16:43

Jake Wharton

75,598
23
223
230

I think you're on the right track, but I don't totally understand what you mean. Could you (or anybody else) explain it differently? – c0dege3k May 24 '11 at 17:09
Added a (horrible mspaint) example image and brief description of math in answer. – Jake Wharton May 24 '11 at 17:42
Ok, I think I get it now. Only thing is, I need each separate disk to spin (which I already have theoretically working), so I don't think this method will work. If I'm reading it right. – c0dege3k May 24 '11 at 22:43
Well all you would have to do would be to adjust the calculation to whatever the current rotation of the image would be. However, you are toeing the border of what is possible and practical through this method. It is going to become a lot more difficult as you move forward with just images. You might want to look into drawing the circles by hand. This would afford you the ability to provide instant feedback and the calculations would mostly already have to be done in the drawing logic anyways. In either case, this isn't going to be trivial. – Jake Wharton May 25 '11 at 00:27

score 1 · Answer 2 · answered May 24 '11 at 18:28

Do what Jake said. Try starting out something like this:

class Disk extends ImageView {
public Disk(Context context, AttributeSet attrs) {
    super(context, attrs);
}
public boolean onTouchEvent (MotionEvent event) {        
    double x =  event.getX() - getWidth() / 2.0;
    double y = - ( event.getY() - getHeight() / 2.0);        
    // Compare this to the radii that mark the rings
    double distFromOrig = Math.sqrt( x*x + y*y );
    // Compare this to the angles of your slices (in radians)
    double angle = Math.atan2(y, x);
    return true;        
}

}

Then put it in a view like this:

<view class="package.name.goes.here.Disk" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:src="@drawable/disk_full">
</view>

The downside is that there's no immediate visual feedback on which section the user selected.

Cool, that's looks like a pretty good implementation of it, thanks. I can work on the visual feedback — c0dege3k, May 24 '11 at 23:08

mazlix · Answer 3 · 2011-05-24T16:52:14.370

0

Try using an image map, I think you can make two circles with different radii and depending on the order, one (the inner) will be on top of the other.

working JSfiddle example http://jsfiddle.net/mazlix/wksZq/

I just read your older post, in this case I recommend what the above user posted about using .getX() .getY(), you can just make one image with all the animations you want or two with the smaller inner circle image having transparency, to set them both exactly where you want (on top of eachother) just make sure you use position:absolute

edited May 24 '11 at 16:52

answered May 24 '11 at 16:38

mazlix

6,003
6
33
45

I think he was talking about Android UI layouts, not HTML. Still, the image map concept is probably one of the better ones if you could somehow translate it to Android's UI. – Steve Pomeroy May 24 '11 at 20:21

Making one image into several image buttons

3 Answers3

Linked