How to show only top and bottom border

44.3k Views Asked by At

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>
5

There are 5 best solutions below

1
On

Try this:

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

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>
1
On

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>
0
On

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>
2
On

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