Is it possible to have Camera Preview and TextView on the same screen?

Question

I was wondering if there is some way to have a camera preview fill a part of the screen, and at the bottom have a textview box into which I can add text later. I don't have any code yet because my team is still evaluating if this is possible at all before proceeding with the code.

Edit 2: Now I am finally able to see the text on the screen after playing around with android:gravity. But the TextView always shows up on the top of the screen, is there some way to move it to the bottom?

Edit 3: Changing android:layout_height to fill_parent instead of wrap_content fixed the positioning issue

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent">
      <SurfaceView android:id="@+id/preview_view"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:layout_centerInParent="true"/>
      <com.google.zxing.client.android.ViewfinderView
           android:id="@+id/viewfinder_view"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:background="@color/transparent"/>
      ........
      ........
      <TextView android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:gravity="bottom" 
           android:text="Header text"/>

</FrameLayout>

score 3 · Accepted Answer · answered Sep 27 '11 at 16:09

3

Yes, this is possible. You should use FrameLayout for this. Here is an example:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent">

  <SurfaceView android:id="@+id/preview_view"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:layout_centerInParent="true"/>

  <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="top|center_horizontal" 
            android:text="Header text"/>

</FrameLayout>

answered Sep 27 '11 at 16:09

inazaruk

74,247
24
188
156

1

Thanks for the answer, I should have mentioned that the camera preview I'm getting is actually extended from Zxing's barcode scanner. I want to reduce the camera preview size, and have a Textview at the bottom. I've tried adding the TextView as both of you suggested, but I'm unable to see any difference. For your reference I will attach the zxing xml file – Rahul Popuri Sep 28 '11 at 02:52
1

It works now! But a slight problem, I've edited my post to include the code I'm working on. The gravity doesn't seem to work properly :/ Do I need a linear layout somewhere? – Rahul Popuri Sep 28 '11 at 03:13
You used `android:layout_height="wrap_content"`, while it should be `fill_parent` for horizontal gravity to make sense/work. – inazaruk Sep 28 '11 at 06:21

Gene Bo · Answer 2 · 2019-07-02T18:07:30.213

Thanks to the posts on this thread, here's a variation using simple LinearLayout that restricts the dimension of the camera display.

This reduces the size of the "scanning square"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:background="@color/sea_blue_green_dark"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:padding="10dp"
        android:textColor="@color/white"
        android:textSize="28sp"
        android:text="Scan Code Now"/>

    <me.dm7.barcodescanner.zxing.ZXingScannerView
        android:id="@+id/scanner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/white"/>

    <!--
    Add this view to prevent camera from taking up remaining vertical space

    Although seems to be better UX when user can still see camera outside of "Scanner Box Target". 
    Leaving here for reference
    -->
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#8BC34A"/>

</LinearLayout>

=======

This will generate the following layout, where white block becomes the camera area:

score 1 · Answer 3 · answered Sep 27 '11 at 16:15

yes it is possible like this:

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

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

<TextView
    android:id = "@+id/txtview"
    android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:text = "TextView"
    android:padding = "7dp"
    android:gravity = "bottom" />

</FrameLayout>

Is there any way to set both answers as accepted.. I'm only able to set one. Thank you for the help, I got it to work now somewhat, but I'm unable to change the position of the textview to the bottom.. it always shows up on the top. Any tips? — Rahul Popuri, Sep 28 '11 at 03:14

Is it possible to have Camera Preview and TextView on the same screen?

3 Answers3