How to add border around linear layout except at the bottom?

Question

How to add border around linear layout except at the bottom ? LinearLayout needs to have border at left, top and right side but not at the bottom.

score 169 · Accepted Answer · edited Jul 13 '15 at 20:16

169

Create an XML file named border.xml in the drawable folder and put the following code in it.

 <?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="#FF0000" /> 
    </shape>
  </item>   
    <item android:left="5dp" android:right="5dp"  android:top="5dp" >  
     <shape android:shape="rectangle"> 
      <solid android:color="#000000" />
    </shape>
   </item>    
 </layer-list>

Then add a background to your linear layout like this:

         android:background="@drawable/border"

EDIT :

This XML was tested with a galaxy s running GingerBread 2.3.3 and ran perfectly as shown in image below:

enter image description here

ALSO

tested with galaxy s 3 running JellyBean 4.1.2 and ran perfectly as shown in image below :

enter image description here

Finally its works perfectly with all APIs

EDIT 2 :

It can also be done using a stroke to keep the background as transparent while still keeping a border except at the bottom with the following code.

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:left="0dp" android:right="0dp"  android:top="0dp"  
        android:bottom="-10dp"> 
    <shape android:shape="rectangle">
     <stroke android:width="10dp" android:color="#B22222" />
    </shape>
   </item>  
 </layer-list>

hope this help .

edited Jul 13 '15 at 20:16

gattsbr

3,704
1
20
33

answered May 05 '12 at 13:12

Android Stack

4,214
6
27
49

2

does it work with you, this tested and work with me , check it please – Android Stack May 05 '12 at 16:06
2

Is there anything else to add? Didn't work for me. The other answer below worked though. – shim Oct 25 '12 at 19:37
@Noman its work perfectlly with all APIs, check update answer please – Android Stack Feb 18 '13 at 18:21
@AndroidStack.. i will surely try this next time... Thanks for your reply buddy :) – Noman Feb 21 '13 at 09:11
did not work at all, dont know why ... lower shape post did work ... android 2.3.3 – frno May 13 '13 at 08:57
2

What about transparent rectangle instead of black with red border? – Hanry Jun 04 '13 at 14:20
@hanry sorry i don't get you what do you mean ? – Android Stack Jun 05 '13 at 17:36
@AndroidStack Here in your answer there are two layer one is black and other is red, suppose the layer is transparent instead of black then full red is shown instead of just left-right-top border. – Hanry Jun 06 '13 at 05:44
3

@hanry you can do it in another way ,check EDIT 2 – Android Stack Jun 07 '13 at 20:43
This method works, but what if I want to save the default background drawable ( android:background="?android:attr/windowBackground") and add border to it? Following such approach we loose the ability to easily switch styles afterwards, hard-coding the background colors. – southerton Nov 24 '15 at 11:41

score 57 · Answer 2 · answered May 04 '12 at 23:03

57

Save this xml and add as a background for the linear layout....

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <stroke android:width="4dp" android:color="#FF00FF00" /> 
    <solid android:color="#ffffff" /> 
    <padding android:left="7dp" android:top="7dp" 
            android:right="7dp" android:bottom="0dp" /> 
    <corners android:radius="4dp" /> 
</shape>

Hope this helps! :)

answered May 04 '12 at 23:03

Kenny

5,477
2
15
28

This must be Accepted Answer.Work fine with Nexus 5 5.1.1 – hash May 20 '15 at 07:13
I've tried this solution but the bottom border is still there? – Sam Jun 15 '17 at 09:40

score 22 · Answer 3 · edited May 30 '13 at 15:51

Kenny is right, just want to clear some things out.

Create the file border.xml and put it in the folder res/drawable/

add the code

<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
   <stroke android:width="4dp" android:color="#FF00FF00" /> 
   <solid android:color="#ffffff" /> 
   <padding android:left="7dp" android:top="7dp" 
        android:right="7dp" android:bottom="0dp" /> 
   <corners android:radius="4dp" /> 
</shape>

set back ground like android:background="@drawable/border" wherever you want the border

Mine first didn't work cause i put the border.xml in the wrong folder!

PAD · Answer 4 · 2015-06-12T11:47:01.283

Here is a Github link to a lightweight and very easy to integrate library that enables you to play with borders as you want for any widget you want, simply based on a FrameLayout widget.

Here is a quick sample code for you to see how easy it is, but you will find more information on the link.

<com.khandelwal.library.view.BorderFrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:leftBorderColor="#00F0F0"
            app:leftBorderWidth="10dp"
            app:topBorderColor="#F0F000"
            app:topBorderWidth="15dp"
            app:rightBorderColor="#F000F0"
            app:rightBorderWidth="20dp"
            app:bottomBorderColor="#000000"
            app:bottomBorderWidth="25dp" >
    </com.khandelwal.library.view.BorderFrameLayout>

So, if you don't want borders on bottom, delete the two lines about bottom in this custom widget, and that's done.

And no, I'm neither the author of this library nor one of his friend ;-)

This is what i've been looking for :) – dens14345 Jan 13 '16 at 14:21 — dens14345, Jan 13 '16 at 14:21

How to add border around linear layout except at the bottom?

4 Answers4

Linked