¿Separador de dibujo de Android / línea divisoria en diseño?


684

Me gustaría dibujar una línea justo en el medio de un diseño y usarla como separador de otros elementos como TextView. ¿Hay un buen widget para esto? Realmente no quiero usar una imagen, ya que sería difícil hacer coincidir los otros componentes con ella. Y también quiero que esté relativamente posicionado. Gracias

Respuestas:


1686

Usualmente uso este código para agregar una línea horizontal:

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray"/>

Para agregar un separador vertical, cambie los valores layout_widthylayout_height


10
A mí también me funciona. También puede agregar Android: layout_marginTop = "2dp" (etc.) para agregar espacios en la parte superior e inferior.
Pinch

44
Esto es genial para una línea horizontal simple. Pero si desea que el color se desvanezca en los extremos, use uno de los otros métodos aquí.
Scott Biggs

9191
O incluso mejor, uselayout_height="2dp" and android:background="?android:attr/listDivider"
Dan Dar3

17
Debes usar px en lugar de dp para los divisores. A menos que realmente desee que el tamaño del divisor varíe y, potencialmente, caiga por debajo de 1/2 píxeles. :)
Austin Hanson

99
La especificación de diseño de material recomienda utilizar 1dp de espesor google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko

620

Para mejorar las respuestas proporcionadas por Alex Kucherenko y Dan Dar3

Agregué esto a mis estilos:

<style name="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item>
    <item name="android:background">?android:attr/listDivider</item>
</style>

Luego, en mis diseños hay menos código y es más fácil de leer.

<View style="@style/Divider"/>

40
¡Esto es genial y en mi humilde opinión la mejor solución! De esta manera, no tiene que configurar manualmente el color, por lo que la consistencia es más fácil cuando tiene más de un tema (uso Theme.Sherlock y Theme.Sherlock.Light).
Kopfgeldjaeger

2
+1: un excelente reemplazo para la solución <Image> de 9 líneas que utilicé hasta ahora. Muy ... elegante
AVIDeveloper

3
Esta parece ser la solución más limpia. ¡Gracias!
FrozenCow

2
Esto parece funcionar, pero en la vista previa de Android Studio con API 21 no se muestra ... No pude probar si esto es solo un problema de la vista previa o también en dispositivos reales ...
DominicM

3
Pensé que tampoco se mostraba en la vista previa de Android Studio, pero después de acercarme a la vista previa puedo distinguir la línea tenue que se muestra.
Nick Spacek

136

Agregue esto en su diseño donde desee el divisor (modifique los atributos para que se ajusten a sus necesidades):

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@android:drawable/divider_horizontal_dark"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="2dp"
    android:paddingTop="2dp" />

1
Gracias, trabajó para mi. Luciendo especialmente bien en DrawerLayout
Martin Vysny

44
@Ahmed No puede usar esto cuando tiene un fondo de actividad blanco, supongo, en ese caso use android: src = "@ android: drawable / divider_horizontal_bright" en su lugar.
romanos

96

Puedes usar esto en LinearLayout:

android:divider="?android:dividerHorizontal"
android:showDividers="middle"

Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="?android:dividerHorizontal"
    android:showDividers="middle"
    android:orientation="vertical" >            

        <TextView 
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:text="abcd gttff hthjj ssrt guj"/>

        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd"/>
        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd gttff hthjj ssrt guj"/>

        <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="abcd"/>

</LinearLayout>

44
Tenga en cuenta que esto solo está disponible desde el nivel de API 11
San

Lamentablemente, este método no resalta los divisores con colores llamativos.
El Android original

¡menos es mejor! Gracias
pablo.vix

60

La manera más fácil:

Divisor vertical:

<View style="@style/Divider.Vertical"/>

Vista divisoria vertical

Divisor horizontal:

<View style="@style/Divider.Horizontal"/>

Vista divisoria horizontal

Eso es todo si!

Solo pon esto en res>values>styles.xml

<style name="Divider">
    <item name="android:background">?android:attr/listDivider</item> //you can give your color here. that will change all divider color in your app.
</style>

<style name="Divider.Horizontal" parent="Divider">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">1dp</item> // You can change thickness here.

</style>

<style name="Divider.Vertical" parent="Divider">
    <item name="android:layout_width">1dp</item>
    <item name="android:layout_height">match_parent</item>
</style>

esto se superpone a todo con una vista.
ChumiestBucket

56
<TextView
    android:id="@+id/line"
    style="?android:attr/listSeparatorTextViewStyle"
    android:paddingTop="5dip"
    android:gravity="center_horizontal"
    android:layout_below="@+id/connect_help"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000" />

1
Defendería este método más que otros en la cuenta de que usa un estilo ya existente, pero podría no complacer a todos.
Solenoide

3
Sin embargo, el inconveniente de este enfoque es que el pobre Android NO garantiza el estilo existente.
Youngjae

46

usa este código. Ayudará

<LinearLayout
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:divider="?android:dividerHorizontal"
    android:gravity="center"
    android:orientation="vertical"
    android:showDividers="middle" >

20

Solo escribe esto:

 android:divider="?android:dividerHorizontal"
 android:showDividers="middle"

ejemplo completo:

<LinearLayout
        android:id="@+id/llTipInformation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvServiceRating"
        android:orientation="horizontal"
        android:divider="?android:dividerHorizontal"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:showDividers="middle">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tippercent"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/main.msg.tiptotal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/colorWhite"
            android:layout_marginTop="@dimen/activity_vertical_margin"/>

</LinearLayout>

1
Esta debería ser la respuesta aceptada, ya que es la forma más correcta de agregar un divisor a unLinearLayout
JaydeepW

Esto será para todos los elementos en el diseño, ¿actual?
Rami Alloush

20
<View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray" />

Entre dos diseños Pon este código para obtener Divider.


18

si usa actionBarSherlock, puede usar com.actionbarsherlock.internal.widget.IcsLinearLayout clase para admitir divisores y mostrarlos entre las vistas.

ejemplo de uso:

<com.actionbarsherlock.internal.widget.IcsLinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:divider="@drawable/divider"
    android:dividerPadding="10dp"
    android:orientation="vertical"
    android:showDividers="beginning|middle|end" >
... children...

res / drawable / divider.xml:

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

    <size android:height="2dip" />

    <solid android:color="#FFff0000" />

</shape>

tenga en cuenta que por alguna razón, la vista previa en el diseñador gráfico dice "android.graphics.bitmap_delegate.nativeRecycle (I) Z". No estoy seguro de lo que significa, pero se puede ignorar ya que funciona bien tanto en las versiones nuevas de Android como en las antiguas (probado en Android 4.2 y 2.3).

parece que el error solo se muestra cuando se usa API17 para el diseñador gráfico.


12

Agregar esta vista; que dibuja un separador entre sutextviews

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

12

Es muy simple. Simplemente cree una Vista con el color de fondo negro.

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

Esto creará una línea horizontal con color de fondo. También puede agregar otros atributos como márgenes, rellenos, etc., como cualquier otra vista.


11

Aquí está su respuesta ... este es un ejemplo para trazar una línea entre los controles ...

<TextView
            android:id="@+id/textView1"
            style="@style/behindMenuItemLabel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="1dp"
            android:text="FaceBook Feeds" />

         <View
             android:layout_width="fill_parent"
             android:layout_height="2dp"
             android:background="#d13033"/>

         <ListView
            android:id="@+id/list1"
            android:layout_width="350dp"
            android:layout_height="50dp" />

Este código dibuja la línea entre dos controles ...


10

Agrega un divisor horizontal a cualquier parte de su diseño.

    <TextView
       style="?android:listSeparatorTextViewStyle"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"/>

La línea va solo debajo de la vista de texto.
live-love

10

Puede usar este <View>elemento justo después de First TextView.

 <View
         android:layout_marginTop="@dimen/d10dp"
         android:id="@+id/view1"
         android:layout_width="fill_parent"
         android:layout_height="1dp"
         android:background="#c0c0c0"/>

8

Versión de tiempo de ejecución:

View dividerView = new View(getContext());
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
    ViewGroup.LayoutParams.FILL_PARENT, UIUtils.dpToPix(getContext(), 1));
dividerView.setLayoutParams(lp);

TypedArray array = getContext().getTheme()
    .obtainStyledAttributes(new int[] {android.R.attr.listDivider});
Drawable draw = array.getDrawable(0);       
array.recycle();

dividerView.setBackgroundDrawable(draw);
mParentLayout.addView(dividerView);

7

usa este código xml para agregar una línea vertical

 <View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:background="#000000" />

usa este código xml para agregar una línea horizontal

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

6
//for vertical line:

<View
   android:layout_width="1dp"
   android:layout_height="fill_parent"
   android:background="#00000000" />




//for horizontal line: 

<View
   android:layout_width="fill_parent"
   android:layout_height="1dp"
   android:background="#00000000" />
//it works like a charm

6

En los casos en que se usa una android:layout_weightpropiedad para asignar espacio de pantalla disponible para componentes de diseño, por ejemplo

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

     /* And we want to add a verical separator here */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
     </LinearLayout>

</LinearLayout>

Para agregar un separador entre los dos diseños existentes que ya ha ocupado todo el espacio de la pantalla, no podemos simplemente agregar otro LinearLayout con android:weight:"1"porque creará tres columnas de igual ancho que no queremos. En cambio, disminuiremos la cantidad de espacio que le daremos a este nuevo diseño. El código final se vería así:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

                    /* *************** ********************** */

    /* Add another LinearLayout with android:layout_weight="0.01" and 
       android:background="#your_choice" */
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.01"
        android:background="@android:color/darker_gray"
     />

    /* Or View can be used */
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
     />

                     /* *************** ********************** */

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        android:orientation="vertical">
        ...
        ...
    </LinearLayout>

</LinearLayout>

ingrese la descripción de la imagen aquí


5

Si vas a usarlo mucho, lo mejor que puedes hacer es

styles.xml:

<style name="Seperator">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">@color/light_color</item>
    </style>

ahora en su diseño, simplemente agréguelo como:

<View style="@style/Seperator" />

4
<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="2dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="2dp"
    android:scaleType="fitXY"
    android:src="?android:attr/listDivider" />

sin usar android: src = "? android: attr / listDivider" .... simplemente agregue android: background = "# FFFFFF"
bebosh

4

Agregue una línea negra horizontal usando esto:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000"
    android:layout_marginTop="10dp"/>

3

Para completar la respuesta de Camille Sévigny, también puede definir su propia forma de línea, por ejemplo, para personalizar el color de la línea.

Defina una forma xml en el directorio dibujable. line_horizontal.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:shape="line">
    <stroke android:width="2dp" android:color="@android:color/holo_blue_dark" />
    <size android:width="5dp" />
</shape>

Use esta línea en su diseño con los atributos deseados:

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="2dp"
        android:src="@drawable/line_horizontal" />

3

Usualmente uso este código:

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="10dp"
    android:background="#aa000000" />

si tiene un objeto en su diseño y desea establecer una línea debajo que use este atributo en ImageView:

android:layout_below="@+id/textBox1"

3

Esto te ayudaría a resolver este problema. Aquí se crea una pequeña vista para hacer una línea negra como separador entre dos vistas.

 <View
        android:layout_width="3dp"
        android:layout_height="wrap_content"
        android:background="@android:color/black"
         />

2
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item
    android:bottom="0dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@color/divider" />
    </shape>
</item>


2

Aquí está el código "una línea divisoria horizontal entre dos vistas de texto". Prueba esto

    <TextView
        android:id="@id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="5dp"
        android:inputType="textPersonName"
        android:text:"address" />


    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/black"/>


    <TextView
        android:id="@id/textView7"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName" 
        android:text:"Upload File" />/>

1

Divide el espacio en dos partes iguales:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="?android:dividerHorizontal"
        android:showDividers="end"></LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></LinearLayout>

</LinearLayout>

Observe que una parte contiene un divisor al final


1

Solución simple

simplemente agregue este código en su diseño y reemplace 'Id_of__view_present_above' al id de la vista, debajo de la cual necesita el divisor.

<TextView
  android:layout_width="match_parent"
  android:layout_height="1dp"
  android:background="#c0c0c0"
  android:id="@+id/your_id"
  android:layout_marginTop="16dp" 
  android:layout_below="@+id/Id_of__view_present_above"
/>

3
stackoverflow.com/help/how-to-answer Busque->Brevity is acceptable, but fuller explanations are better.
Andy K

0

Por ejemplo, si usó recyclerView para sus artículos:

en build.gradle escribir:

dependencies {
    compile 'com.yqritc:recyclerview-flexibledivider:1.4.0'

Si desea establecer valores de color, tamaño y margen, puede especificar lo siguiente:

RecyclerView recyclerView = (RecyclerView) 
findViewById(R.id.recyclerview);
recyclerView.addItemDecoration(
        new HorizontalDividerItemDecoration.Builder(this)
                .color(Color.RED)
                .sizeResId(R.dimen.divider)
                .marginResId(R.dimen.leftmargin, R.dimen.rightmargin)
                .build());
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.