How to set fixed image over google maps on android

Question

I am new to android

I have to add three images calendar, cytilife, and sun images and they should be fixed that is if map is re sized, zoomed, etc at any point of time they should not changed their position.

I am able to display map and the circle. To display images i used ovelay/markers but they are changing if map change.

This is my activity class

   public class MainActivity extends FragmentActivity  {

private GoogleMap map;
private int offset;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map))
            .getMap();

    if (map != null) {

        MarkerOptions options = new MarkerOptions();
        options.position(getCoords(17.3700, 88.4800)).anchor(0.5f, 0.5f);
        options.icon(BitmapDescriptorFactory.fromBitmap(getBitmap(17.3700,
                78.4800)));

        final Marker marker = map.addMarker(options);

        UiSettings uiSettings = map.getUiSettings();
        uiSettings.setScrollGesturesEnabled(true);

        LatLng latLng = new LatLng(-33.796923, 150.922433);
        map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        map.addMarker(new MarkerOptions()
        .position(latLng)
        .title("My Spot")
        .snippet("This is my spot!")
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.calendar)));
        map.getUiSettings().setZoomControlsEnabled(true);
        map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 10));

        map.setOnCameraChangeListener(new OnCameraChangeListener() {

            @Override
            public void onCameraChange(CameraPosition paramCameraPosition) {
                LatLng centerOfMap = map.getCameraPosition().target;
                marker.setPosition(centerOfMap);
            }
        });
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

private Bitmap getBitmap(double latitude, double longitude) {

    // fill color
    Paint paint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint1.setColor(0x110000FF);
    paint1.setStyle(Style.FILL);

    // stroke color
    Paint paint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint2.setColor(Color.GRAY);
    paint2.setStyle(Style.STROKE);

    // circle radius - 200 meters
    int radius = 400;

    // create empty bitmap
    Bitmap b = Bitmap
            .createBitmap(radius * 2, radius * 2, Config.ARGB_8888);
    Canvas c = new Canvas(b);

    c.drawCircle(radius, radius, radius, paint1);
    c.drawCircle(radius, radius, radius, paint2);

    return b;
}

private LatLng getCoords(double lat, double lng) {
    LatLng latLng = new LatLng(lat, lng);

    Projection proj = map.getProjection();
    Point p = proj.toScreenLocation(latLng);
    p.set(p.x, p.y + offset);

    return proj.fromScreenLocation(p);
}

  }

This is my activity_main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.naveen.myfirstapp.MainActivity" >

<fragment
    android:id="@+id/map"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginBottom="86dp"
    class="com.google.android.gms.maps.MapFragment"


     />

Thank you

Answer 1

This is because you are extending a FragmentActivity:

 public class MainActivity extends FragmentActivity  {...

If you don't have to do so, try extending AppCompatActivity:

public class MainActivity extends AppCompatActivity {...

Answer 2

Try this code In this code a image is add over the map fragment and this is showing in the top of map.

  <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"
tools:context=".MapsActivity">


<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/image"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"/>

<fragment
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.google.android.gms.maps.SupportMapFragment" />


</RelativeLayout>

Answer 3

You can use FrameLayout in your XML Layout file to place an image on top of your Map fragment like the following, XML Layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.naveen.myfirstapp.MainActivity" >

<fragment
    android:id="@+id/map"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_marginBottom="86dp"
    class="com.google.android.gms.maps.MapFragment"


     />

     <ImageView 
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentTop="true|left"
         android:src="@drawable/calendar_icon
     />

</FrameLayout>