Linha de separador / divisor de desenho do Android no layout?


684

Gostaria de desenhar uma linha bem no meio de um layout e usá-la como um separador de outros itens como o TextView. Existe um bom widget para isso. Eu realmente não quero usar uma imagem, pois seria difícil combinar os outros componentes a ela. E eu quero que ele seja relativamente posicionado também. obrigado

Respostas:


1684

Eu costumo usar esse código para adicionar linha horizontal:

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

Para adicionar separador vertical, alterne os valores layout_widthelayout_height


10
Funciona para mim também. Também é possível adicionar o android: layout_marginTop = "2dp" (etc) para adicionar espaços na parte superior e inferior.
Aperte

4
Isso é ótimo para uma linha horizontal simples. Mas se você quiser que a cor desbote nas extremidades, use um dos outros métodos aqui.
Scott Biggs

91
Ou, melhor ainda, use #layout_height="2dp" and android:background="?android:attr/listDivider"
D Dar3

17
Você deve usar px em vez de dp para divisores. A menos que você queira que o tamanho do divisor varie e, potencialmente, fique abaixo de 1/2 pixel. :)
Austin Hanson

9
Especificação de design de material recomenda o uso 1DP grossas google.com/design/spec/components/dividers.html#dividers-specs
Alex Kucherenko

620

Para melhorar as respostas fornecidas por Alex Kucherenko e Dan Dar3

Adicionei isso aos meus 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>

Então, em meus layouts, é menos código e mais simples de ler.

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

40
Isso é ótimo e IMHO a melhor solução! Dessa forma, você não precisa definir manualmente a cor, para que a consistência seja mais fácil quando você tiver mais de um tema (eu uso Theme.Sherlock e Theme.Sherlock.Light).
Kopfgeldjaeger

2
+1 - Um ótimo substituto para a solução <Image> de 9 linhas que usei até agora. Muito ... elegante
AVIDeveloper 4/13/13

3
Esta parece ser a solução mais limpa. Obrigado!
FrozenCow 31/01

2
Isso parece funcionar, mas na visualização Android Estúdio com API 21 não é mostrado ... eu não poderia testar se este é apenas um problema de visualização ou também em dispositivos reais ...
DominicM

3
Eu pensei que não estava sendo mostrado na visualização do Android Studio também, mas depois de ampliar a visualização, posso distinguir a linha fraca que é exibida.
Nick Spacek

136

Adicione isso ao seu layout onde deseja o divisor (modifique os atributos para atender às suas necessidades):

<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
Obrigado, trabalhou para mim. Parecendo especialmente agradável em DrawerLayout
Martin Vysny

4
@ Ahmed Você não pode usar isso quando tiver um fundo branco de atividade, suponho que, nesse caso, use android: src = "@ android: drawable / divider_horizontal_bright".
romanos

96

Você pode usar isso em LinearLayout:

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

Por exemplo:

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

4
Observe que isso está disponível apenas no nível 11 da API
San

Infelizmente, esse método não destaca os divisores com cores fortes.
O Android original

menos é melhor! Thanx
pablo.vix

60

Caminho mais fácil:

Divisor vertical:

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

Vista do divisor vertical

Divisor horizontal:

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

Vista do divisor horizontal

Isso é tudo sim!

Basta colocar isso em 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>

isso sobrepõe a coisa toda a uma View.
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
Eu defenderia esse método mais do que outros por conta de que ele usa um estilo já existente, mas pode não agradar a todos.
Solenóide

3
A desvantagem dessa abordagem é, no entanto, o Android pobre NÃO garante o estilo existente.
Youngjae 30/07/2013

46

use este código. Vai ajudar

<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

Basta escrever isto:

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

exemplo 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 deve ser a resposta aceite, pois é a maneira mais correta de adicionar um divisor a umLinearLayout
JaydeepW

Isso será para todos os elementos no layout, correto?
Rami Alloush

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

Entre dois layouts Coloque esse código para obter o Divider.


18

se você usar actionBarSherlock, poderá usar a classe com.actionbarsherlock.internal.widget.IcsLinearLayout para suportar divisores e mostrá-los entre as visualizações.

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

observe que, por algum motivo, a visualização no designer gráfico diz "android.graphics.bitmap_delegate.nativeRecycle (I) Z". Não tenho certeza do que isso significa, mas pode ser ignorado, pois funciona bem nas versões novas do Android e antigas (testadas no Android 4.2 e 2.3).

parece que o erro é mostrado apenas ao usar a API17 para o designer gráfico.


12

Adicionando esta visualização; que desenha um separador entre o seutextviews

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

12

É muito simples. Basta criar uma View com a cor de fundo preto.

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

Isso criará uma linha horizontal com a cor de fundo. Você também pode adicionar outros atributos, como margens, preenchimentos, etc., como qualquer outra visualização.


11

Aqui está sua resposta ... este é um exemplo para traçar uma linha entre os 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 desenha uma linha entre dois controles ...


10

Ele adiciona um divisor horizontal a qualquer lugar do seu layout.

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

A linha vai apenas sob o Textview.
live-love

10

Você pode usar esse <View>elemento logo após o Primeiro TextView.

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

8

Versão de tempo de execução:

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

use este código xml para adicionar linha vertical

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

use este código xml para adicionar linha 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

Nos casos em que alguém está usando a android:layout_weightpropriedade para atribuir espaço de tela disponível aos componentes do layout, por exemplo

<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 adicionar um separador entre os dois layouts existentes que ocupam todo o espaço da tela, não podemos apenas adicionar outro LinearLayout android:weight:"1"porque isso criará três colunas de largura igual que não queremos. Em vez disso, diminuiremos a quantidade de espaço que disponibilizaremos para esse novo layout. O código final ficaria assim:

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

insira a descrição da imagem aqui


5

Se você vai usá-lo muito, a melhor coisa a fazer é

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>

agora no seu layout, adicione-o 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" />

sem usar o android: src = "? android: attr / listDivider" .... basta adicionar android: background = "# FFFFFF" #
1016 bebosh

4

Adicione uma linha preta horizontal usando este:

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

3

Para concluir a resposta Camille Sévigny, você pode definir adicionalmente sua própria forma de linha, por exemplo, para personalizar a cor da linha.

Defina uma forma xml no diretório drawable. 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 linha no seu layout com os atributos desejados:

    <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

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

se você tiver um objeto em seu layout e desejar definir a linha abaixo que use esse atributo no ImageView:

android:layout_below="@+id/textBox1"

3

Isso ajudaria você a resolver esse problema. Aqui, é criada uma pequena vista para criar uma linha preta como um separador entre duas 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

Aqui está o código "uma linha divisória horizontal entre duas exibições de texto". Tente isto

    <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

Divida o espaço em duas partes iguais:

<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 uma parte contém um divisor no final


1

Solução simples

basta adicionar esse código no seu layout e substituir 'Id_of__view_present_above' pelo ID da visualização, abaixo do qual você precisa do 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 Procure-> #Brevity is acceptable, but fuller explanations are better.
Andy K

0

Por exemplo, se você usou o recyclerView para seus itens:

na gravação build.gradle:

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

Se você deseja definir valores de cor, tamanho e margem, pode especificar como segue:

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());
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.