Bordure pour une vue d'image dans Android?

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

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

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

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>

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

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.

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.

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"

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>

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

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

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:

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

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!

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>

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

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

Ensuite, vous aurez votre bordure pour votre imageView.