Existe uma maneira fácil de adicionar uma borda à parte superior e inferior de uma vista do Android?

Question

Eu tenho uma visão de texto e gostaria de adicionar uma borda preta ao longo de suas bordas superior e inferior. Eu tentei adicionar android:drawableTop e android:drawableBottom Para a visão de texto, mas isso apenas fez com que toda a visão se tornasse 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" />

Existe uma maneira de adicionar facilmente uma borda superior e inferior a uma visão (em particular, uma visão de texto) no Android?

Answer 1

No Android 2.2, você pode fazer o seguinte.

Crie um XML Drawable, como /res/drawable/textLines.xml e atribua isso como uma propriedade de plano de fundo de um 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>

O lado negativo é que você precisa especificar uma cor de fundo opaca, pois as transparências não funcionam. (Pelo menos eu pensei que sim, mas estava enganado). No exemplo acima, você pode ver que a cor sólida da primeira forma #ffdddddd é copiada na cor da 2ª formas.

Answer 2

Eu usei um truque para que a borda seja exibida fora do recipiente. Com esse truque, apenas uma linha é desenhada, para que o fundo seja mostrado da visão subjacente.

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

Opção 1: Forma desenhada

Esta é a opção mais simples se você deseja uma borda em torno de um layout ou visão na qual você pode definir o plano de fundo. Criar um arquivo XML no drawable Pasta que se parece com o seguinte:

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

Você pode remover o solid Se você não quer um preenchimento. O conjunto background="@drawable/your_shape_drawable" em seu layout/visualização.

Opção 2: Vista em segundo plano

Aqui está um pequeno truque que usei em um RelativeLayout. Basicamente, você tem um quadrado preto sob a vista que deseja dar uma borda e, em seguida, dê a essa visão um pouco de preenchimento (não margem!) Para que o quadrado preto apareça nas bordas.

Obviamente, isso só funciona corretamente se a visualização não tiver áreas transparentes. Se isso acontecer, eu recomendaria que você escrevesse um costume BorderView que apenas desenha a borda - deve ser apenas algumas dezenas de linhas 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/..." />

Se você está se perguntando, isso faz trabalhar com adjustViewBounds=true. No entanto, não funciona se você quiser ter um fundo em um inteiro RelativeLayout, porque há um bug que o impede de encher um RelativeLayout com um View. Nesse caso, eu recomendaria o Shape desenhavel.

Opção 3: 9 Patch

Uma opção final é usar um desenho de 9 patch como este:

Você pode usá -lo em qualquer visualização onde você possa definir android:background="@drawable/...". E sim, ele precisa ser 6x6 - tentei 5x5 e não funcionou.

A desvantagem desse método é que você não pode alterar as cores com muita facilidade, mas se você quer fronteiras sofisticadas (por exemplo, apenas uma borda na parte superior e inferior, como nesta pergunta), talvez não seja capaz de fazê -las com o Shape Drawable, o que não é muito poderoso.

Opção 4: visualizações extras

Esqueci de mencionar essa opção realmente simples se você quiser apenas bordas acima e abaixo da sua visão. Você pode colocar sua visão em uma vertical LinearLayout (se ainda não estiver) e adicione vazio Viewestá acima e abaixo assim:

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

Answer 4

Para adicionar um 1dp Borda branca apenas na parte inferior e, para ter um plano de fundo transparente, você pode usar o seguinte, o que é mais simples do que a maioria das respostas aqui.

Para o TextView ou outra visualização Adicionar:

android:background="@drawable/borderbottom"

E no drawable Diretório Adicione o seguinte XML, chamado 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>

Se você quer uma fronteira no topo, mude o android:top="-2dp" para android:bottom="-2dp"

A cor não precisa ser branca e o fundo também não precisa ser transparente.

o solid o elemento pode não ser necessário. Isso dependerá do seu design (obrigado V. Kalyuzhnyu).

Basicamente, esse XML criará uma borda usando a forma do retângulo, mas depois empurra os lados superior, direita e esquerda além da área de renderização para a forma. Isso deixa apenas a borda inferior visível.

Answer 5

Então, eu queria fazer algo um pouco diferente: uma borda apenas na parte inferior, para simular um divisor da ListView. Modifiquei a resposta de Piet DeLport e entendi:

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

Nota O uso do PX em vez de DP para obter exatamente um divisor de 1 pixel (alguns DPIs de telefone farão uma linha de 1dp desaparecer).

Answer 6

A resposta atualmente aceita não funciona. Ele cria bordas verticais finas nos lados esquerdo e direito da vista como resultado do anti-aliasing.

Esta versão funciona perfeitamente. Ele também permite que você defina as larguras da borda de forma independente e também pode adicionar fronteiras nos lados esquerdo / direito, se quiser. A única desvantagem é que ele não suporta transparência.

Crie um XML desenhado nomeado /res/drawable/top_bottom_borders.xml com o código abaixo e atribua -o como a propriedade de segundo plano de uma visualização de texto.

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

Testado no Android Kitkat através do Marshmallow

Answer 7

Assim como o @nic hubbard disse, existe uma maneira muito fácil de adicionar uma linha de fronteira.

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

Você pode alterar a altura e a cor de fundo para o que quiser.

Answer 8

Você também pode envolver a vista em um Framelayout e definir a cor e o preenchimento do quadro para o que deseja; No entanto, o TextView, por padrão, possui um plano de fundo 'transparente', então você também precisará alterar a cor do fundo do TextView.

Answer 9

Minhas respostas são baseadas na versão @emile, mas eu uso cores transparentes em vez de sólido.
Este exemplo desenhará uma borda inferior 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 é a cor do fundo sobre o que você desenha sua visão com a borda.

Se você quiser mudar a posição da borda, mude o deslocamento com um de:

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

ou combine -os para ter 2 ou mais fronteiras:

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

Answer 10

Por que não criar uma visão alta de 1dp com uma cor de fundo? Em seguida, pode ser facilmente colocado onde você quiser.

Answer 11

Apenas para adicionar minha solução à lista ..

Eu queria uma borda inferior semi-transparente que se estenda além da forma original (então a borda semi-transparente era fora o retângulo pai).

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

O que me dá;

Answer 12

Primeiro, faça um arquivo XML com o conteúdo mostrado abaixo e nomeie -o borda.xml e coloque -o dentro da pasta de layout dentro do diretório res Directory

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

Depois disso dentro do código de código

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

Isso fará com que uma linha preta na parte superior e inferior do TextView.

Answer 13

Para mudar isso:

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

Eu prefiro essa abordagem em "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>

Isso apenas faz com que as fronteiras, não um retângulo que apareçam se seu plano de fundo tiver uma cor.

Answer 14

Escreva o código abaixo

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

Maneira mais simples de adicionar fronteiras para inserir as fronteiras usando InsetDrawable, a seguir mostrará apenas a borda 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 16

Tente envolver a imagem com um linearlayout e defina seu plano de fundo para a cor da borda que você deseja em torno do texto. Em seguida, defina o preenchimento no TextView como a espessura que você deseja para sua fronteira.

Answer 17

Você também pode usar um caminho 9 para fazer seu trabalho. Crie -o para que o pixel colorido não se multiplique em altura, mas apenas o pixel transparente.

Answer 18

Aqui está uma maneira de alcançá -lo.

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

Primeiro item para derrame e segundo para fundo sólido. Escondendo fronteiras esquerda e direita.

Answer 19

Basta adicionar vistas na parte superior e inferior do View

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:gravity="center"
        android:text="Testing"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/your_color"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

Answer 20

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

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

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

Basta adicionar esta visão de texto abaixo do texto onde você deseja adicionar a borda

Answer 23

Apenas para aplicar @Phreakhead ' e User1051892 ´S respostas, <item android:bottom|android:left|android:right|android:top> se negativo, deve ser maior que <stroke android:width>. Caso contrário, a pintura do item será misturada com a pintura do AVC e você pode pensar que esses valores não estão funcionando.