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.

Solution 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:

Solution 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.

Solution 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.

Solution 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

View more solutions

Comments

[anurag]

i can set only one value for android:background... its either the border or transparency... According to your code, I am getting borders, but not transparency. I hope u got me?? anyways thanks for an optimized code for borders.

[S.D.]

@anurag just edit the colors, first 2 digits are for transparency (#00 to #ff). I've place default fill color as #66000000 which is semi transparent black, and default border color as "#ffffffff" which is full opaque white.

[cosmincalistru]

@anurag. The color value #FFBBCCDD - FF -> transparency level (00 being the most transparent), BB -> red level (FF -> being fully red), CC -> green level, DD -> blue level. If the color value has only 6 hex characters and not 8 as this one, that means that transparency is ignored (the element is opaque). #FFCCBBDD equals #CCBBDD. Next time at least try the answers because @ Singularity kind of did what you asked in the image.

[Ali Imran]

Try @VendettaDroid solution.

[anurag]

Works indeed... I know my words aren't enough for the help, but still thanks a ton buddy.... u made my day :) :)

[anurag]

Sir, thanks for the help, its deeply appreciated... bt, I got what I needed from @VendettaDroid...

[TacoEater]

Thanks dude, Works Like a charm

[azurh]

How about a bottom border only?