Is it possible to have Camera Preview and TextView on the same screen?
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>
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>
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>
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:
精彩评论