¿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

Androider
fuente

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

Alex Kucherenko
fuente
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"/>
toddles_fp
fuente
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" />
Camille Sévigny
fuente
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>
usuario2240225
fuente
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>
Khemraj
fuente
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" />
pprados
fuente
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" >
Deepak Goel
fuente
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>
Farid Ahmed
fuente
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.

SHASHWAT DOSHI
fuente
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.

desarrollador de Android
fuente
12

Agregar esta vista; que dibuja un separador entre sutextviews

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#000000" />
elfekz
fuente
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.

Wijay Sharma
fuente
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 ...

Archan Desai
fuente
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"/>
Kamel
fuente
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"/>
Yogesh Sarvaiya
fuente
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);
alcsan
fuente
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" />
Maksudul Hasan Raju
fuente
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
desarrollador de sueños
fuente
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í

Ciclotrón3x3
fuente
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" />
Irshu
fuente
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" />
código511788465541441
fuente
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"/>
Jyoti Sharma
fuente
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" />
LG
fuente
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"
Hossein
fuente
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"
         />
Mayank Garg
fuente
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>

FAHAD HAMMAD ALOTAIBI
fuente
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" />/>
Sunil
fuente
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

Dan Alboteanu
fuente
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"
/>
shreedhar bhat
fuente
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());
Morozov
fuente