Android: is it possible to create hollow (empty center) layout?

Question

Sorry if my topic is confusing, I am not sure which words should i use to describe the layout I need.

Currently, I am working on a project that needs to overlay a hollow layout on map view, which the hollow layout will use to display the far distance location point, I post an image to demonstrate what I mean.

Basically the whole screen is fill by Mapview, and the overlay layout should overlay it without cover the center, like what I show in the image.

Here is the xml show what I have done to make layout like above

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

<com.google.android.maps.MapView
android:id="@+id/MapView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:enabled="true"
android:clickable="true"
android:apiKey="..."
/>

   <View
   android:layout_width="320dip"
   android:layout_height="50dip"
   android:layout_gravity="center_horizontal|top"
   android:background="#800ff4ff"
   android:textColor="#ffffffff" />


 <View
    android:layout_width="320dip"
    android:layout_height="50dip"
    android:layout_gravity="center_horizontal|bottom"
    android:background="#800ff4ff"
    android:textColor="#ffffffff"
  />

<View
    android:layout_width="50dip"
    android:layout_height="520dip"
    android:layout_gravity="center_vertical|right"
    android:background="#800ff4ff"
    android:textColor="#ffffffff" />

 <View
    android:layout_width="50dip"
    android:layout_height="520dip"
    android:layout_gravity="center_vertical|left"
    android:padding="20dip"
    android:background="#800ff4ff"
    android:textColor="#ffffffff" />

</FrameLayout>

I use frame layout to allow layout can overlay others, and create 4 separate on each edge to simulate what I really want (empty in the center). I just not sure who to make layout only show 4 sides and keep the center invisible, if anyone can help please give me some guidance. thanks.

Answer 1

There is another easy option that you can use which meets your requirements.

• Create new drawable resource with defined shape. Call this resource (XML file): margin_border.xml and place it under drawable folder. The content of this XML:

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle" >
  
      <stroke
          android:width="50dp"
          android:color="#800ff4ff" />
  
      <solid android:color="#00000000" />
  
  </shape> 
  

  Explanation: This shape will act as border/frame for your inner layout. The 'stroke' attribute which is a border could be in any color you want and the 'solid' attribute has transparent color.

• Then use this shape in your main layout:

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" >
  
      <com.google.android.maps.MapView
          android:id="@+id/MapView"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:layout_alignParentRight="true"
          android:layout_alignParentTop="true"
          android:apiKey="..."
          android:clickable="true"
          android:enabled="true" />
  
      <!-- Set hollow layout -->
      <LinearLayout
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:layout_alignParentRight="true"
          android:layout_alignParentTop="true"
          android:background="@drawable/margin_border"
          android:padding="50dp" >
      </LinearLayout>
  
  </RelativeLayout>
  

  Explanation: The main layout is RelativeLayout. The MapView didn't change, except alignParent flag for all directions which is set to true like it's shown here.

  And finally use any layout you want for the center. I used LinearLayout while background is referencing to shape drawable.

  Note: The padding of this layout must be the same as the stroke width in the shape. In this case it is 50dp

This is how it looks on my mobile (screenshot):

Answer 2

You can achieve this using a FrameLayout but a framelayout doewn't give you much freedom as the linearlayout and the relativelayout. So, I would suggest you to use either of the layout as the container and use a shape drawable as the background. The shape drawable will produce the required effect.
Here is a sample code for shape drawable:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid
        android:color="#00000000" />
    <stroke 
        android:width="50dp"
        android:color="#ae00ffff"/>
</shape>

Here the stroke act as the translucent area on the screen. You can change the width to match your requirement.

Answer 3

My recommedation is that you use a RelativeLayout like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<MapView android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</MapView>

<FrameLayout
    android:id="@+id/top"
    android:layout_width="fill_parent"
    android:layout_height="50dip" >
</FrameLayout>

<FrameLayout
    android:id="@+id/bottom"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:layout_alignParentBottom="true" >
</FrameLayout>

<FrameLayout
    android:id="@+id/left"
    android:layout_width="50dip"
    android:layout_height="wrap_content"
    android:layout_above="@id/bottom"
    android:layout_below="@id/top" >
</FrameLayout>

<FrameLayout
    android:id="@+id/right"
    android:layout_width="50dip"
    android:layout_height="wrap_content"
    android:layout_above="@id/bottom"
    android:layout_alignParentRight="true"
    android:layout_below="@id/top" >
</FrameLayout>

</RelativeLayout>

At least that's the easiest way I can think of!