选项1：Shape Drawable

Question

我有一个TextView，我想沿其顶部和底部边框添加黑色边框。我尝试将android:drawableTop和android:drawableBottom添加到TextView，但这只会导致整个视图变黑。

<TextView
    android:background="@android:color/green"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:drawableTop="@android:color/black"
    android:drawableBottom="@android:color/black"
    android:text="la la la" />

有没有办法轻松地在Android中的视图（特别是TextView）中添加顶部和底部边框？

Answer 1

在android 2.2中，您可以执行以下操作。

创建一个xml drawable，例如/res/drawable/textlines.xml，并将其指定为TextView的background属性。

<TextView
android:text="My text with lines above and below"
android:background="@drawable/textlines"
/>

/res/drawable/textlines.xml

<?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="1dp" android:color="#FF000000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
   </item>

   <item android:top="1dp" android:bottom="1dp"> 
      <shape 
        android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
   </item>

</layer-list>

缺点是您必须指定不透明的背景颜色，因为透明胶片不起作用。（至少我以为他们做了，但我错了）。在上面的示例中，您可以看到第一个形状#FFdddddd的纯色以第二个形状描边颜色复制。

Answer 2

我使用了一个技巧，以便边框显示在容器外面。使用此技巧时，只绘制一条线，以便显示底层视图的背景。

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

            <solid android:color="#00FFFFFF" />

            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

</layer-list>

Answer 3

选项1：Shape Drawable

如果您想要在布局或视图周围设置边框，这是最简单的选项。在drawable文件夹中创建一个类似于以下内容的XML文件：

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

    <solid android:color="#8fff93" />

    <stroke
        android:width="1px"
        android:color="#000" />

</shape>

如果您不想填写，可以删除solid。布局/视图中设置background="@drawable/your_shape_drawable"。

选项2：背景视图

这是我在RelativeLayout中使用的一个小技巧。基本上你想要给出一个边框的视图下面有一个黑色方块，然后给那个视图一些填充（不是边距！），所以黑色方块显示在边缘。

显然，如果视图没有任何透明区域，这只能正常工作。如果确实如此，我建议您编写一个仅绘制边框的自定义BorderView - 它应该只有几十行代码。

<View
    android:id="@+id/border"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/image"
    android:layout_alignLeft="@+id/image"
    android:layout_alignRight="@+id/image"
    android:layout_alignTop="@+id/main_image"
    android:background="#000" />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_...
    android:padding="1px"
    android:src="@drawable/..." />

如果您想知道，与adjustViewBounds=true一起使用。但是，如果您希望在整个RelativeLayout中拥有背景，则无效，因为有一个错误会阻止您使用RelativeLayout填充View。在这种情况下，我建议使用Shape drawable。

选项3：9-patch

最后一个选择是使用像这样的9-patch drawable：

您可以在任何可以设置android:background="@drawable/..."的视图上使用它。是的它确实需要6x6 - 我尝试了5x5而且它没有用。

这种方法的缺点是你不能很容易地改变颜色，但如果你想要花哨的边框（例如只有顶部和底部的边框，就像这个问题那样）那么你可能无法做到这些使用Shape drawable，这不是很强大。

选项4：额外视图

如果您只想在视图上方和下方设置边框，我忘了提及这个非常简单的选项。您可以将视图置于垂直LinearLayout（如果尚未显示），然后在其上方和下方添加空View，如下所示：

<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>

Answer 4

要仅在底部添加1dp白色边框并使用透明背景，您可以使用以下内容，这比此处的大多数答案更简单。

对于TextView或其他视图添加：

android:background="@drawable/borderbottom"

在drawable目录中添加以下XML，称为borderbottom.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-2dp" android:left="-2dp" android:right="-2dp">
        <shape android:shape="rectangle">
            <stroke android:width="1dp" android:color="#ffffffff" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

如果您想在顶部添加边框，请将android:top="-2dp"更改为android:bottom="-2dp"

颜色不需要是白色，背景也不需要透明。

可能不需要solid元素。这取决于你的设计（感谢V. Kalyuzhnyu）。

基本上，此XML将使用矩形形状创建边框，但随后将顶部，右侧和左侧推到形状的渲染区域之外。这样只留下底部边框。

Answer 5

所以我想做一些稍微不同的事情：仅在底部有一个边框，以模拟一个ListView分隔符。我修改了Piet Delport的答案并得到了这个：

<?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/background_trans_light" />    

        </shape>
   </item>

    <!-- this mess is what we have to do to get a bottom border only. -->
   <item android:top="-2dp"
         android:left="-2dp"
         android:right="-2dp"
         android:bottom="1px"> 
      <shape 
        android:shape="rectangle">    
            <stroke android:width="1dp" android:color="@color/background_trans_mid" />
            <solid android:color="@null" />
        </shape>
   </item>

</layer-list>

注意使用px而不是dp来获得精确的1像素分频器（某些手机DPI会使1dp线消失）。

Answer 6

目前接受的答案并不奏效。由于抗锯齿，它会在视图的左侧和右侧创建细垂直边框。

此版本完美无缺。它还允许您独立设置边框宽度，如果需要，还可以在左/右侧添加边框。唯一的缺点是它不支持透明度。

使用下面的代码创建一个名为/res/drawable/top_bottom_borders.xml的xml drawable，并将其指定为TextView的背景属性。

<?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="#DDDD00" /> <!-- border color -->
        </shape>
    </item>

    <item
        android:bottom="1dp" 
        android:top="1dp">   <!-- adjust borders width here -->
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />  <!-- background color -->
        </shape>
    </item>
</layer-list>

通过Marshmallow在Android KitKat上测试

Answer 7

正如@Nic Hubbard所说，有一种非常简单的方法可以添加边界线。

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#000000" >
</View>

您可以将高度和背景颜色更改为您想要的任何颜色。

Answer 8

我的答案基于@Emile版本，但我使用的是透明色而不是实色此示例将绘制一个2dp底部边框。

<?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="2dp"
                     android:color="#50C0E9" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <item  android:bottom="2dp" >
        <shape android:shape="rectangle" >
            <stroke  android:width="2dp"
                     android:color="@color/bgcolor" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

@ color / bgcolor 是您用边框绘制视图时背景的颜色。

如果要更改边框的位置，请使用以下方法之一更改偏移：

android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"

或将它们组合成2个或更多边框：

android:bottom="2dp" android:top="2dp"

Answer 9

您还可以将视图包装在FrameLayout中，然后将框架的背景颜色和填充设置为您想要的颜色;但是，默认情况下，textview具有“透明”背景，因此您还需要更改textview的背景颜色。

Answer 10

为什么不创建一个背景色的1dp高视图？然后它可以轻松放置在您想要的位置。

Answer 11

只是将我的解决方案添加到列表中..

我想要一个半透明的底部边框，它延伸超过原始形状（所以半透明边框在之外的父矩形）。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <shape android:shape="rectangle" >      
      <solid android:color="#33000000" /> <!-- Border colour -->
    </shape>
  </item>
  <item  android:bottom="2dp" >
    <shape android:shape="rectangle" >     
      <solid android:color="#164586" />
    </shape>
  </item>
</layer-list>

哪个给了我;

enter image description here

Answer 12

首先制作一个包含如下所示内容的xml文件，并将其命名为border.xml，并将其放在res目录中的layout文件夹中

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp" android:color="#0000" />
    <padding android:left="0dp" android:top="1dp" android:right="0dp"
        android:bottom="1dp" />
</shape>

之后在代码中使用

TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);

这将在TextView的顶部和底部形成一条黑线。

Answer 13

要改变这一点：

<TextView
    android:text="My text"
    android:background="@drawable/top_bottom_border"/>

我更喜欢这种方法＆＃34; drawable / top_bottom_border.xml＆＃34;：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="270"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#000"
                android:centerColor="@android:color/transparent"
                android:centerX="0.01" />
        </shape>
    </item>
</layer-list>

这只会制作边框，而不是在背景有颜色时会出现的矩形。

Answer 14

将文件添加到res / drawable

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

将此文件上的链接添加到背景属性

Answer 15

记下以下代码

<View
    android:layout_width="wrap_content"
    android:layout_height="2dip"
    android:layout_below="@+id/topics_text"
    android:layout_marginTop="7dp"
    android:layout_margin="10dp"
    android:background="#ffffff" />

Answer 16

使用InsetDrawable添加边框以插入边框的最简单方法，以下将仅显示顶部边框：

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="-2dp"
    android:insetLeft="-2dp"
    android:insetRight="-2dp">
    <shape android:shape="rectangle">

        <solid android:color="@color/light_gray" />
        <stroke
            android:width=".5dp"
            android:color="@color/dark_gray" />
    </shape>
</inset>

Answer 17

你可以通过这个代码片段来做到这一点 -

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Minus (-) how much dp you gave in the stroke width from left right-->
    <item android:left="-10dp" android:right="-10dp">
        <shape
            android:shape="rectangle">
            <stroke android:width="10dp" android:color="@android:color/holo_red_dark" />
           <!--This is the main background -->
            <solid android:color="#FFDDDDDD" />
        </shape>
    </item>
</layer-list>

预览 -

Answer 18

只需在View

的顶部和底部添加视图。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:gravity="center"
        android:text="Testing"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

Answer 19

尝试使用线性布局包装图像，并将其背景设置为文本周围所需的边框颜色。然后将textview上的填充设置为边框所需的厚度。

Answer 20

您还可以使用9路径来完成工作。创建它，使彩色像素的高度不会倍增，而只会是透明像素。

Answer 21

<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid android:color="@color/light_grey1" />
<stroke
    android:width="1dip"
    android:color="@color/light_grey1" />

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="5dp"
    android:topRightRadius="5dp" />

    </shape>

Answer 22

这是一种实现方法。

    <?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="1dp"
                    android:color="@color/grey_coaching_text" />
            </shape>
        </item>

        <item
            android:bottom="1dp"
            android:top="1dp">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </item>
    </layer-list>

第一项用于笔画，第二项用于纯色背景。隐藏左右边框。

Answer 23

// Just simply add border around the image view or view

<ImageView
                android:id="@+id/imageView2"
                android:layout_width="90dp"
                android:layout_height="70dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="10dp"
                android:layout_toLeftOf="@+id/imageView1"
                android:background="@android:color/white"
                android:padding="5dip" />

// After that dynamically put color into your view or image view object

objView.setBackgroundColor(Color.GREEN);

//VinodJ/Abhishek

Answer 24

仅强制执行@phreakhead ´s和user1051892 ´s答案，<item android:bottom|android:left|android:right|android:top>如果否定，则必须大于<stroke android:width>。否则，项目的绘画将与笔触的绘画混合在一起，您可能会认为这些值不起作用。

Answer 25

<TextView
    android:id="@+id/textView3"
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#72cdf4"
    android:text=" aa" />

只需在要添加边框的文本下方添加此TextView

有没有一种简单的方法可以在Android视图的顶部和底部添加边框？

25 个答案:

选项1：Shape Drawable

选项2：背景视图

选项3：9-patch

选项4：额外视图