popup window over canvas Android

Question

I am building an application which display a map (the map is the canvas background) and localise users by adding circle on the canvas(using draw circle). I would like to add a button over the canvas(for now a draw a button on the map and check with ontouch() if the user clicked on it) and when the button is touched I would like to have a window popup. It worked but the popup is behind the canvas(I could see a small piece of it(I removed it)).Is there a way to have my canvas BEHIND the button and the popup window? I saw people talking about putting the canvas in relative layout but I have no idea how to do that.

Here is the xml of my activity, really simple:

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/umap2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

  <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:text="Button" />

  </RelativeLayout>

And here is my activity java code(I removed a couple of things that doesnt have nothing to do with my problem)

  package com.example.client;

  import java.util.LinkedList;
  //....
  import java.util.Timer;

  public class Campus extends Activity{


final Handler myHandler = new Handler();
MapView mapv;
final Activity self = this;
Float ratioX;
Float ratioY;
int width;
int height;
static boolean out=false;
Intent i;


//creating a linked list for each hall
    static LinkedList<compMac> DMS = new LinkedList<compMac>();  
    static LinkedList<compMac> MCD = new LinkedList<compMac>();
    //...
    static LinkedList<compMac> SCI = new LinkedList<compMac>();   
    static LinkedList<compMac> STE = new LinkedList<compMac>();

    @Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.campus); 
    setSize();
    this.mapv = new MapView(this);//!! my view 
    setContentView(mapv);
    i= new Intent(this, myService.class);
    this.startService(i);   
}



//*******************************View class!*******************************
public class MapView extends View {

/*
* Extract the connected users and location from the array. separate the
* array into an array for each building
* */
    private Paint redPaint;
    private float radius;
    Canvas canvas;

    public  MapView(Context context) {
        super(context) ;
        redPaint = new Paint();
        redPaint.setAntiAlias(true);
        redPaint.setColor(Color.RED);


        redPaint.setTextSize(10); 


    }
    @Override
       //drawing a point on every hall on the map where users are connected
    public void onDraw (Canvas canvas) {
                    // draw your circle on the canvas
        if(!out)
        {
    AlertDialog.Builder outOfCampus = new AlertDialog.Builder(self);
    outOfCampus.setTitle("Sorry");
        outOfCampus.setMessage("You are out of Campus");//(toDisplay);
        outOfCampus.setCancelable(false);
    outOfCampus.setPositiveButton("OK", new DialogInterface.OnClickListener() {

    @Override
    public void onClick(DialogInterface dialog, int which) {
    // TODO Auto-generated method stub
    startActivity(new Intent("com.example.client.Sin"));
                }});
    AlertDialog alertdialog = outOfCampus.create();
    outOfCampus.show();
        }
        this.canvas=canvas;
        setBackgroundResource(R.drawable.umap2);
          }

    public void drawPoints(LinkedList<compMac> building)
    {
    if(!building.isEmpty())

    {
        while(!building.isEmpty())
        {
            compMac current = building.pop();   
            Float x= ratioX*(Float.parseFloat(current.getCoorX()));
            Float y= ratioY*(Float.parseFloat(current.getCoorY()));

        //  Log.w("ratioX ",(((Double)(width/768)).toString()));
        //  Log.w("ratioY ",(float)(y.toString()));
            canvas.drawCircle (x,y, 10, redPaint);

        }
    }

    }

    public  boolean onTouchEvent (MotionEvent event) {

        //...//   
            return true;
        }
    }


}

Someone have an idea how i can do that? Thanks

Answer 1

<FrameLayout 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" >

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@drawable/umap2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<RelativeLayout
    android:id="@+id/btn_close"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:background="@drawable/back_transparent_pressed" >

    <Button
        android:id="@+id/button1"
        android:layout_centerInParent="true"
         />
</RelativeLayout>

Answer 2

Calling setContentView two times would not work. Instead you should put your canvas view and the button in a single layout itself but with proper ordering. The last widget in the relative layout gets more priority, so if you want the button to come on top of the canvas your layout should be something like this.

<?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/umap2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

  <com.example.client.MapView
    android:id="@+id/mapView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />


  <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:text="Button" />

  </RelativeLayout>

And to access your MapView in java class

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.campus); 
        setSize();
        this.mapv = findViewById(R.id.mapView); //!! my view 
        i= new Intent(this, myService.class);
        this.startService(i); 
}

And obviously alert dialog will be on top of the canvas. Hope it helps!

Edit: I think inflate error is due to incorrect class path. Since MapView is inner class of Campus , path should be like this

<com.example.client.Campus.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Also add this constructor to your MapView class

public  MapView(Context context, AttributeSet attributeSet) {
        super(context, attributeSet) ;
        redPaint = new Paint();
        redPaint.setAntiAlias(true);
        redPaint.setColor(Color.RED);


        redPaint.setTextSize(10); 

    }