How to properly overlay UI Widgets over SurfaceView?

Question

I've got a portrait camera preview working inside a RelativeLayout, a button and a textview. They are there, but not visible, they react to touch actions properly. How do i setup the Z-Order or priority? This is my main.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
    android:layout_height="fill_parent"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+layout/frame"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

<SurfaceView android:id="@+id/surface" android:layout_width="fill_parent" android:layout_height="fill_parent"></SurfaceView>
<Button android:layout_height="wrap_content" android:layout_width="match_parent" android:onClick="hablar" android:text="Button" android:id="@+id/button1"></Button>
<EditText android:layout_height="wrap_content" android:layout_width="match_parent" android:text="EditText" android:id="@+id/edita"></EditText>
</RelativeLayout>
</FrameLayout>

I am facing the same issue, I am stuck on this issue for last 2 days, have you found solution for this? — User7723337, Jun 11 '12 at 09:32
The URLs below offer some good info on this: http://stackoverflow.com/questions/2485141/using-android-view-surfaceview-with-a-camera-on-part-of-the-screen http://github.com/commonsguy/cw-advandroid/tree/master/Camera/Preview/ — , Jul 07 '12 at 15:32

score 4 · Answer 1 · edited Mar 03 '19 at 07:05

just put a View over SurfaceView:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <SurfaceView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="lalalalala" />
</FrameLayout>

score 2 · Answer 2 · answered Jun 26 '11 at 03:44

2

The SurfaceView Overlay sample in ApiDemos shows how to do this. Look for the "SurfaceView Overlay" section here: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/index.html

answered Jun 26 '11 at 03:44

hackbod

90,665
16
140
154

I've seen that example, but i'm working with a SurfaceView, and it doesn't work. Is there any way to make it that way? – AlfredoVR Jun 27 '11 at 16:18
@hackbod Can I Use SurfaceView in a Widget (I have read that it can't be done, as it is not supported) also can you please have a look on this [Turn on Camera from widget in Nexus S and Galaxy SII](http://stackoverflow.com/questions/13858545/turn-on-camera-from-widget-in-nexus-s-and-galaxy-sii) – Viktor Apoyan Dec 14 '12 at 05:07

score 1 · Answer 3 · answered Apr 04 '14 at 16:56

The answer is not intuitive at all, but I found how to do it. Unlike Linear Layouts, order of declaration does NOT define the Z order in Relative Layouts. I was able of overlaying a textview over the Camera Preview by declaring both views in XML and, and overlaying them programatically on my Activity's onCreate Method.

Suppose you have an XML with a TextView with a nice transparent backgroud that you want to overlay over the Camera Preview frame layout, because why not?, it looks cool!:

<RelativeLayout>
      <TextView
        android:id="@+id/txtnombotiga"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ola ke ase"
        android:textColor="#000000"
        android:textSize="16sp"    
        android:background="#55ffffff" 
       />
  <FrameLayout
      android:id="@+id/cameraPreview"
      android:layout_width="match_parent"
      android:layout_height="240dp">     
  </FrameLayout>
</RelativeLayout>

If left like that, the camera will cover your text, no matter what :( To solve it, let´s go programatical, and: 1) detach the TextView from its parent Layout 2) attach it to the camera´s frame layout after attaching the camera first.

Heres the code

OnCreate(){ ...blaa blaaa...

//Create camera instance and reference to our frame Layout
mPreview = new CameraPreview(this, mCamera, previewCb, autoFocusCB);        
FrameLayout preview = (FrameLayout) findViewById(R.id.cameraPreview);
//Add camera to the Frame Layout
preview.addView(mPreview);
//Get reference to the TextView you want to overlay and type something funny
TextView txt=(TextView)findViewById(R.id.txtnombotiga);     
txt.setText("ola keee aseee!");
//1) Step 1, here comes the magic! dettach the textView from its original Layout
((ViewGroup)txt.getParent()).removeView(txt);
//1) Step 2, voila! attach it to the View, order matters here so it will appear on 
//top of the camera!
preview.addView(txt);

This is the general way to do it, If you need more details let me know. I need to meet deadlines at work, so I use the first solution that comes up to my mind, sometimes not the most elegant or efficient, if you know a better way of doing it, please share it with us!

The text will be on top of camera if you change the order of TextView and FrameLayout in the RelativeLayout. And your solution is work. — JOE, Sep 11 '20 at 08:25

score 0 · Answer 4 · answered Feb 17 '12 at 13:09

Hmm, I have it working in a FrameLayout where the SurfaceView is sibling to a ZoomControl. That is, this structure works for me:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <SurfaceView
        android:id="@+id/surface"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <ZoomControls
        android:id="@+id/zoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        />
</FrameLayout>

Maybe the RelativeLayout breaks it?

How to properly overlay UI Widgets over SurfaceView?

4 Answers4