Android clickable map image - android

I am creating an app which is going to have as a background USA map. I want to click on the map and wherever I click I want to create a small red dot. But it should not be created outside of the map borders. Can I use GridView? Thanks.

You can just create a Linear Layout with a USA map as the background and then set an onTouchListener to that Linear Layout, inside the onTouch just add a red dot on the x and y coordinates that the person clicked. Something like this:
public class MyAppActivity extends Activity {
LinearLayout mLayout;
double x, y;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mLayout = (LinearLayout) findViewById(R.id.yourID);
mLayout.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
x = event.getX();
y = event.getY();
//Draw a ball using the x and y coordinates. You can make a separate class to do that.
return false;
});
}
}
and your xml could look something like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/yourID"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/yourUSABackGround"
>
</LinearLayout>
Hope that helps.

Related

OnTouchListener on invisible view

so all I want to do is to touch on a certain part of the screen where an invisible view is hidden.
After that touch the view should fade In.
The Problem: The Listener isn't triggered whe I touch the view.
Things I've tried: view.setImageAlpha(0), view.setAlpha(0), view.setVisibility(View.INVISIBLE)
When I set alpha=1 the listener works fine.
Thanks in advance.
Edit:
Thanks to #Viswanath L for the great solution which he mentioned in his post as second workaround.
I just wanted to give a little code example for that in case someone doesn't know how this works:
What I want: I want to touch the right corner of the screen and at this spot, a view(myView) should fade in.
fadeInListener = new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
System.out.println("TRIGGERED");
//The screen size here is 1080x1920(vertical)
if (event.getRawX() > 800 && event.getRawY() > 1640) {
final AlphaAnimation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setDuration(500);
fadeIn.setFillAfter(true);
myView.startAnimation(fadeIn);
}
}
return false;
}
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
layout.setOnTouchListener(fadeInListener);
}
The layout is:
this.layout = (RelativeLayout) findViewById(R.id.layout);
And myView should be placed in the right corner and what's very important:
myView.setVisibility(View.Gone);
Hope this helps.
INVISBLE means you are trying to add a listener to a view which is not there. You can add the listener to a visible view only.
WORKAROUND
1) Try to make a dummy view which is visible but having the same color as background.
2) Try to set the listener for parent and check the position (whether the position does
belongs to INVISIBLE view).
onTouchListener does not trigger for an invisible View. You can make 2 exactly the same views one under another the one below having the map. It will be visible and so it can be touched but it will be obscured by the view above like they do here: http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/
Try this in your xml:
<View
android:id="#+id/my_inv_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/blue"
/>
<View
android:id="#+id/my_touch_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
And set up the click listener like this:
final View mTouchView = findViewById(R.id.my_touch_view);
final View mInvView = findViewById(R.id.my_inv_view);
mInvView.setVisibility(View.INVISIBLE);
mTouchView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mInvView.setVisibility(View.VISIBLE);
}
});

How to work with the X,Y Coordinates in android

I am new to android and I am trying with positioning my drawings at the right coordinate using touch screen. When i touch the screen I obtain the coordinates(x,y) but when i press my button to draw the circle it draws the circle at a location below the point i touched.I am using a relativeLyout as my layout, and i gave it an ID as "Layout" which I use to reference it in my java class.I thought it is because i am using the addView to draw on the same layout.I tried all my best to correct it but could not. (THE CIRCLE IS DRAWN AFTER CLICKING THE BUTTON BUT NOT AT THE POSITION I WANT IT, IT GOES BELOW THE POINT I TOUCHED)Can someone please help me.
Here is my code.
public class MyView extends View{
float x ;
float y ;
int radius = 20;
public MyView(Context context, float x, float y){
super(context);
this.x = x;
this.y = y;
} //end constructor
public void onDraw(Canvas canvas){
Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setAntiAlias(true);
canvas.drawCircle(x, y, radius, paint);
} //end onDraw
} //end class MyView
Here is my MAIN CLASS:
public class ButtonClickActivity extends Activity implements OnClickListener{
RelativeLayout laying;
Button button;
MyView myView;
private static float x=100;
private static float y=100;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_button_click);
laying = (RelativeLayout) findViewById(R.id.layout);
button = (Button) findViewById(R.id.circle);
//set listeners
button.setOnClickListener(this);
} //end onCreate
public void onClick(View view){
switch(view.getId()){
case R.id.circle:
myView = new MyView(this, x, y);
laying.addView(myView);}
Here is the Touch event
public boolean onTouchEvent(MotionEvent event){
int action = event.getAction();
//get the type of action
switch(action){
case MotionEvent.ACTION_DOWN: //you have touch the screen
x = event.getX();
y = event.getY();
break
}
}
Here is the Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:id="#+id/layout" >
<Button
android:id="#+id/circle"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight = "1"
android:text="Circle"/>
</RelativeLayout>
What you miss is the size of the view. Your custom view doesn't know how much space it needs for the circle, and the default one is wrap content, so what is the minimal size? That's right: 0.
That's why you can't see anything. Either you set a size from outside of the view, or you measure it somehow yourself within the view and tell the parent view what size the view needs (and then check what the parent gives you and use it).
Read here for more information about custom views.
Incidentally, it's not recommended to create the paint inside the onDraw, at least not in a way that recreates it each time it's called.

Layout doesn't work inside onTouch()

I am creating an Activity with two ImageViews.
The first ImageView occupies a part of the screen on startup and I want to show the other ImageView, whose content is a crop around the region where I touch the first Image and on TOP of it.
Class:
public class DetectEyesActivity extends Activity implements OnTouchListener {
private ImageView imgView;
private Bitmap imgBitmap;
private ImageView touchView2;
private Bitmap temp;
#Override
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.detecteyeslayout);
Intent intent = this.getIntent();
byte[] image = intent.getByteArrayExtra("Image");
imgView = (ImageView) findViewById(R.id.detectImageView1);
touchView2 = (ImageView) findViewById(R.id.detectImageView2);
imgBitmap = BitmapFactory.decodeByteArray(image, 0, image.length);
imgView.setImageBitmap(imgBitmap);
temp = Bitmap.createBitmap(imgBitmap, 200, 200, 200, 200);
//touchView2.setImageBitmap(temp);
imgView.setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
int y = (int)event.getY();
int x = (int)event.getX();
temp = Bitmap.createBitmap(imgBitmap, 200,200, 200, 200);
touchView2.setImageBitmap(temp);
touchView2.setVisibility(0);
touchView2.bringToFront();
touchView2.layout(x-200, y-200, x-30, y-30);
return true;
}
}
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/detectImageView1"
android:layout_width="400dp"
android:layout_height="400dp" />
<ImageView
android:id="#+id/detectImageView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:visibility="gone" />
</LinearLayout>
But when I call
touchView2.setImageBitmap(temp);
Inside onTouch() the view is drawn below the initial image on the layout. But if I call it inside onCreate() it is drawn on top of the initial image?
Why does this happens, and how I can I solve this problem?
As I understand your question, you want one of your images overlayed on the other. LinearLayouts display their children in either a horizontal or vertical line. This is not a good ViewGroup to use for your case, as it does not allow multiple children to occupy the same space. I'd try either a Relative or Frame Layout.
Also, you have the second image's visibility set to gone initially, so it's not that the first image is being drawn over it, but that the second image just isn't being drawn at all until you call setVisibility in your onTouch.

Android layoutdisplay ,layout over layout.

As showing on the picture. I want to display the star image above layout .
I am new to this type of coding .
my query is
1)will It possible to display star(image) on my layout side?
2)If on every click on my event I want to display star like and display like second image will it possible?
Means on same screen I have to save the star with their respect position .
thanks in Advanced?
Something like this :
public class MyActivity extends Activity implements View.OnTouchListener {
private RelativeLayout _mainLayout;
/**
* Called when the activity is first created.
*/
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
_mainLayout = (RelativeLayout)findViewById(R.id.canvas);
_mainLayout.setOnTouchListener(this);
}
#Override
public boolean onTouch(View view, MotionEvent event) {
final int X = (int) event.getRawX();
final int Y = (int) event.getRawY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);
ImageView image = new ImageView(this);
image.setImageBitmap(bitmap);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(bitmap.getWidth(), bitmap.getHeight());
layoutParams.leftMargin = X - bitmap.getWidth()/2;
layoutParams.topMargin = Y - bitmap.getHeight()/2;
layoutParams.bottomMargin = -250;
layoutParams.rightMargin = -250;
image.setLayoutParams(layoutParams);
_mainLayout.addView(image);
break;
}
return false;
}
}
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/canvas"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg0large"
>
</RelativeLayout>
To do layout over layout, you should to use RelativeLayout.
If you want to display one layout over another layout you should use FrameLayout
http://developer.android.com/resources/articles/layout-tricks-merge.html

Android animate Translate in android 2.2

i have two image views which translates on click.
the animation works properly for one view but for second image view , my animation is not according to coordinates provided.
when i click top image view (img1) it animates properly toward bottom image view (img2) . But when i click the bottom image view, it animates from somewhere down and move towards image view 2 initial position only. though the expected behaviour is, it should animate from its position to top image view (img1) initial position.
My xml is
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/letter_f"
android:layout_alignParentTop="true"
android:id="#+id/imgview1"
android:background="#drawable/chart"/>
<ImageView android:layout_height="100dp"
android:layout_width="100dp"
android:id="#+id/imgview2"
android:src="#drawable/letter_g"
android:background="#drawable/chart"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
and my java class file is
public class AnimationDemo extends Activity implements OnClickListener
{
private ImageView img1;
private ImageView img2;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
img1 = (ImageView)findViewById(R.id.imgview1);
img2 = (ImageView)findViewById(R.id.imgview2);
img1.setOnClickListener(this);
img2.setOnClickListener(this);
}
#Override
public void onClick(View arg0)
{
int x1,y1; // Coordinates of first image view
int x2,y2; //Coordinates of second image view
ImageView img = (ImageView)arg0;
x1 = img1.getLeft();
y1 = img1.getTop();
x2 = img2.getLeft();
y2 = img2.getTop();
TranslateAnimation slide;
if(arg0 == img1)
{
//translate from img view 1 to img view 2
slide = new TranslateAnimation(Animation.ABSOLUTE,x1,Animation.ABSOLUTE, x2,Animation.ABSOLUTE, y1,Animation.ABSOLUTE,y2 );
}
else
{
// translate from img view 2 to img view 1
slide = new TranslateAnimation(Animation.ABSOLUTE,x2,Animation.ABSOLUTE, x1,Animation.ABSOLUTE, y2,Animation.ABSOLUTE,y1);
}
slide.setDuration(1000);
slide.setFillAfter(true);
img.startAnimation(slide);
}
}
Your troubles are due to your locations. I believe when animations are moved with absolute pixels it is relative to itself. So on your second animation you were in essence moving it from x2=220 to x1=0, and y2=419 to y1=0. So it was moving from (currentX+220, currentY+419) to (currentX +0, currentY +0) which = itself
To solve this instance simply negate and switch the values of the second slide declaration like so:
TranslateAnimation slide;
if(arg0 == img1)
{
//translate from img view 1 to img view 2
slide = new TranslateAnimation(Animation.ABSOLUTE,x1,Animation.ABSOLUTE, x2,Animation.ABSOLUTE, y1,Animation.ABSOLUTE,y2 );
}
else
{
// translate from img view 2 to img view 1
// slide = new TranslateAnimation(Animation.ABSOLUTE,x2,Animation.ABSOLUTE, x1,Animation.ABSOLUTE,y2,Animation.ABSOLUTE,y1);
slide = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE, (-x2),Animation.ABSOLUTE,0,Animation.ABSOLUTE, (-y2));
}
This only happens because your top left sprite is at 0,0 though. You have to seriously rethink how you're moving your sprites around. Just remember, the TranslateAnimation moves them relative to their current positions, basically setting the sprites original location to (0,0).
Could be wrong, but hope it helps. It worked for me...
Sorry it took so long to get back to you, I lost your post and couldn't find it again for some reason. Glad you had commented earlier!

Categories

Resources