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>

Divestiture

Does this answer your question? Is there an easy way to add a border to the top and bottom of an Android View? – Myosotis

Answer 1

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> 

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

Tiepolo

What if I wanted red on top and blue on bottom? I want something like this: 2.bp.blogspot.com/-FI3EGIqLOc4/VkNs8YtLSGI/AAAAAAAAb6w/… around the layout... any way to do it without code and through XML? – Sago

why the layer-list ? – Oys

Answer 2

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>

Tessellated

try with margin. removing pading left and right and give < android:marginLeft = "-3dip"> – Dimetric

<item android:top="1dp" android:bottom="1dp" android:left="-1dp" android:right="-1dp"> – Sternutatory

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? – Harmonyharmotome

Answer 3

Try this:

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

Dimetric

increase the negative padding or margin. :) – Dimetric

Answer 4

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>

Kenyatta

Answer 5

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>

Abusive

color sceme change now my background color is ffff ur is change – Divestiture