Y at-il un moyen facile d'ajouter une bordure en haut et en bas d'un Android View?

Question

J'ai un TextView et je voudrais ajouter une bordure noire le long de ses frontières supérieure et inférieure. J'ai essayé d'ajouter android:drawableTop et android:drawableBottom au TextView, mais cela ne fait toute la vue de devenir noir.

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

Est-il possible d'ajouter facilement une bordure supérieure et inférieure à une vue (en particulier, un TextView) dans Android?

Answer 1

Dans Android 2.2 vous pouvez faire ce qui suit.

Créer un drawable xml tels que /res/drawable/textlines.xml et attribuer cela comme une propriété d'arrière-plan 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>

L'inconvénient est que vous devez spécifier une couleur d'arrière-plan opaque, que les transparents ne fonctionneront pas. (Au moins je pensais qu'ils ont fait, mais je me suis trompé). Dans l'exemple ci-dessus, vous pouvez voir que la couleur unie de la première #FFdddddd de forme est copiée dans la couleur 2ème course de formes.

Answer 2

Je l'ai utilisé une astuce pour que la frontière est affichée à l'extérieur du conteneur. Avec cette astuce seule une ligne est tracée donc l'arrière-plan sera affiché de la vue sous-jacente.

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

Option 1: Forme Drawable

Ceci est l'option la plus simple si vous voulez une bordure autour d'une mise en page ou vue dans laquelle vous pouvez définir l'arrière-plan. Créez un fichier XML dans le dossier drawable qui ressemble à ceci:

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

Vous pouvez supprimer le solid si vous ne voulez pas un remplissage. L'ensemble background="@drawable/your_shape_drawable" sur votre mise en page / vue.

Option 2: Vue d'arrière-plan

Voici un petit truc que je l'ai utilisé dans un RelativeLayout. Fondamentalement, vous avez un carré noir dans la vue que vous souhaitez donner une bordure, puis donner ce point de vue certains types de remplissage (non marge!) De sorte que le carré noir transparaît sur les bords.

Il est évident que cela ne fonctionne que correctement si le point de vue n'a pas de zones transparentes. Si ce ne je vous recommande d'écrire un BorderView personnalisé qui ne tire que la frontière -. Il ne devrait être quelques dizaines de lignes de code

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

Si vous vous demandez, il fait travailler avec adjustViewBounds=true. Cependant, cela ne fonctionne pas si vous voulez avoir un arrière-plan dans un RelativeLayout ensemble, parce qu'il ya un bug qui vous empêche de remplir une RelativeLayout avec un View. Dans ce cas, je vous recommande la drawable de Shape.

Option 3: 9-patch

Une dernière option est d'utiliser un drawable 9-patch comme celui-ci:

Vous pouvez l'utiliser en tout état où vous pouvez définir android:background="@drawable/...". Et oui, il n'a pas besoin d'être 6x6 -. J'ai essayé 5x5 et il ne fonctionne pas

L'inconvénient de cette méthode est que vous ne pouvez pas changer les couleurs très facilement, mais si vous voulez des frontières de fantaisie (par exemple seulement une bordure en haut et en bas, comme dans cette question), alors vous ne pouvez pas être en mesure de les faire avec le drawable de Shape, ce qui est très puissant.

Option 4: des vues supplémentaires

J'ai oublié de mentionner cette option vraiment simple si vous ne souhaitez que les frontières au-dessus et en dessous de votre vue. Vous pouvez mettre votre point de vue dans une LinearLayout verticale (si elle est pas déjà), puis ajouter Views vide au-dessus et au-dessous comme ceci:

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

Answer 4

Pour ajouter une bordure blanche 1dp au fond seulement et d'avoir un fond transparent, vous pouvez utiliser ce qui suit qui est plus simple que la plupart des réponses ici.

Pour la TextView ou autre point de vue ajouter:

android:background="@drawable/borderbottom"

Et dans le répertoire drawable ajoutez le code XML suivant, appelé 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>

Si vous voulez une bordure en haut, changer le android:top="-2dp" à android:bottom="-2dp"

La couleur n'a pas besoin d'être blanc et l'arrière-plan n'a pas besoin d'être transparents.

L'élément solid peut ne pas être nécessaire. Cela dépendra de votre conception (merci V. Kalyuzhnyu).

En fait, ce XML va créer une bordure en utilisant la forme de rectangle, mais pousse alors le dessus, les côtés droit et gauche au-delà de la zone de rendu pour la forme. Cela laisse juste la bordure inférieure visible.

Answer 5

Alors, je voulais faire quelque chose un peu différent: une bordure sur le fond seulement, pour simuler un diviseur de ListView. J'ai modifié la réponse de Piet Delport et a obtenu ceci:

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

Note en utilisant px au lieu de dp pour obtenir exactement 1 diviseur de pixel (certains téléphone DPIs fera disparaître une ligne de 1DP).

Answer 6

La réponse actuellement acceptée ne fonctionne pas. Il crée des frontières verticales minces sur les côtés gauche et droit de la vue à la suite de l'anti-aliasing.

Cette version fonctionne parfaitement. Il vous permet également de régler la largeur des frontières indépendamment, et vous pouvez également ajouter des bordures sur les côtés gauche / droite si vous voulez. Le seul inconvénient est qu'il ne supporte pas la transparence.

Créer un drawable xml nommé /res/drawable/top_bottom_borders.xml avec le code ci-dessous et lui attribuer comme propriété d'arrière-plan 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>

Testé sur Android KitKat par Marshmallow

Answer 7

Comme dit @Nic Hubbard, il y a un moyen très facile d'ajouter une ligne de frontière.

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

Vous pouvez changer la taille et la couleur d'arrière-plan tout ce que vous voulez.

Answer 8

Vous pouvez également envelopper la vue dans un FrameLayout, puis réglez la couleur d'arrière-plan et le rembourrage du cadre à ce que vous voulez; cependant, le textview, par défaut a un fond « transparent », donc vous aurez besoin de changer la couleur de fond du textview aussi.

Answer 9

Mes réponses sont basées sur la version @Emile mais j'utiliser la couleur transparente au lieu de solide.
Cet exemple dessine une bordure inférieure 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>

@ couleur / bgcolor est la couleur de l'arrière-plan sur Wich vous dessinez votre point de vue avec la frontière.

Si vous voulez changer la position de la frontière changer le décalage avec l'un:

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

ou les combiner pour avoir 2 ou plusieurs frontières:

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

Answer 10

Pourquoi ne pas simplement créer une vue 1DP élevée avec une couleur d'arrière-plan? Ensuite, il peut être facilement placé là où vous voulez.

Answer 11

Pour ajouter ma solution à la liste ..

Je voulais une bordure inférieure semi-transparente qui dépasse de la forme originale (donc la frontière semi-transparente était à l'extérieur rectangle parent).

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

Ce qui me donne;

Answer 12

Faites d'abord un fichier xml avec le contenu ci-dessous et nommez-border.xml et placez-le dans le dossier de mise en page à l'intérieur du répertoire 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>

Après que l'intérieur de l'utilisation de code

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

Cela fera une ligne noire sur le dessus et le dessous du TextView.

Answer 13

Pour modifier ceci:

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

Je préfère cette approche dans "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>

Ce ne fait que les frontières, pas un rectangle qui apparaît si l'arrière-plan a une couleur.

Answer 14

Notez le code ci-dessous

<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

manière la plus simple ajouter des bordures pour insérer les frontières en utilisant InsetDrawable, suivant montrera bordure supérieure seulement:

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

Essayez d'envelopper l'image avec un LinearLayout, et mis son arrière-plan de la couleur de la bordure que vous voulez autour du texte. Réglez ensuite le rembourrage sur la textview être l'épaisseur que vous voulez pour votre frontière.

Answer 17

Vous pouvez également utiliser un 9-chemin pour faire votre travail. Créer en sorte que pixel de couleur ne se multiplient pas en hauteur, mais seulement le pixel transparent.

Answer 18

Voici un moyen d'y parvenir.

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

Premier élément d'accident vasculaire cérébral et une seconde pour le fond solide. Hiding frontières gauche et à droite.

Answer 19

Ajoutez simplement Vues en haut et en bas du 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" />

Juste Ajouter cette TextView ci-dessous le texte où vous voulez ajouter la frontière

Answer 23

Il suffit de faire respecter de @phreakhead et réponses user1051892, <item android:bottom|android:left|android:right|android:top> si elle est négative, doit être supérieure à <stroke android:width>. Sinon, la peinture item's sera mélangé avec de la peinture stroke's et vous pouvez penser que ces valeurs ne fonctionnent pas.