web-dev-qa-db-fra.com

Android - Définir une bordure autour d'un ImageView

J'ai une cellule avec une largeur et une hauteur fixes, qu'elle soit 100x100px. À l'intérieur de cette cellule, je souhaite afficher une ImageView avec une bordure autour.
Ma première idée était de mettre une ressource d’arrière-plan dans la variable ImageView et d’ajouter un remplissage de 1dp pour créer l’effet de bordure:

<LinearLayout
        Android:layout_width="100dp"
        Android:layout_height="100dp" >

    <ImageView
        Android:id="@+id/imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/image_border"
        Android:padding="1dp"
        Android:src="@drawable/test_image" />

</LinearLayout>

Apparemment, cela devrait fonctionner, mais cela ne fonctionne pas, ou du moins pas comme prévu.
Le problème est que l'arrière-plan ImageView remplit la totalité de l'espace de la cellule 100x100px. Par conséquent, si la largeur de l'image est inférieure à 100px, les bordures supérieure et inférieure seront plus grandes.

Remarquez la bordure jaune, il me faut exactement 1px autour de ImageView: 

enter image description here

Toute aide, idée, suggestion de quelque nature que ce soit est très appréciée.

androidandroid-layoutandroid-emulatorandroid-widgetandroid-imageview
27
Andy Res

Si vous mettez le remplissage = 1 et la couleur d'arrière-plan dans LinearLayout, vous aurez une bordure jaune de 1px.

45
Christine

Voici ce qui a fonctionné pour moi...

<!-- @drawable/image_border -->
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <solid Android:color="@color/colorPrimary"/>
  <stroke Android:width="1dp" Android:color="#000000"/>
  <padding Android:left="1dp" Android:top="1dp" Android:right="1dp" Android:bottom="1dp"/>
</shape>

<ImageView
  Android:layout_width="300dp"
  Android:layout_height="300dp"
  Android:layout_gravity="center"
  Android:padding="1dp"
  Android:cropToPadding="true"
  Android:scaleType="centerCrop"
  Android:background="@drawable/image_border"/>

Voici le résultat que je reçois avec un viewpager et imageview avec une bordure.

Example imageview with border 1dp black.

25
Ray Hunter

Si les images sont de taille variable, vous obtiendrez toujours cet effet. Je suppose que vous devez définir une taille fixe pour le ImageView et lui attribuer une couleur d'arrière-plan définie. Le noir semble logique. Enveloppez la vue image dans un FrameLayout ou tout simplement une vue avec un arrière-plan jaune et un remplissage 1px.

MODIFIER

J'y ai réfléchi et ma réponse n'a pas semblé juste alors ...

Si vous définissez chaque ImageView avec une taille, un rembourrage et une marge fixes. puis définissez la couleur de fond comme vous le souhaitez, vous pouvez obtenir l’effet souhaité.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="fill_parent" >


        <ImageView
            Android:id="@+id/imageView1"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:background="#52D017"
            Android:padding="1dp"
            Android:layout_margin="5dp"
            Android:src="@drawable/test1"
            tools:ignore="ContentDescription" />

        <ImageView
            Android:id="@+id/imageView2"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="center"
            Android:layout_margin="5dp"
            Android:background="#52D017"
            Android:padding="1dp"
            Android:src="@drawable/test2"
            tools:ignore="ContentDescription" />

</LinearLayout>

Dans la capture d'écran, les deux images affichées ont une largeur inférieure à 100 px et des hauteurs différentes.

example

Cela ne gère pas les images avec des arrière-plans transparents car la couleur vert jaune (dans ce cas) est visible. Vous pouvez résoudre ce problème en encapsulant chaque ImageView dans un FrameLayout. Rendre l'arrière-plan ImageView noir et régler FrameLayout sur WrapContent avec le remplissage requis (je pense)

9
Paul D'Ambra

vous pouvez utiliser l'imageview personnalisée, d'où vous pouvez obtenir la bordure, voici le code. vous pouvez également modifier la largeur du rembourrage et la largeur du trait en fonction de vos besoins. C'est préciser juste en dessous de la première ligne de code, merci

public class FreeCollage extends ImageView {

    private static final int PADDING = 8;
    private static final float STROKE_WIDTH = 5.0f;

    private Paint mBorderPaint;

    public FreeCollage(Context context) {
        this(context, null);
    }

    public FreeCollage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        setPadding(PADDING, PADDING, PADDING, PADDING);
    }

    public FreeCollage(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initBorderPaint();
    }

    private void initBorderPaint() {
        mBorderPaint = new Paint();
        mBorderPaint.setAntiAlias(true);
        mBorderPaint.setStyle(Paint.Style.STROKE);
        mBorderPaint.setColor(Color.WHITE);
        mBorderPaint.setStrokeWidth(STROKE_WIDTH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(PADDING, PADDING, getWidth() - PADDING, getHeight() - PADDING, mBorderPaint);
    }
}
4
Shubham Kamlapuri

Il suffit d’ajouter la propriété adjustViewBounds à ImageView.

<ImageView
        Android:id="@+id/imageView"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:background="@drawable/image_border"
        Android:padding="1dp"
        Android:adjustViewBounds="true"
        Android:src="@drawable/test_image" />

Veuillez noter que Android:adjustViewBounds="true" fonctionne uniquement avec Android:layout_width et Android:layout_height réglés sur "wrap_content". 

3
rricarrdo

C'est ce qui a fonctionné pour moi:

    <ImageView
        Android:id="@+id/dialpad_phone_country_flag"
        Android:layout_width="22dp"
        Android:layout_height="15dp"
        Android:scaleType="fitXY"
        Android:background="@color/gen_black"
        Android:padding="1px"/>
3
Goran Horia Mihail

ajoutez simplement la ligne ci-dessous dans votre mise en page ImageView

si layout_width et layout_height de imageview ne correspondent pas à match_parent que use,

Android:adjustViewBounds = "true"

ou

Android:adjustViewBounds = "true"
Android:scaleType="fitXY"

ou 

Android:adjustViewBounds = "true"
Android:scaleType="centerCrop"
1
varotariya vajsi

Vous devez ajouter scaletyle dans votre imageview. Après cela, votre image serait en forme.

Android: scaleType = "fitXY"

0
Shubham

Voici l'extrait de code que j'ai utilisé dans ma solution la plus simple.

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

Si vous voulez plus d'explications, veuillez regarder le link suivant où je l'avais assez bien expliqué.

J'espère que cela pourra vous être utile!

À votre santé!

0
Randika Vishman