How to create a GUI / HUD on top of glSurfaceView in Android

Question

I have a glSurfaceView that looks like this:

 public class GLLayer extends GLSurfaceView implements SurfaceHolder.Callback, Camera.PreviewCallback, Renderer { private Context context; private Circle cRing; private CompassNeedle cNeedle; private MarkerNorth mNorth; private MarkerEast mEast; private MarkerSouth mSouth; private MarkerWest mWest; private MarkerSouthWest mSWest; private MarkerSouthEast mSEast; private MarkerNorthWest mNWest; private MarkerNorthEast mNEast; private MarkerWest mGod; private MarkerCustom userTag; ArrayList <MarkerCustom> locationTags; private PhoneOrientation phoneOri; private boolean randomSelection[][][]=new boolean[10][10][10]; ArrayList<double[]> tags = new ArrayList<double[]>(); double tempOr[] = new double[3]; ARLaunch _parent; RelativeLayout rel; public GLLayer(Context context, int orientation, ArrayList<MarkerCustom> custMarkers,ARLaunch parent) { super(context); locationTags = custMarkers; _parent = parent; this.context = context; this.mGod = new MarkerWest(); this.cRing = new Circle(); this.cNeedle = new CompassNeedle(); this.mNorth = new MarkerNorth(); this.mEast = new MarkerEast(); this.mSouth = new MarkerSouth(); this.mWest = new MarkerWest(); this.mSWest = new MarkerSouthWest(); this.mSEast = new MarkerSouthEast(); this.mNWest = new MarkerNorthWest(); this.mNEast = new MarkerNorthEast(); phoneOri=new PhoneOrientation(context); // sensor manager and interpreter // settings for translucent glView this.setEGLConfigChooser(8, 8, 8, 8, 16, 0); this.getHolder().setFormat(PixelFormat.TRANSLUCENT); // set render to inline this.setRenderer(this); phoneOri.start(context, orientation); } @Override public void onDrawFrame(GL10 gl) { gl.glEnable(GL10.GL_TEXTURE_2D); // clear Screen and Depth Buffer gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT); // Reset the Modelview Matrix gl.glLoadIdentity(); //GLU.gluLookAt(gl, eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ); GLU.gluLookAt(gl,0, 0, 0, 0, 0, 0, 0, 0, 0); float floatMat[]=phoneOri.getMatrix(); gl.glMatrixMode(GL10.GL_MODELVIEW); gl.glLoadMatrixf(floatMat, 1); //ArrayList<Square[]> squares = new ArrayList<Square[]>(); gl.glPushMatrix(); gl.glTranslatef(0,0,-10.0f); cNeedle.draw(gl); gl.glLoadMatrixf(floatMat,0); gl.glTranslatef(0,0,10.0f); cRing.draw(gl); //Draw South gl.glTranslatef(0.0f,-150.0f,-10.0f); mSouth.draw(gl); //Draw West gl.glTranslatef(-150.0f,150.0f,0.0f); mWest.draw(gl); //DrawNorth gl.glTranslatef(150.0f,150.0f,0.0f); mNorth.draw(gl); //DrawEast gl.glTranslatef(150.0f,-150.0f,0.0f); mEast.draw(gl); //SW gl.glTranslatef(-225.0f, -75.0f, 0.0f); mSWest.draw(gl); // NW gl.glTranslatef(0.0f,150.f,0); mNWest.draw(gl); gl.glTranslatef(150.0f, 0f, 0f); mNEast.draw(gl); gl.glTranslatef(0.0f,-150.0f,0.0f); mSEast.draw(gl); gl.glPushMatrix(); } @Override public void onSurfaceChanged(GL10 gl, int width, int height) { if(height == 0) { //Prevent A Divide By Zero By height = 1; //Making Height Equal One } float ratio = (float) width / height; gl.glViewport(0, 0, width, height); //Reset The Current Viewport gl.glMatrixMode(GL10.GL_PROJECTION); //Select The Projection Matrix gl.glLoadIdentity(); //Reset The Projection Matrix //Calculate The Aspect Ratio Of The Window //gl.glFrustumf(-ratio, ratio, -1, 1, 1, 100); GLU.gluPerspective(gl, 35.0f, (float)width / (float)height, 5.0f, 200.0f); gl.glMatrixMode(GL10.GL_MODELVIEW); //Select The Modelview Matrix gl.glLoadIdentity(); //Reset The Modelview Matrix GLU.gluLookAt(gl, 0, 1.0f, 5.0f, 0, 0, 0, 0, 1.0f, 0); } @Override public void onSurfaceCreated(GL10 gl, EGLConfig arg1) { // Load the texture for the square //square.loadGLTexture(gl, this.context); for(int i=0;i<locationTags.size();i++){ userTag=locationTags.get(i); userTag.loadGLTexture(gl, this.context); //Figure out how to load textures for each } cRing.loadGLTexture(gl, this.context); cNeedle.loadGLTexture(gl, this.context); mNorth.loadGLTexture(gl, this.context); mEast.loadGLTexture(gl, this.context); mSouth.loadGLTexture(gl, this.context); mWest.loadGLTexture(gl, this.context); mSWest.loadGLTexture(gl, this.context); mNWest.loadGLTexture(gl, this.context); mSEast.loadGLTexture(gl, this.context); mNEast.loadGLTexture(gl, this.context); gl.glEnable(GL10.GL_TEXTURE_2D); //Enable Texture Mapping ( NEW ) gl.glShadeModel(GL10.GL_SMOOTH); //Enable Smooth Shading gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); //Black Background gl.glClearDepthf(1.0f); //Depth Buffer Setup gl.glEnable(GL10.GL_DEPTH_TEST); //Enables Depth Testing gl.glDepthFunc(GL10.GL_LEQUAL); //The Type Of Depth Testing To Do //Really Nice Perspective Calculations //gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_SMOOTH); } @Override public void onPreviewFrame(byte[] data, Camera camera) { // TODO Auto-generated method stub } 

In my main activity, I add it to the view like this:

  setContentView(frame); frame.addView(camPreview, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); frame.addView(glView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); frame.addView(lin); lin.addView(rel); RelativeLayout.LayoutParams pNav = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); pNav.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM,1); pNav.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); pNav.rightMargin = 20; rel.addView(imageView,pNav); lin.bringToFront(); ; imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODOn Auto-generated method stub glView.newTag(); } }); 

The problem is that glSurfaceView displayed at the highest level, spanning the imageView , but still allowing the user to click on the imageView . How can I make ImageView stay at the top of the view as a HUD or GUI

Answer 1

After almost a year, I returned to this and found the following solution to work like a charm. I know that many of them fought with this very problem, so I thought I would share in order to save someone that I survived.

Simple: before adding my views to the frame layout, I set glView zOrderMediaOverlay to TRUE, for example:

 glView.setZOrderMediaOverlay(true); rel.addView(camPreview, camParams); rel.addView(glView, glParams); rel.addView(imageView, imageParams);