web-dev-qa-db-fra.com

Bordure pour une vue d'image dans Android?

Comment définir une bordure pour une ImageView et changer sa couleur dans Android?

androidborderimageview
300
Praveen

J'ai défini le code XML ci-dessous sur l'arrière-plan de la vue d'image en tant que dessin. Ç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" à votre ImageView

520
Praveen

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 les bordures.

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

C'est un ancien message que je connais, mais je pensais que cela pourrait éventuellement aider quelqu'un.

Si vous souhaitez simuler une bordure translucide qui ne chevauche pas la couleur "unie" de la forme, utilisez-la dans votre code xml. Notez que je n’utilise pas du tout la balise "stroke" car elle semble toujours recouvrir la forme 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>
22
mdupls

ImageView dans le 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 border_image.xml et il devrait se trouver dans un dossier pouvant être dessiné

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
 Android:shape="rectangle">
<gradient Android:startColor="#ffffff" 
Android:endColor="#ffffff"
Android:angle="270" />
<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" />
19
Ashish Saini

Ajouter un fond 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 le fond 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 la source soit dessinée sur l’arrière-plan.

2
Stephen Niedzielski

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

setCropToPadding(boolean)

If true, the image will be cropped to fit within its padding.

Cela fera que la source ImageView s'intégrera dans les bourrages ajoutés à son arrière-plan.

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

Android:cropToPadding="true"
2
Atul O Holic

vous devez créer un fichier 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>
1
Cabezas

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' à votre build.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"/>
0
Khemraj

Dans le même xml, 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
porquero

Tout d’abord, ajoutez la couleur d’arrière-plan que vous voulez comme couleur de votre bordure, puis enter image description here

changez le cropToPadding en true et ensuite ajoutez le padding.

Ensuite, vous aurez votre bordure pour votre imageView.

0
Achintha Isuru

J'ai trouvé tellement plus facile de faire ceci:

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

2) Placez la ImageView dans une Linearlayout et définissez l’arrière-plan ou la couleur du cadre de votre choix comme arrière-plan de la Linearlayout. Lorsque vous définissez le cadre pour qu'il ait le contenu à l'intérieur, votre ImageView sera à l'intérieur du cadre (exactement là où vous définissez le contenu avec l'outil 9patch).

0
noloman

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

<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 suite réponse je l'ai suffisamment expliqué, jetez-y un coup d'œil également!

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

0
Randika Vishman

Créer une bordure

Créez un fichier XML (par exemple, "frame_image_view.xml") avec le contenu suivant dans votre dossier pouvant être dessiné:

<?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/borderThickness et @color/borderColor par ce que vous voulez ou ajoutez une dimension/couleur correspondante.

Ajoutez le dessin comme 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 pas d'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

Le moyen le plus simple de modifier la couleur de la 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.

0
SuperSmartWorld