poner - ¿Hay una manera fácil de agregar un borde a la parte superior e inferior de una vista de Android?

poner borde a un layout android

Question

Tengo un TextView y me gustaría agregar un borde negro a lo largo de sus bordes superior e inferior. Intenté agregar android:drawableTop y android:drawableBottom drawableBottom a TextView, pero eso solo hizo que toda la vista se volviera negra.

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

¿Hay una manera de agregar fácilmente un borde superior e inferior a una vista (en particular, un TextView) en Android?

Answer 1

Opción 1: Forma Dibujable

Esta es la opción más sencilla si desea un borde alrededor de un diseño o vista en el que puede establecer el fondo. Cree un archivo XML en la carpeta drawable que se parece a esto:

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

Puede eliminar el solid si no desea un relleno. El background="@drawable/your_shape_drawable" establecido background="@drawable/your_shape_drawable" en su diseño / vista.

Opción 2: Vista de fondo

Aquí hay un pequeño truco que he usado en un RelativeLayout . Básicamente, tiene un cuadrado negro debajo de la vista a la que desea asignar un borde, y luego le da a esa vista un poco de relleno (¡no margen!) Para que el cuadrado negro se vea en los bordes.

Obviamente, esto solo funciona correctamente si la vista no tiene áreas transparentes. Si lo hace, te recomendaría que escribieras un BorderView personalizado que solo dibuje el borde, solo debe ser una docena de líneas de código.

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

Si te estás preguntando, funciona con adjustViewBounds=true . Sin embargo, no funciona si desea tener un fondo en un RelativeLayout completo, porque hay un error que le impide llenar un RelativeLayout con una View . En ese caso recomendaría la Shape dibujable.

Opción 3: 9 parches

Una opción final es usar un dibujo de 9 parches como este:

Puede usarlo en cualquier vista donde pueda configurar android:background="@drawable/..." . Y sí, tiene que ser 6x6. Intenté 5x5 y no funcionó.

La desventaja de este método es que no puede cambiar los colores con mucha facilidad, pero si desea bordes elegantes (por ejemplo, solo un borde en la parte superior e inferior, como en esta pregunta), es posible que no pueda hacerlo con la Shape Dibujable, que no es muy potente.

Opción 4: Vistas extra

Olvidé mencionar esta opción realmente simple si solo desea bordes arriba y debajo de su vista. Puede colocar su vista en un LinearLayout vertical (si no lo está ya) y luego agregar las View vacías arriba y debajo de esta manera:

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

Answer 2

¿Por qué no crear una vista alta de 1dp con un color de fondo? Entonces se puede colocar fácilmente donde quieras.

Answer 3

Al igual que @Nic Hubbard dijo, hay una manera muy fácil de agregar una línea de borde.

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

Puedes cambiar la altura y el color de fondo a lo que quieras.

Answer 4

Aquí hay una manera de lograrlo.

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

Primer artículo para trazo y segundo para fondo sólido. Ocultando los bordes izquierdo y derecho.

Answer 5

Así que quería hacer algo ligeramente diferente: un borde en la parte inferior SOLAMENTE, para simular un divisor de ListView. Modifiqué la respuesta de Piet Delport y obtuve esto:

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

Tenga en cuenta que debe utilizar px en lugar de dp para obtener exactamente un divisor de píxeles (algunos DPI del teléfono harán desaparecer una línea de 1dp).

Answer 6

En Android 2.2 se podría hacer lo siguiente.

Cree un dibujable xml como /res/drawable/textlines.xml y asígnele una propiedad de fondo de 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>

La desventaja de esto es que tiene que especificar un color de fondo opaco, ya que las transparencias no funcionarán. (Al menos pensé que lo hicieron pero me equivoqué). En el ejemplo anterior, puede ver que el color sólido de la primera forma #FFdddddd se copia en el color del trazo de la segunda forma.

Answer 7

Escriba abajo el código

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

He utilizado un truco para que el borde se muestre fuera del contenedor. Con este truco solo se dibuja una línea para que se muestre el fondo de la vista subyacente.

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

Intente envolver la imagen con una distribución lineal y establezca el fondo del color de borde que desee alrededor del texto. Luego, establezca el relleno en la vista de texto para que tenga el grosor que desea para su borde.

Answer 10

La forma más sencilla de agregar bordes para insertar bordes utilizando InsetDrawable , a continuación solo se agregará el borde superior:

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

La respuesta actualmente aceptada no funciona. Crea bordes delgados verticales en los lados izquierdo y derecho de la vista como resultado del anti-aliasing.

Esta versión funciona perfectamente. También le permite establecer los anchos de los bordes de forma independiente, y también puede agregar bordes en los lados izquierdo / derecho si lo desea. El único inconveniente es que NO admite la transparencia.

Cree un /res/drawable/top_bottom_borders.xml xml denominado /res/drawable/top_bottom_borders.xml con el siguiente código y asígnelo como propiedad de fondo de 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>

Probado en Android KitKat a través de Marshmallow

Answer 12

Mis respuestas se basan en la versión @Emile, pero uso colores transparentes en lugar de sólidos.
Este ejemplo dibujará un borde inferior de 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 es el color del fondo en el que dibuja su vista con borde.

Si desea cambiar la posición del borde, cambie el desplazamiento con uno de:

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

o combínalos para tener 2 o más bordes:

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

Answer 13

Para agregar un borde blanco de 1dp solo en la parte inferior y tener un fondo transparente, puede usar lo siguiente, que es más sencillo que la mayoría de las respuestas aquí.

Para el TextView u otra vista agregue:

android:background="@drawable/borderbottom"

Y en el directorio de borderbottom.xml agregue el siguiente XML, llamado 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>

Si quieres un borde en la parte superior, cambia el android:top="-2dp" a android:bottom="-2dp"

El color no necesita ser blanco y el fondo tampoco necesita ser transparente.

El elemento solid puede no ser requerido. Esto dependerá de su diseño (gracias V. Kalyuzhnyu).

Básicamente, este XML creará un borde usando la forma del rectángulo, pero luego empuja los lados superior, derecho e izquierdo más allá del área de procesamiento de la forma. Esto deja solo el borde inferior visible.

Answer 14

Para cambiar esto:

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

Prefiero este enfoque en "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>

Esto solo hace los bordes, no un rectángulo que aparecerá si su fondo tiene un color.

Answer 15

Primero haga un archivo xml con el contenido que se muestra a continuación, asígnele el nombre border.xml y colóquelo dentro de la carpeta de diseño dentro del directorio 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>

Después de eso dentro del código de uso.

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

Esto hará una línea negra en la parte superior e inferior de TextView.

Answer 16

Solo para agregar mi solución a la lista ..

Quería un borde inferior semitransparente que se extienda más allá de la forma original (por lo que el borde semitransparente estaba fuera del rectángulo principal).

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

Lo que me da;

Answer 17

Solo para imponer las respuestas de @phreakhead ´s y user1051892 , <item android:bottom|android:left|android:right|android:top> si es negativo, debe ser mayor que <stroke android:width> . Si no, la pintura del elemento se mezclará con la pintura de trazo y puede que piense que estos valores no funcionan.

Answer 18

También puede ajustar la vista en un FrameLayout, luego configurar el color de fondo del marco y el relleno a lo que desee; Sin embargo, la vista de texto, de forma predeterminada, tiene un fondo "transparente", por lo que también tendrá que cambiar el color de fondo de la vista de texto.

Answer 19

También puedes usar un 9-path para hacer tu trabajo. Créelo de manera que el píxel de color no se multiplique en altura, sino solo el píxel transparente.

Answer 20

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

Simplemente agregue este TextView debajo del texto donde desea agregar el borde

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

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