Есть ли простой способ добавить границу к верхней и нижней части Android View?

У меня есть 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" />

Есть ли способ легко добавить верхнюю и нижнюю границу в представление (в частности, TextView) в Android?

Ответ 1

В Android 2.2 вы можете сделать следующее.

Создайте xml drawable, например /res/drawable/textlines.xml, и назначьте это как свойство фона TextView.

<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 копируется во втором цвете штрихов.

Ответ 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>

Ответ 3

Вариант 1: Форма для рисования

Это самый простой вариант, если вам нужна рамка вокруг макета или представления, в котором вы можете установить фон. Создайте XML файл в папке drawable, который выглядит примерно так:

<?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. В основном у вас есть черный квадрат под видом, который вы хотите дать границе, а затем дайте этому виду некоторое дополнение (не margin!), Чтобы черный квадрат показывался по краям.

Очевидно, что это работает только в том случае, если в представлении нет прозрачных областей. Если это так, я бы порекомендовал вам написать пользовательский 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-патч

Последний вариант - использовать 9-патч, как показано на рисунке:

Вы можете использовать его в любом представлении, где вы можете установить android:background="@drawable/...". И да, это должно быть 6x6 - я пробовал 5x5, и это не сработало.

Недостаток этого метода заключается в том, что вы не можете легко изменить цвета, но если вам нужны фантастические границы (например, только граница сверху и снизу, как в этом вопросе), вы, возможно, не сможете их сделать с Shape drawable, что не очень сильно.

Вариант 4: Дополнительные виды

Я забыл упомянуть этот очень простой вариант, если вам нужны только границы выше и ниже вашего представления. Вы можете поместить свое представление в вертикальное LinearLayout (если оно еще не), а затем добавить пустой View выше и ниже его следующим образом:

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

Ответ 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 элемент может не потребоваться. Это будет зависеть от вашего дизайна (спасибо В. Калюжню).

В принципе, этот XML будет создавать границу с использованием формы прямоугольника, но затем толкает верхнюю, правую и левую стороны за область визуализации для фигуры. Это оставляет видимость нижней границы.

Ответ 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).

Ответ 6

Текущий принятый ответ не работает. Он создает тонкие вертикальные границы с левой и правой сторон изображения в результате сглаживания.

Эта версия работает отлично. Он также позволяет вам устанавливать ширину границы независимо друг от друга, и вы также можете добавить границы слева и справа, если хотите. Единственным недостатком является то, что он НЕ поддерживает прозрачность.

Создайте xml drawable с именем /res/drawable/top_bottom_borders.xml с приведенным ниже кодом и назначьте его как свойство фона 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>

Протестировано на Android KitKat через Marshmallow

Ответ 7

Так же, как @Nic Hubbard сказал, есть очень простой способ добавить границу.

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

Вы можете изменить высоту и цвет фона на то, что вы хотите.

Ответ 8

Вы также можете обернуть представление в FrameLayout, а затем установить цвет фона фона и дополнение к тому, что вы хотите; Тем не менее, textview по умолчанию имеет "прозрачный" фон, поэтому вам также нужно будет изменить цвет фона textview.

Ответ 9

Мои ответы основаны на версии @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"

или объединить их в две или более границы:

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

Ответ 10

Почему бы просто не создать вид с разрешением 1 дп с цветом фона? Затем его можно легко разместить там, где вы хотите.

Ответ 11

Сначала создайте xml файл с содержимым, показанным ниже, и назовите его border.xml и поместите его внутри папки макета внутри каталога res

<?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.

Ответ 12

Просто добавьте мое решение в список.

Мне нужна полупрозрачная нижняя граница, которая проходит мимо исходной формы (Итак, полупрозрачная рамка была вне родительского прямоугольника).

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

Что дает мне;

Ответ 13

Чтобы изменить это:

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

Я предпочитаю этот подход в "drawable/top_bottom_border.xml":

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

Это только делает границы, а не прямоугольник, который будет отображаться, если ваш фон имеет цвет.

Ответ 14

Запишите ниже код

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

Ответ 15

InsetDrawable способ добавить границы для вставки границ, используя 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>

Ответ 16

Попробуйте обернуть изображение с помощью функции linearlayout и установите для него цвет фона границы, который вы хотите по тексту. Затем установите для прописной буквы текст в виде текста, который вы хотите использовать для своей границы.

Ответ 17

Вы также можете использовать 9-путь для выполнения своей работы. Создайте его так, чтобы цветной пиксель не умножался по высоте, а только прозрачный пиксель.

Ответ 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>

Ответ 19

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

Ответ 20

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

Ответ 21

Вот способ достичь этого.

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

Первый элемент для обводки и второй для сплошного фона. Скрытие левой и правой границ.

Ответ 22

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

Просто добавьте этот TextView под текстом, в который вы хотите добавить границу

Ответ 23

Просто для принудительного применения ответов @phreakhead и user1051892, <item android:bottom|android:left|android:right|android:top> если отрицательный, должен быть больше, чем <stroke android:width>. Если нет, то рисование элемента будет смешано с рисованием мазка, и вы можете подумать, что эти значения не работают.