Bordure pour une vue d'image dans Android?


338

Comment puis-je définir une bordure pour un ImageViewet changer sa couleur dans Android?


1
J'ai une réponse pour changer la couleur d'une ImageView, l'espoir peut vous aider.
ruidge

Réponses:


568

J'ai mis le xml ci-dessous à l'arrière-plan de la vue d'image comme dessinable. Ça marche.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke android:width="1dp" android:color="#000000" />
    <padding android:left="1dp" android:top="1dp" android:right="1dp"
        android:bottom="1dp" />
</shape>

Et puis ajoutez android:background="@drawable/yourXmlFileName"à votreImageView


112
Et puis ajouter android:background="@drawable/yourXmlFileName"àImageView
Mithun Sreedharan

10
La bordure fonctionne à la fois à gauche et à droite, mais pour le haut et le bas, elle remplit le parent vers le haut.
Maurice

3
Oh bien, c'est ce que je veux aussi. N'oubliez pas de définir un remplissage pour votre ImageView.
emeraldhieu

5
@Maurice Vous pouvez définir cropToPadding sur true.
MikkoP

4
n'oubliez pas de définir cropToPadding = "true"
landry

164

Voici le code que j'avais l'habitude d'avoir une bordure noire. Notez que je n'ai pas utilisé de fichier xml supplémentaire pour la bordure.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/red_minus_icon"
    android:background="#000000"
    android:padding="1dp"/>

29
ouais .. ça ressemble à une frontière. Mais lorsque vous utilisez une image dessinable avec un fond transparent, elle ne montrera pas correctement votre image avec bordure. il montre la couleur noire partout où vous avez le transparent. Votre réponse n'est donc pas la meilleure approche.
Praveen

19
Ouais! mais vous avez une bordure sans créer un autre fichier xml.
user609239

7
Cela ne fonctionne pas lorsque vous redimensionnez l'image à l'aide de android:scaleType="centerCrop".
Silox

8
c'est mauvais car cela crée un surplus inutile
Jay Soyer

1
@Silox pour scaleType="centerCrop", assurez-vous d'ajouter égalementcropToPadding="true"
Adam Johns

24

C'est un vieux post que je connais, mais j'ai pensé que cela pourrait peut-être aider quelqu'un là-bas.

Si vous souhaitez simuler une bordure translucide qui ne chevauche pas la couleur "solide" de la forme, utilisez-la dans votre xml. Notez que je n'utilise pas du tout la balise "stroke" car elle semble toujours chevaucher la forme réelle dessinée.

  <?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="#55111111" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />

            <solid android:color="#ff252525" />
        </shape>
    </item>
</layer-list>

J'aime bien aussi mais si vous faites les bords extérieurs trop petits, les coins sont vides. Cela fonctionne bien avec n'importe quoi 2dp et au-dessus.
John Stack

L'avantage de cette méthode est qu'elle permet des coins arrondis. Si vous ne voulez pas que la bordure de la réponse précédente se chevauche, ajoutez un remplissage à la balise ImageView. L'inconvénient de cette méthode est que la bordure saignera dans la zone d'image si vous utilisez un fond translucide. J'ai donc choisi la méthode précédente car j'aime mieux le fond translucide que les coins arrondis.
Leo Landau

24

ImageView dans un fichier xml

<ImageView
            android:id="@+id/myImage"
            android:layout_width="100dp"
            android:layout_height="100dp"

            android:padding="1dp"
            android:scaleType="centerCrop"
            android:cropToPadding="true"
            android:background="@drawable/border_image"

            android:src="@drawable/ic_launcher" />

enregistrer le code ci-dessous avec le nom de border_image.xmlet il devrait être dans un dossier dessinable

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

    <gradient
        android:angle="270"
        android:endColor="#ffffff"
        android:startColor="#ffffff" />

    <corners android:radius="0dp" />

    <stroke
        android:width="0.7dp"
        android:color="#b4b4b4" />
</shape>

si vous voulez donner un coin arrondi à la bordure de l'image, vous pouvez changer une ligne dans le fichier border.xml

<corners android:radius="4dp" />

2
juste une note à ce sujet, si l'image est définie dynamiquement, la bordure doit être définie à nouveau dans le code, sinon l'image est au-dessus de la bordure.
Rob85

4

Créer une bordure

Créez un fichier xml (par exemple "frame_image_view.xml") avec le contenu suivant dans votre dossier dessinable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="@dimen/borderThickness"
        android:color="@color/borderColor" />
    <padding
        android:bottom="@dimen/borderThickness"
        android:left="@dimen/borderThickness"
        android:right="@dimen/borderThickness"
        android:top="@dimen/borderThickness" />
    <corners android:radius="1dp" /> <!-- remove line to get sharp corners -->
</shape>

Remplacez @dimen/borderThicknesset @color/borderColorpar ce que vous voulez ou ajoutez la dimension / couleur correspondante.

Ajoutez le Drawable en arrière-plan à votre ImageView:

<ImageView
        android:id="@+id/my_image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/frame_image_view"
        android:cropToPadding="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter" />

Vous devez utiliser android:cropToPadding="true", sinon le remplissage défini n'a aucun effet. Vous pouvez également utiliser android:padding="@dimen/borderThickness"dans votre ImageView pour obtenir le même résultat. Si la bordure encadre le parent au lieu de votre ImageView, essayez d'utiliser android:adjustViewBounds="true".

Changer la couleur de la bordure

La façon la plus simple de modifier la couleur de votre bordure dans le code consiste à utiliser l'attribut tintBackgound.

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(ColorStateList.valueOf(Color.RED); // changes border color to red

ou

ImageView img = findViewById(R.id.my_image_view);
img.setBackgroundTintList(getColorStateList(R.color.newColor));

N'oubliez pas de définir votre newColor.


3

Ajoutez un arrière-plan Drawable comme res / drawables / background.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@android:color/white" />
  <stroke android:width="1dp" android:color="@android:color/black" />
</shape>

Mettez à jour l'arrière-plan d'ImageView dans res / layout / foo.xml:

...
<ImageView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:padding="1dp"
  android:background="@drawable/background"
  android:src="@drawable/bar" />
...

Excluez le remplissage ImageView si vous souhaitez que le src dessine sur l'arrière-plan.


3

Ceci a été utilisé ci-dessus mais n'est pas mentionné exclusivement.

setCropToPadding(boolean);

Si vrai , l'image sera rognée pour tenir dans son rembourrage.

Cela fera en sorte que la ImageViewsource tienne dans le remplissage ajouté à son arrière-plan.

Via XML, cela peut être fait comme ci-dessous-

android:cropToPadding="true"

2

vous devez créer un background.xml dans res / drawable ce code

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<corners android:radius="6dp" />
<stroke
    android:width="6dp"
    android:color="@android:color/white" />
<padding
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp"
    android:top="6dp" />
</shape>

2

Pour ceux qui recherchent une bordure et une forme personnalisées d'ImageView. Vous pouvez utiliser android-shape-imageview

image

Ajoutez simplement compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'à votrebuild.gradle .

Et utilisez dans votre mise en page.

<com.github.siyamed.shapeimageview.BubbleImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/neo"
    app:siArrowPosition="right"
    app:siSquare="true"/>

1

J'ai presque abandonné à ce sujet.

Ceci est ma condition d'utilisation de glissement pour charger l'image, voir le problème de glissement détaillé ici sur les transformations des coins arrondis et ici

J'ai aussi les mêmes attributs pour moi ImageView, pour tout le monde répondez ici 1 , ici 2 et ici 3

android:cropToPadding="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"`
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/path_to_rounded_drawable"

Mais toujours pas de succès.

Après avoir fait des recherches pendant un certain temps, l'utilisation d'un foregroundattribut de cette réponse SO donne ici un résultatandroid:foreground="@drawable/all_round_border_white"

malheureusement, cela me donne le coin de la bordure "pas agréable" comme l'image ci-dessous:

entrez la description de l'image ici


0

Je l'ai trouvé beaucoup plus facile à faire:

1) Modifiez le cadre pour avoir le contenu à l'intérieur (avec l'outil 9patch).

2) Placez l' ImageViewintérieur a Linearlayoutet définissez l'arrière-plan ou la couleur du cadre comme arrière-plan du Linearlayout. Lorsque vous définissez le cadre pour avoir le contenu à l'intérieur de lui-même, vous ImageViewserez à l'intérieur du cadre (là où vous définissez le contenu avec l'outil 9patch).


0

Voici ma solution la plus simple à ce long problème.

<FrameLayout
    android:layout_width="112dp"
    android:layout_height="112dp"
    android:layout_marginLeft="16dp" <!-- May vary according to your needs -->
    android:layout_marginRight="16dp" <!-- May vary according to your needs -->
    android:layout_centerVertical="true">
    <!-- following imageView acts as the boarder which sitting in the background of our main container ImageView -->
    <ImageView
        android:layout_width="112dp"
        android:layout_height="112dp"
        android:background="#000"/>
    <!-- following imageView holds the image as the container to our image -->
    <!-- layout_margin defines the width of our boarder, here it's 1dp -->
    <ImageView
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:layout_margin="1dp"
        android:id="@+id/itemImageThumbnailImgVw"
        android:src="@drawable/banana"
        android:background="#FFF"/> </FrameLayout>

Dans la réponse suivante je l'ai assez bien expliqué, jetez un œil à cela aussi!

J'espère que cela sera utile à quelqu'un d'autre là-bas!


0

Dans le même xml que j'ai utilisé ensuite:

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ffffff" <!-- border color -->
        android:padding="3dp"> <!-- border width -->

        <ImageView
            android:layout_width="160dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop" />
    </RelativeLayout>

0

Tout d'abord, ajoutez la couleur d'arrière-plan que vous souhaitez comme couleur de votre bordure, puis entrez la description de l'image ici

changer le cropToPadding sur true et après cela ajouter un remplissage.

Ensuite, vous aurez votre bordure pour votre imageView.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.