Esiste un modo semplice per aggiungere un bordo nella parte superiore e inferiore di una visualizzazione Android?

Question

Ho un TextView e vorrei aggiungere un bordo nero lungo i bordi superiore e inferiore.Ho provato ad aggiungere android:drawableTop E android:drawableBottom al TextView, ma ciò ha solo fatto sì che l'intera vista diventasse nera.

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

Esiste un modo per aggiungere facilmente un bordo superiore e inferiore a una vista (in particolare un TextView) in Android?

Answer 1

In Android 2.2 si può fare come segue.

Crea un drawable XML come /res/drawable/textlines.xml e assegnare questo come proprietà di sfondo di un 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>

Il lato negativo di questo è che si deve specificare un colore di sfondo opaco, come lucidi non funzioneranno. (Almeno ho pensato che hanno fatto, ma mi sbagliavo). Nell'esempio di cui sopra si può vedere che il colore solido del primo #FFdddddd forma viene copiato nel 2 ° colore forme ictus.

Answer 2

Ho usato un trucco in modo che il bordo viene visualizzato al di fuori del contenitore. Con questo trucco solo si traccia una linea in modo che il fondo sarà mostrata la vista sottostante.

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

Opzione 1:Forma disegnabile

Questa è l'opzione più semplice se desideri un bordo attorno a un layout o una vista in cui puoi impostare lo sfondo.Creare un file XML nel file drawable cartella che assomiglia a questa:

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

Puoi rimuovere il solid se non vuoi un riempimento.Il set background="@drawable/your_shape_drawable" sul tuo layout/vista.

Opzione 2:Vista di sfondo

Ecco un piccolo trucco che ho usato in a RelativeLayout.Fondamentalmente hai un quadrato nero sotto la vista a cui vuoi dare un bordo, e poi dai a quella vista un po' di imbottitura (non margine!) in modo che il quadrato nero sia visibile ai bordi.

Ovviamente questo funziona correttamente solo se la vista non ha aree trasparenti.In tal caso, ti consiglierei di scrivere un messaggio personalizzato BorderView che disegna solo il bordo: dovrebbero essere solo poche dozzine di righe di codice.

<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 te lo stai chiedendo, lo è fa lavorare con adjustViewBounds=true.Tuttavia, non funziona se vuoi avere uno sfondo intero RelativeLayout, perché c'è un bug che ti impedisce di riempire a RelativeLayout con un View.In tal caso consiglierei il Shape disegnabile.

Opzione 3:9-patch

Un'ultima opzione è utilizzare un drawable da 9 patch come questo:

Puoi usarlo su qualsiasi vista in cui puoi impostare android:background="@drawable/...".E sì, deve essere 6x6: ho provato 5x5 e non ha funzionato.

Lo svantaggio di questo metodo è che non puoi cambiare i colori molto facilmente, ma se vuoi bordi fantasiosi (ad es.solo un bordo in alto e in basso, come in questa domanda), potresti non essere in grado di eseguirli con il Shape drawable, che non è molto potente.

Opzione 4:Viste extra

Ho dimenticato di menzionare questa opzione davvero semplice se desideri solo i bordi sopra e sotto la tua vista.Puoi mettere la tua vista in verticale LinearLayout (se non lo è già) e quindi aggiungi vuoto Viewè sopra e sotto in questo modo:

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

Answer 4

Per aggiungere un bordo bianco 1dp a soli fondo e di avere uno sfondo trasparente è possibile utilizzare il seguente che è più semplice di quanto la maggior parte delle risposte qui.

Per la TextView o altro vista add:

android:background="@drawable/borderbottom"

E nella directory drawable aggiungere il seguente codice XML, chiamato 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 si desidera un bordo in alto, cambiare il android:top="-2dp" a android:bottom="-2dp"

Il colore non ha bisogno di essere bianco e lo sfondo non ha bisogno di essere trasparente sia.

L'elemento solid potrebbe non essere necessaria. Questo dipenderà il vostro disegno (grazie V. Kalyuzhnyu).

In sostanza, questo XML creerà un bordo utilizzando la forma rettangolare, ma poi spinge cima, ai lati destro e sinistro oltre l'area di rendering per la forma. Questo lascia solo il bordo inferiore visibile.

Answer 5

Così ho voluto fare qualcosa di leggermente diverso: un bordo sul fondo SOLO, per simulare un divisore ListView. Ho modificato la risposta di Piet Delport e ottenuto questo:

<?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 utilizzando px invece di dp per ottenere esattamente 1 pixel divisore (alcuni telefoni DPI farà una linea 1DP scomparire).

Answer 6

La risposta attualmente accettato non funziona. Si crea bordi verticali sottili sui lati destro e sinistro della vista come risultato di anti-aliasing.

Questa versione funziona perfettamente. Consente inoltre di impostare la larghezza di confine in modo indipendente, e si può anche aggiungere bordi sui lati sinistro / destro, se si desidera. L'unico inconveniente è che non supporta la trasparenza.

Crea un XML drawable nome /res/drawable/top_bottom_borders.xml con il codice qui sotto e assegnarlo come proprietà di sfondo di un TextView.

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

Testato su Android KitKat attraverso Marshmallow

Answer 7

Proprio come ha detto @ nic Hubbard, c'è un modo molto semplice per aggiungere una linea di confine.

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

È possibile modificare l'altezza e il colore di sfondo per quello che vuoi.

Answer 8

Si può anche avvolgere la vista in un FrameLayout, quindi impostare il colore di sfondo del telaio e imbottitura per ciò che si vuole; tuttavia, il TextView, per impostazione predefinita ha uno sfondo 'trasparente', così avresti bisogno di cambiare il colore di sfondo del TextView troppo.

Answer 9

Le mie risposte si basa sulla versione @Emile ma io uso il colore trasparente, invece di solido.
Questo esempio disegnare un bordo inferiore 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>

@ colore / bgcolor è il colore dello sfondo sulla quale si disegna la tua vista con bordo.

Se si desidera modificare la posizione del bordo modificare la correzione con uno dei seguenti:

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

o combinarle per avere 2 o più frontiere:

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

Answer 10

Perché non solo creare una visione alta 1DP con un colore di sfondo? Poi si può essere facilmente posizionato dove si vuole.

Answer 11

Giusto per aggiungere la mia soluzione alla lista ..

Ho voluto un bordo inferiore trasparente semi che si estende oltre la forma originale (Così il confine semi-trasparente è stato fuori il rettangolo genitore).

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

Il che mi dà;

Answer 12

Per prima cosa fare un file XML con i contenuti indicati di seguito e il nome border.xml e posizionarlo all'interno della cartella di layout all'interno della directory res

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

Dopo che dentro l'utilizzo di codice

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

Questo farà una linea nera sulla parte superiore e inferiore del TextView.

Answer 13

Per modificare questa:

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

Io preferisco questo approccio in "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>

In questo modo solo i confini, non un rettangolo che apparirà se lo sfondo ha un colore.

Answer 14

Annotare qui sotto il codice

<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

Il modo più semplice per aggiungere bordi alle incastonate ai confini con InsetDrawable, a seguito mostrerà bordo superiore solo:

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

Prova avvolgendo l'immagine con una LinearLayout, e impostare il suo sfondo al colore del bordo che si desidera intorno al testo. Quindi impostare l'imbottitura sulla TextView di essere lo spessore che si desidera per il bordo.

Answer 17

È inoltre possibile utilizzare un 9-percorso per fare il vostro lavoro. Creare in modo che pixel di colore non si moltiplicano in altezza ma solo il pixel trasparente.

Answer 18

Ecco un modo per realizzarlo.

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

Prima voce per l'ictus e la seconda per lo sfondo solido. Nascondere i bordi sinistro e destro.

Answer 19

È sufficiente aggiungere vedute sulla parte superiore e inferiore del 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" />

Just Add questo TextView sotto il testo in cui si desidera aggiungere il confine

Answer 23

Proprio per far rispettare di @phreakhead e risposte di user1051892, <item android:bottom|android:left|android:right|android:top> se negativo, deve essere maggiore di <stroke android:width>. In caso contrario, la pittura item's sarà mescolato con la pittura stroke's e si potrebbe pensare che questi valori non stanno funzionando.