android border around view not working

Question

I got the following result with 5 views(top,bottom,left,right,centre) in a RelativeLayout, then placing a camera preview into it.

What I also wanted is to draw a border around the center view. I used a shape drawable for it but it didn't work. The border works for all the views in the relative layout except center.

How can I draw border around it?

Here is the layout:

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

    <RelativeLayout
        android:id="@+id/camera_preview"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1" >

        <View
            android:id="@+id/top"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_alignParentTop="true"
            android:layout_gravity="center"
            android:background="#80000000" />

        <View
            android:id="@+id/bottom"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_alignParentBottom="true"
            android:layout_gravity="center"
            android:background="#80000000" />

        <View
            android:id="@+id/left"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_above="@id/bottom"
            android:layout_alignParentLeft="true"
            android:layout_below="@id/top"
            android:layout_gravity="center"
            android:background="#80000000" />

        <View
            android:id="@+id/right"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_above="@id/bottom"
            android:layout_alignParentRight="true"
            android:layout_below="@id/top"
            android:layout_gravity="center"
            android:background="#80000000" />

        <View
            android:id="@+id/center"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/bottom"
            android:layout_below="@id/top"
            android:layout_gravity="center"
            android:layout_margin="25dp"
            android:layout_toLeftOf="@+id/left"
            android:layout_toRightOf="@id/right"
            android:background="@drawable/border_red" />

    </RelativeLayout>

    <Button
        android:id="@+id/button_capture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Capture" />

</LinearLayout>

and here is the border_red.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#00000000"/>
    <padding android:left="10dp" android:top="10dp"
        android:right="10dp" android:bottom="10dp" />
    <stroke android:color="#FF0000" android:width="5dp" />
</shape>

Answer 1

This is because you are giving margin to the View which was way too much to fit in the area.That is why your center View was not visible.Replace your center View with the below View code.This works for me, hope it works for you too eg.

<View
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/bottom"
        android:layout_below="@id/top"
        android:layout_gravity="center"
        android:layout_toLeftOf="@+id/right"
        android:layout_toRightOf="@+id/left"
        android:background="@drawable/border_red" />

Answer 2

Reduce Height to 5dp like this android:layout_height="5dp" in View

Horizontal line

  <View
     android:id="@+id/view"
     android:background="#FF4500"
     android:layout_width="fill_parent"
     android:layout_height="2dp"     
     android:layout_below="@+id/listview_id" />

vertical line

 <View
   android:id="@+id/view"
   android:background="#FF4500"
   android:layout_width="2dp"
   android:layout_height="fill_parent"     />

Answer 3

An Alternative Solution :-

      <LinearLayout
        android:id="@+id/center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom"
        android:layout_below="@id/top"
        android:layout_gravity="center"
        android:layout_margin="25dp"
        android:layout_toLeftOf="@+id/left"
        android:layout_toRightOf="@id/right"
        android:background="#FF0000"
        android:padding="5dp">

        <View
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#00000000"/>
      </LinearLayout>