Develop Reference

Implement different clickable Area on an image-page through image map

A B C D
E F G H --figure.
I am working on Book App on Android. In my book App, there are many images-pages. In first image-page there are 26 alphabets(A-Z),4 alphabets in a raw(as shown in my picture).
My Problem is:
I want to developed a click-able area for each and every alphabets (A-Z) . when user click or touch on any of alphabet then a square box should be appear like "image A is clicked"(shown in above figure).
On every touch or click on alphabets images(A-Z) i will pass corresponding sound. Means i want to call different-different Listeners for different-different area on a single image-page.
i have no idea about how to implement click-able area on an image which click able area or coordinates doesn't vary emulator to emulator.
please provide me some sample code or an idea or reference link.
Thank in Advance

I remember answering a very similar question just a few days ago. In order to implement this as the image, you'll need to know what areas of the image mean what (i.e. if you get coordinates of of a touch event, which action these coordinates would correspond to). Provided you have this info, you can then register OnTouchListener with your ImageView:
imageView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch (View v, MotionEvent event) {
int x = event.getX();
int y = event.getY();
//now deal with coordinates (x, y)
}
});
However in your case, I would suggest using a layout with 26 buttons and just use OnClickListener with each of them. You can easily set the buttons up in the shape you want and you can easily set individual background drawables to them to make it look as one whole image.

Rotate a button (or the text inside) in code

I have to rotate a button (or the text inside, it's the same) by random degree by coding. Is there any button.setRotate(x) in API level lower then 11??

Ok, had a look and the answer is: It's complicated.
You can rotate the button using the old animation framework, e.g. like this:
Button button = (Button) findViewById(R.id.button);
// rotation from 0 to 90 degrees here
RotateAnimation a = new RotateAnimation(0, 90);
a.setFillAfter(true);
a.setDuration(0);
button.startAnimation(a);
The problem here is that the button looks rotated, but can't be clicked correctly. The coordinates that trigger the click event are the ones at the area the button had before beeing rotated.
Since this is not a very good solution, your best bet is probably to write a custom view that extends the Button class and rotate the buttons canvas in onDraw(). You also have to override onMeasure() in this case. See Custom Components for a introduction what to do.
Apart from that you can try to intercept click events from the buttons parent layout and trigger the appropriate event when the click happened within the buttons current coordinates. This is somewhat "hacky" though.

Android: Creating shaped button

How can I create a custom button like this?
It should be just clickable area not a real button.

I use a crapload of irregular shaped buttons on my app, and to change the "hot zone" or "clickable area" of the button, I just use the Bitmap.getPixel() method to check for alpha on the image used. If the method returns 0, then don't perform click event.
Example:
(1) Create your button as usual, whichever way you would like.
(2) Define a Bitmap and assign to it the same image drawable used for the button.
(3) Get the X and Y coordinates of the touch or click action.
(4) Pass the coordinates to the .getPixel(x,y) method.
Sample Code:
// ** Declare your Bitmap somewhere **
final Bitmap TheBitmap;
TheBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.TheImage);
// ** My onTouch code **
public boolean onTouch(View v, MotionEvent event) {
int eventPadTouch = event.getAction();
switch (eventPadTouch) {
case MotionEvent.ACTION_DOWN:
if (iX>=0 & iY>=0 & iX<TheBitmap.getWidth() & iY<TheBitmap.getHeight()) { // ** Makes sure that X and Y are not less than 0, and no more than the height and width of the image.
if (TheBitmap.getPixel(iX,iY)!=0) {
// * A non-alpha area was clicked, do something
}
}
return true;
}
return false;
}
The event.getX() and event.getY() simply give you the coordinates of where you touched the button.
** The above sample is to guide you in the correct direction. There are some checks to add to the code to assure no errors occur.

ceate using your own canvas or make a image using photoshop like this and then using Bitmap.createScaledBitmap scale it according to dimension of your button and hence you will get this button.
using canvas you have to write more code just do this it will work fine

Simply just create an image like that and you can use either ImageView or Button w/o text, and implement an OnClickListener. It just works!

save that as a png and and put it in your drawables folder. Then in your xml use something like this
<Button
android:height="wrap_content"
android:width="wrap_content"
android:background="#drawable/your_png"
/>
I am not 100% positive that the corner cut out is going to work properly. That corner area that is gone may end up being clickable. If that is the case and if you don't want it to be then you'll have to slice your picture in half somewhere create two buttons that you can set next to each other to make up that shape and use the same click listener for both. From the users perspective it will still seem like one button.

Problems with touch event

Speaking of events we know that the touch screen method onTouchEvent (MotionEvent events) allows you to capture touch events on the screen and event.getX () and
event.getY () give me the coordinates of the touch as float values ​​(ie values ​​with a comma).
Specifically, I realized that taking logcat using the fixed point the finger in a mobile phone screen and not moving it, the event is not only perceived but MotionEvent.ACTION_DOWN MotionEvent.ACTION_MOVE and returned coordinates are manifold. This i can understand because the surface of the finger touches more points and more by reading the device coordinates believe that the finger moves while holding it.
My problem is that I would read the color of one pixel of a color image when I hold your finger still. In particular I need the central area occupied by the finger.
First, assuming you have a Bitmap object, I have to round to integer coordinates of the touch as the getPixel (intX, int y) coordinates of the entire Bitmap wants to return the pixel color.
Then how do I get the central point of touch? Be that there is a function that can help me? Keep in mind that while I stopped and read the value of a pixel on the image then I start to move slowly and even though I always record every move the center pixel. I need this because every move, if you change the color of the image in pixels, I want to vibrate or not the device.
If I could stop thinking about themselves in a dynamic array to store the coordinates of different pixels and search for the center of gravity, but moving I do not know what to do. I think however, that the research center of gravity, if not done very efficiently, can be slow during the move and then give the wrong results. If the CG is not quite enough for me to another point belonging to the environment.
I hope you can help me maybe with a few lines of code sketched.
Thanks in advance.

To get the touch position of finger, just cast the getX() and getY() to int and perform your desired tasks.
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN ) {
getPixelAt((int)event.getX(), (int)event.getY());
}
}

you can put you on main activity class when you can want to touch event occurs. let see you can put following code or not ? and return is most important as well.
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
mDistanceX = 0;
}
return super.onTouchEvent(event);
}

Making one image into several image buttons

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)

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:
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.

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.

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