Create Interactive Image in android - android

I have images that want to interactive in android, please help me how I can make interactive image in android, I'm new user on this site, may be site is not allow me to post image.
My scenario is, I have 10 chairs around table, and I want user interactive with chair (Click able) and goes to other screen. I'm new to android. Please explain how I can create interactive images for my apps.
Here is an image that helps you understand my scenario:

Just set OnTouchListener to your image view with onTouchEvent method like this one:
#Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
x = event.getX() + this.getLeft();
y = event.getY() + this.getTop();
// check if (x,y) is on chair and do other staff
}
return super.onTouchEvent(event);
}
(x,y) is a point on picture which was clicked. Save ranges of picture's point which are on chairs. Than just check on which one you've clicked and do appropriate staff.

keep all the chair images as separate ImageButton and use on Click listener for image views.
Like for any chair x
ImageButton xchair = (ImageView)findViewById(R.id.xchair);
xchair.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
**Call intent for calling another activity here.**
}
});

Related

make a transparent part of an image unclickable

I use Android studio and I have this image with a transparent background. Whenever i click on it it'll bring me to another Activity. But even when I click on the transparent part of the image it'll bring me to the other Activity.
Is it possible to make the nontransparent part clickable (or touchable) and the transparent part unclickable?
Yes this is possible but it becomes much more difficult than just adding an OnClickListener.
The trick is to use a Touch listener instead of click and on either a DOWN or UP event take the position and then either use some simple maths to work out whether it was a transparent area (if the design is a simple one) or, do some more complicated stuff to work out your pixel values at the centre.
new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
If (event.getAction() == MotionEvent.ACTION_DOWN) {
final int x = (int) event.getX();
final int y = (int) event.getY();
//now map the coords we got to the
//bitmap (because of scaling)
ImageView imageView = ((ImageView)v);
Bitmap bitmap =((BitmapDrawable)imageView.getDrawable()).getBitmap();
int pixel = bitmap.getPixel(x,y);
//now check alpha for transparency
int alpha = Color.alpha(pixel);
If (alpha != 0) {
//do whatever you would have done for your click event here
}
}
return true; //we've handled the event
}
}

How to draw or write a text like MS-Paint in android using onTouch Event?

I have created panel with collection of different colors, pencil, eraser and different shapes similar to MS-Paint. I could be able to draw or write on a screen using Touch Event method. But when I draw something on a screen (when I touch the screen), MotionEvent.ACTION_Down method is calling. So it works fine. When I release my finger from the screen, MotionEvent.ACTION_up method is calling and works fine.
So, my problem is, like MS-PAINT I am not able to see what I drew or wrote before I release my finger from the screen. For an example, see this video. User can see when he dragged the shapes or trying to draw a pencil. Also, in this link user draws using pencil and it is visible without releasing a finger on the screen.
But, when I draw something on the screen, once I released the finger only it appears.
What I need is, when user touch the screen itself if he/she moves the finger on the screen, user must be able to see what they are trying to draw or write on the screen.
For an example: if I try to write some word like "Apple" on a screen, I am trying to put "A" . But when I write letter "A", it is invisible unless I take my finger from the screen. Once if I released my finger from the screen after I drew letter"A" then only the text or picture has been appeared on a screen what I drew.
So, I have done MotionEvent.ACTION_DOWN and MotionEVent.ACTION_UP. It works fine.
But, MotionEvent.ACTION_MOVE is not working properly at all.
This is my Code,
#Override
public boolean onTouchEvent(MotionEvent event)
{
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
if(Shape == ShapeLine)
{
GraphicObject = new Line();
((Line) GraphicObject).getBegin().setX(event.getX());
((Line) GraphicObject).getBegin().setY(event.getY());
}
if(Shape== ShapeRect)
{
GraphicObject = new Rectangle();
Point temp = new Point(event.getX(), event.getY());
endPoint = new Point();
((Rectangle) GraphicObject).settemppointOfOneEndRectangle(temp);
}
else if(event.getAction() == MotionEvent.ACTION_MOVE){
if(Shape== ShapeLine)
{
final float x=event.getX();
final float y=event.getY();
}
if(Shape == ShapeRect)
{
endPoint.x=event.getX();
endPoint.y=event.getY();
invalidate();
}
Anyone suggest me, about ACTION_MOVE. I have tried a lot in a code but no changes and I didn't find any solution while moving.
Basic idea is when you tap record that point in a variable,then inside ACTION_MOVE record the current point and draw a line in between these 2 points.Once done save this point in the previous point. Sudo code:
Point last;
Point current;
...
case ACTION_DOWN:
last=mouse.position;
break;
case ACTION_MOVE:
current=mouse.position;
drawLine(current,last);
last=current;
break;
Do this way,your drawing should be fine.
N.B. Remember,this is a sudo code. :P
EDIT. Example from one of my app. Basically I pointed out what you should do:
public boolean onTouchEvent(MotionEvent event)
{
int action = event.getAction();
switch(action & MotionEvent.ACTION_MASK)
{
case MotionEvent.ACTION_DOWN:
initial.x=(int)event.getX();
initial.y=(int)event.getY();
break;
case MotionEvent.ACTION_MOVE:
current.x=(int)event.getX();
current.y=(int)event.getY();
//draw line using initial as start and current as end point
//sudo code: drawLine(initial,current)
//now set initial to current
initial=current// for the continuity of drawing.
break;
}
return true;
}
initial and current both are Point objects.

How can i set Actions for images in the android?

in my application i have one bag-round image with 5 icons how can i put on-click actions for individual icons in the android in my case 5 icons is place in the one image and that image used as bag-round image in my app.
Please help me thanks in Advance......
You can use ImageButton and listen its on click method:
imgB =(ImageButton)findViewById(R.id.Image_Button_ID);
imgB.setOnClickListener(new OnClickListener() {
// write your code here
});
Or if you want to specify the method in the xml:
<ImageButton android:id="#+id/Image_Button_ID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/blah"
android:onClick="cutsom_onclick_method" />
Hopefully I am not misunderstanding, it is not very clear to me what you need.
OnTouchListener will give you the location of the click which you can use to determine where you have clicked.
imageView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent e) {
if (e.getAction() == MotionEvent.ACTION_DOWN){
int x = (int) e.getX();
int y = (int) e.getY();
}
// then do some calculation with x and y and where they are
return true;
}
});
The other way is to use five ImageButtons and five different images

keep ontouch event when view is removed and add

I have a view in a linearlayout. When the view is longpressed the view will be removed from this linearlayout and placed, on the same position of the screen, to a relative layout. On this way a can move the view over the screen with my finger.
it almost works:
i got the longpress event working (remove the view and place the view to the relativelayout). after that i add an ontoucheventlistener so my view stays with my finger, but only for a second. the last time the touchevent is fired i got "MotionEvent.ACTION_CANCEL". When i remove my finger and place my finger again to the view i can go feature with my movement, then it will keep until i remove my finger.
I think that my problem is that the view it removed for a short moment, at that time i get a "MotionEvent.ACTION_CANCEL", however, there are still some unhandled events, they will be fired first. Thats why i got for about 1 second still ontouchevents. (this is just a thought).
someone a idee how i can keep the ontouchevent, or let the ontouchevent fired without replacing my finger?
Edited
My thought is not correct. When i do a longpress the view stays with my finger, however i lost the view as soon as i move about 50 to 100 pixels to any direction.
Edited 2
the longpress code of the view inside the linearlayout
view.setOnLongClickListener(new OnLongClickListener() {
public boolean onLongClick(View v) {
_linearLayout.removeView(v);
moveView(v);
return true;
}
});
moveView will be called by the longpress
private void moveView(View v) {
_relativeLayout.addView(v);
v.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_MOVE:
int x = (int) event.getRawX();
int y = (int) event.getRawY();
v.layout(x, y, x + v.getWidth(), y + v.getHeight());
break;
case MotionEvent.ACTION_UP:
_relativeLayout.removeView(v);
v = null;
break;
case MotionEvent.ACTION_CANCEL:
//it comes here when i move my finger more then 100 pixels
break;
}
return true;
}
});
}
of corse, this is the relevant part of the code and not the original code
Have a look at the Experience - Android Drag and Drop List post. There is also a source code that does something very similar to what are you trying to get. Eric, the author of that post, uses a separate temporary ImageView to hold a dragged view image, taken with getDrawingCache(). He also hides the original list item by setVisibility(View.INVISIBLE).
In the DragNDrop project (link above) you can replace drag(0,y) calls by drag(x,y) in DragNDrop.java to see a dragging in all directions.
Just throwing some possibilities in because I can't see the code but MotionEvent.ACTION_CANCEL could be being called as the parent layout is switched and the view is getting redrawn.
You could try overriding the onTouchEvent and at the point the ACTION_CANCEL event is sent try get hold of an equivalent view in the new layout and operate on that but I still think the better idea is to redesign so it all takes place in the same layout.

Scroll gallery to next page

Using a widget.Gallery to display a horizontally scrolling list of items. I've implemented paging in the gallery with what seems to be the standard technique: subclass Gallery and implement:
#Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (velocityX>0) {
onKeyDown(KeyEvent.KEYCODE_DPAD_LEFT, null);
} else {
onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);
}
}
When tapping the gallery, I fade up next and previous image buttons. When clicking these, I want the gallery to animated to the next/previous page, respectively. I've tried calling onKeyDown from my next-button handler, but strangely this has no effect.
AbsSpinner has setSelection(int position, boolean animate) but animate is ignored in Gallery.
Exactly what toucan said, but to elaborate further (comments limits are too short):
The problem seems to be the fact that the Gallery doesn't let the user scroll if no children exist in that position yet. scrollToChild() is the culprit when trying to inject the event:
private boolean scrollToChild(int childPosition) {
View child = getChildAt(childPosition);
if (child != null) {
int distance = getCenterOfGallery() - getCenterOfView(child);
mFlingRunnable.startUsingDistance(distance);
return true;
}
return false;
}
Interestingly, if you fling the gallery with your fingers, it will cause the child to be created. Then, if you let go of your finger (going back to the original position), and then press the button that activates the onKeyDown injection, it will work flawlessly - because the child is there.
Unfortunately there's no real solution since everything is private in that class. The only solution is to use setSpacing(-1) or something in the gallery, so left and right children are always created and visible, but just behind the currently selected view.
As a footnote, I'm really baffled as to why everything is private in that class (or in any other of the Android widget classes for that matter). This is one of those things that could easily be fixed with some small code change.
Edit (Aug 2012): For future reference, rather than trying to use a Gallery for this kind of pattern (when you want the user to swipe between different items while only one of them is visible), it's much better to use the Android's compatibility package's ViewPager class. In my opinion, the compatibility package is not as celebrated as it should be (it took me a while to get notice of it). For developers targeting Android 2.x+, it's a godsend.
this is working
create 2 image buttons and gallery
eg:
nextbtn,backbtn and gall
button code is avialable here
nextbtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
gall.onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);
}
});
backbtn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
gall.onKeyDown(KeyEvent.KEYCODE_DPAD_LEFT, null);
}
});
String strMethod = velocityX > 0 ? "movePrevious" : "moveNext";
try {
Method method = Gallery.class.getDeclaredMethod(strMethod, null);
method.setAccessible(true);
method.invoke(this, null);
} catch (Exception e) {
e.printStackTrace();
}

Categories

Resources