How to show only top and bottom border

Question

This is my XML code which works fine, the only problem is it's showing border on all four sides while I want only to show border on the top and on the bottom only. How can I do that?

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#FFFFFF" />
    <stroke
        android:width="3dip"
        android:color="#B1BCBE"
    />

    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip"
    />

</shape>

Does this answer your question? [Is there an easy way to add a border to the top and bottom of an Android View?](https://stackoverflow.com/questions/1598119/is-there-an-easy-way-to-add-a-border-to-the-top-and-bottom-of-an-android-view) — Gk Mohammad Emon, Mar 09 '21 at 19:04

Raghunandan · Answer 1 · 2013-09-10T13:29:58.203

Try the below

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

enter image description here

Edit:

Modify the below according to your requirements by changing the color, stroke width and padding

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

Snap

enter image description here

What if I wanted red on top and blue on bottom? I want something like this: https://2.bp.blogspot.com/-FI3EGIqLOc4/VkNs8YtLSGI/AAAAAAAAb6w/yEGC_F3zP9o/s1600/AndroidLayerDrawableProgrammatically.png around the layout... any way to do it without code and through XML? — Si8, Dec 06 '16 at 15:11

Daniel L. · Answer 2 · 2013-09-10T13:08:09.680

16

use:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- Describes the line -->
    <item android:top="-1dp" android:bottom="-1dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke android:width="1dp" android:color="#ffffff" />
        </shape>   
    </item>
</layer-list>

edited Sep 10 '13 at 13:08

answered Sep 10 '13 at 12:42

Daniel L.

5,060
10
36
59

1

try with margin. removing pading left and right and give < android:marginLeft = "-3dip"> – Prachi Sep 10 '13 at 12:58
– frostymarvelous Jul 15 '14 at 11:08
1

This looks too good to be true. Are there any known issues? For example on some devices does the invisible strokes stutter due to the fractional dp differences? – Taylan Dec 20 '16 at 18:02

score 6 · Answer 3 · edited Sep 29 '17 at 10:25

6

Try this:

<padding
    android:bottom="0dip"
    android:left="-1dip"
    android:right="-1dip"
    android:top="0dip" 
/>

edited Sep 29 '17 at 10:25

Vadim Kotov

8,084
8
48
62

answered Sep 10 '13 at 12:42

Prachi

3,584
2
24
39

increase the negative padding or margin. :) – Prachi Sep 10 '13 at 12:53

score 2 · Answer 4 · answered Sep 29 '17 at 10:02

Its best not to mention the height and width attributes in layer-list as height and width attributes of item is supported only from API 23.

You can use below Drawable that worked below Android 4.0 and above 5.0.

<?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="@color/blue_light" />  <!-- this is stroke color-->
        </shape>
    </item>

    <item android:bottom="5dp" android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/dark_blue" />  <!-- this is main color-->
        </shape>
    </item>

</layer-list>

score 1 · Answer 5 · answered Sep 10 '13 at 12:44

Refer this code -

<?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="#cccccc"/>
        </shape>
    </item>
    <item android:top="2dp" android:bottom="2dp">
        <shape 
            android:shape="rectangle">
        <solid android:color="#efefef"/>
        </shape>
    </item>
</layer-list>

color sceme change now my background color is ffff ur is change — user2761245, Sep 10 '13 at 13:00

How to show only top and bottom border

5 Answers5

Linked

Related