example - Espaciado entre los elementos de listView Android

listview desplegable android studio

Question

Intenté usar marginBottom en listView para hacer espacio entre los elementos de listView, pero aún así los elementos se adjuntan.

¿Es incluso posible? Si es así, ¿hay una manera específica de hacerlo?

Mi codigo esta abajo

<LinearLayout
android:id="@+id/alarm_occurences"
android:layout_width="fill_parent" 
android:orientation="vertical"
android:layout_height="fill_parent"
android:background="#EEEEFF"
xmlns:android="http://schemas.android.com/apk/res/android">

<ListView
android:id="@+id/occurences"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>

Mi elemento de lista personalizado:

<com.android.alarm.listItems.AlarmListItem
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:background="@drawable/alarm_item_background"
android:layout_marginBottom="10dp"    
>
<CheckedTextView     
    android:id="@android:id/text1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/listChoiceIndicatorMultiple"
    android:textSize="20sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:padding="10dp"

/>

</com.android.alarm.listItems.AlarmListItem>

¿Cómo puedo hacer espacio entre los elementos de la lista en este caso?

Answer 1

@Asahi casi golpeó el clavo en la cabeza, pero solo quería agregar un poco de XML para cualquier persona que esté flotando aquí más tarde a través de google:

<ListView android:id="@+id/MyListView"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:divider="@android:color/transparent"
  android:dividerHeight="10.0sp"/>

Por alguna razón, los valores como "10", "10.0" y "10sp" son rechazados por Android para el valor de dividerHeight . Quiere un número de punto flotante y una unidad, como "10.0sp". Como observa @Goofyahead, también puede usar píxeles independientes de la pantalla para este valor (es decir, "10dp").

Answer 2

Además, una forma más de aumentar el espaciado entre los elementos de la lista es agregar una vista vacía al código del adaptador al proporcionar el atributo layout_height con el espaciado que necesita. Por ejemplo, para aumentar el espacio inferior entre los elementos de la lista, agregue esta vista ficticia (vista vacía) al final de los elementos de la lista.

<View
    android:layout_width="match_parent"
    android:layout_height="15dp"/>

Por lo tanto, esto proporcionará un espacio inferior de 15 dp entre los elementos de vista de lista. Puede agregar esto directamente si el diseño principal es LinearLayout y la orientación es vertical o si se siguen los pasos apropiados para otro diseño. Espero que esto ayude :-)

Answer 3

Aunque la solución de Nik Reiman SÍ funciona, no me pareció una solución óptima para lo que quería hacer. El uso del divisor para establecer los márgenes tuvo el problema de que el divisor ya no estará visible, por lo que no puede usarlo para mostrar un límite claro entre sus elementos. Además, no agrega más "área en la que se puede hacer clic" a cada elemento, por lo tanto, si desea hacer que sus elementos se puedan hacer clic y sus elementos sean delgados, será muy difícil para cualquiera hacer clic en un elemento, ya que la altura agregada por el divisor no es parte de un artículo.

Afortunadamente, encontré una mejor solución que le permite mostrar divisores y le permite ajustar la altura de cada elemento sin márgenes, sino rellenos. Aquí hay un ejemplo:

Vista de la lista

<ListView
android:id="@+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

ListItem

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="10dp"
    android:paddingTop="10dp" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Item"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Answer 4

Debería envolver su elemento de ListView (por ejemplo, your_listview_item ) en algún otro diseño, por ejemplo, LinearLayout y agregar un margen a your_listview_item :

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <your_listview_item
        android:id="@+id/list_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
    ...
    ...
    />
</LinearLayout>

De esta manera también puede agregar espacio, si es necesario, a la derecha e izquierda del elemento ListView .

Answer 5

En lugar de dar margen, debe dar relleno:

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:divider="@android:color/green"
    android:dividerHeight="4dp"
    android:layout_alignParentTop="true"
    android:padding="5dp" >

</ListView>

O

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:paddingTop="2dp"
    android:divider="@android:color/green"
    android:dividerHeight="4dp"
    android:paddingLeft="1dp"
    android:paddingRight="1dp"
    android:paddingBottom="2dp"
    android:paddingStart="0dp"
    android:paddingEnd="0dp" >

</ListView>

Answer 6

Encontré una solución no tan buena para esto en caso de que esté utilizando un HorizontalListView, ya que los divisores no parecen funcionar con él, pero creo que funcionará de cualquier manera para el ListView más común.

Sólo añadiendo:

<View
android:layout_marginBottom="xx dp/sp"/>

en la Vista inferior del Diseño que infla en la clase de adaptador creará espacio entre los elementos

Answer 7

La solución más simple con el código existente de OP (los elementos de la lista que ya tienen relleno) es agregar el siguiente código:

listView.setDivider(new ColorDrawable(Color.TRANSPARENT));  //hide the divider
listView.setClipToPadding(false);   // list items won''t clip, so padding stays

This respuesta tan me ayudó.

Nota: Es posible que enfrente un error del reciclaje del elemento de la lista demasiado pronto en plataformas más antiguas, como se ha solicitado here .

Answer 8

Me doy cuenta de que ya se seleccionó una respuesta, pero solo quería compartir lo que me funcionó cuando me topé con este problema.

Tenía un listView donde cada entrada en el listView estaba definida por su propio diseño, similar a lo que Sammy publicó en su pregunta. Intenté el enfoque sugerido de cambiar la altura del divisor, pero eso no terminó viéndome muy bonito, incluso con un divisor invisible. Después de algunos experimentos, simplemente agregué un android:paddingBottom="5dip" al último elemento de diseño de TextView en el archivo XML que define las entradas individuales de listView.

Esto terminó dándome exactamente lo que estaba tratando de lograr a través del uso de android:layout_marginBottom . Encontré esta solución para producir un resultado estéticamente más agradable que intentar aumentar la altura del divisor.

Answer 9

Mi solución para agregar más espacio pero mantener la línea horizontal fue agregar divider.xml en la carpeta res/drawable y definir la forma de la línea en el interior:

divider.xml

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

    <stroke
        android:width="1px"
        android:color="@color/nice_blue" />

</shape>

luego en mi lista me refiero a mi divisor de la siguiente manera:

<ListView
    android:id="@+id/listViewScheduledReminders"
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_marginBottom="@dimen/mediumMargin"
    android:layout_weight="1"
    android:divider="@drawable/divider"
    android:dividerHeight="16.0dp"
    android:padding="@dimen/smallMargin" >

</ListView>

note el android:dividerHeight="16.0dp" al aumentar y disminuir esta altura. Básicamente, estoy agregando más relleno en la parte superior e inferior de la línea divisoria.

Utilicé esta página para referencia: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element

Answer 10

Muchas de estas soluciones funcionan. Sin embargo, si todo lo que desea es poder establecer el margen entre los elementos, el método más simple que he encontrado es envolver su elemento, en su caso el CheckedTextView, en un LinearLayout y poner el formato de margen para el elemento en ese, no el diseño de la raíz. Asegúrese de asignar un identificador a este diseño de ajuste y crearlo junto con su CheckedTextView en su adaptador.

Eso es. En efecto, está creando una instancia del margen en el nivel de elemento para el ListView. Debido a que ListView no conoce ningún diseño de elementos, solo su adaptador lo sabe. Básicamente, esto infla la parte del diseño del elemento que se estaba ignorando antes.

Answer 11

Para dar espacio entre las vistas dentro de una vista de lista, use el relleno en sus vistas infladas.

Puedes usar android:paddingBottom="(number)dp" && android:paddingTop="(number)dp" en tu vista o en las vistas que estés inflado dentro de tu vista de lista.

La solución de división es solo una solución, porque algún día, cuando quiera usar un color de división (en este momento es transparente) verá que la línea de división se ha estirado.

Answer 12

Para mi aplicación, he hecho esto.

 <ListView
    android:id="@+id/staff_jobassigned_listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@null"
    android:dividerHeight="10dp">

</ListView>

y este es el resultado

solo android: divider = "@ null" y proporcionar altura al divisor hizo por mí.

Answer 13

Puedes usar:

android:divider="@null"
android:dividerHeight="3dp"

ejemplo:

<ListView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView" android:layout_gravity="center_horizontal"
        android:dividerHeight="3dp"
        android:divider="@null" android:clickable="false"/>

Answer 14

Quizás la propiedad divider o dividerHeight de ListView pueda resolver su problema.

Answer 15

Si desea mostrar un divisor con márgenes y sin estirarlo, use InsetDrawable (el tamaño debe estar en un formato, del cual dijo @Nik Reiman):

Vista de la lista:

<ListView
    android:id="@+id/listView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:cacheColorHint="#00000000"
    android:divider="@drawable/separator_line"
    android:dividerHeight="10.0px"/>

@ drawable / separator_line:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="5.0px"
    android:insetRight="5.0px"
    android:insetTop="8.0px"
    android:insetBottom="8.0px">

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <gradient
            android:startColor="@color/colorStart"
            android:centerColor="@color/colorCenter"
            android:endColor="@color/colorEnd"
            android:type="linear"
            android:angle="0">
        </gradient>
    </shape>
</inset>

Answer 16

solo necesita hacer el fondo transparente del divisor de la lista y hacer la altura de acuerdo con el espacio necesario.

<ListView 
         android:id="@+id/custom_list"
         android:layout_height="match_parent"
         android:layout_width="match_parent"
         android:divider="#00ffffff"
         android:dividerHeight="20dp"/>

Answer 17

<ListView
    android:clipToPadding="false"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:dividerHeight="10dp"
    android:divider="@null"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</ListView>

y establece paddingTop , paddingBottom y dividerHeight en el mismo valor para obtener un espaciado igual entre todos los elementos y el espacio en la parte superior e inferior de la lista.

Configuré clipToPadding en false para permitir que las vistas se clipToPadding en esta área rellenada.

Configuré el divider en @null para eliminar las líneas entre los elementos de la lista.