White Border along with transparency in "LinearLayout"

anurag picture anurag · Jan 26, 2013 · Viewed 17k times · Source

I wanted to add a linear layout, having a transparent background as well as with white borders. The problem is: as far as I have googled, I can achieve only one out of both.

Here's what I did:

  1. Saved the following as border.xml in drawable

      <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item> 
           <shape android:shape="rectangle">
           <solid android:color="#FFFFFF" /> 
      </shape>
      </item>   
         <item android:left="5dp" android:right="5dp" android:top="5dp" android:bottom="5dp" >  
         <shape android:shape="rectangle"> 
         </shape>
       </item>    
      </layer-list> 
    
  2. my existing page layout

         <LinearLayout
            android:id="@+id/quiz"
            android:layout_width="150dp"
            android:layout_height="120dp"
            android:background="#66041414"          <-------- replaced it with android:background="@drawable/border"
            android:orientation="vertical"
            android:layout_marginLeft="5dp" >
    
             ......
           </LinearLayout>
    

I am getting opaque background, when the border was included.

I wanted a final result to be like:


Reference image

totally stuck with it. Just wanted to find a way out to achieve it. Any suggestions would be quite helpful.

Answer

VendettaDroid picture VendettaDroid · Jan 26, 2013

Your drawable for background of layout:

You can change radius for corner shape if you want. But stroke will create a border and solid part is the background which we are making transparent.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
  <corners
      android:radius="2dp"
      android:topRightRadius="0dp"
      android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp" />
  <stroke
      android:width="1dp"
      android:color="@android:color/white" />
  <solid android:color="@android:color/transparent"/>
</shape>

and my test layout.xml

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


    <LinearLayout 
        android:id="@+id/ll2"
        android:layout_height="50dp"
        android:layout_width="50dp"
        android:background="@drawable/my_transparent_linear_layout"></LinearLayout>
</LinearLayout>

It works, Below is the proof:

enter image description here