White Border along with transparency in "LinearLayout"

Question

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:

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

Answer 1

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:

Answer 2

Xml Drawable for background:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="30dp" />
<stroke android:width="5dp" android:color="#ffffffff"/>
<solid android:color="#66000000"/>
</shape>

Adjust radius, width and dark color transparency ( #ff and #66 parts) as you please.

Answer 3

For this you can use two layout aligned one top of the other then set the background transparent for the top view and set the white border as background for the bottom view. You can do this thing inside relative layouts.

Answer 4

Indeed well suggestion by @Ali Imran, check below way, hope it will help.

back.xml

<?xml version="1.0" encoding="UTF-8"?> 
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
         <stroke android:width="1dp" android:color="#dd7b7a"/>
         <corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
         android:topLeftRadius="10dp" android:topRightRadius="10dp"/> 
         <solid android:color="#dd7b7a"/>
     </shape>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
<LinearLayout 
     android:padding="4dip"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/back"
    android:gravity="center_horizontal"
    >
<LinearLayout  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
   android:background="@drawable/tile_mode" // your transparent image
    />
</LinearLayout>  
</LinearLayout>

also go through below links in that, way of using xml will works for you.

Bitmap image with rounded corners with stroke