¿Borde para una vista de imagen en Android?

¿Cómo puedo establecer un borde para un ImageViewy cambiar su color en Android?

Configuré el siguiente xml en el fondo de la Vista de imagen como Dibujable. Funciona.

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

Y luego agregue android:background="@drawable/yourXmlFileName"a suImageView

El siguiente es el código que solía tener borde negro. Tenga en cuenta que no he usado un archivo xml extra para el borde.

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

Esta es una publicación antigua que conozco, pero pensé que esto podría ayudar a alguien por ahí.

Si desea simular un borde translúcido que no se superponga con el color "sólido" de la forma, utilice esto en su xml. Tenga en cuenta que no uso la etiqueta "trazo" aquí, ya que parece superponerse siempre a la forma dibujada real.

  <?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 en archivo 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" />

guarde el siguiente código con el nombre de border_image.xmly debe estar en una carpeta dibujable

<?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 desea dar una esquina redondeada al borde de la imagen, puede cambiar una línea en el archivo border.xml

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

Crear borde

Cree un archivo xml (por ejemplo, "frame_image_view.xml") con el siguiente contenido en su carpeta dibujable:

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

Reemplace @dimen/borderThicknessy @color/borderColorcon lo que quiera o agregue el color / color correspondiente.

Agregue el Drawable como fondo a su 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" />

Tienes que usar android:cropToPadding="true", de lo contrario el relleno definido no tiene ningún efecto. Alternativamente, use android:padding="@dimen/borderThickness"en su ImageView para lograr lo mismo. Si el borde enmarca al padre en lugar de su ImageView, intente usarlo android:adjustViewBounds="true".

Cambiar color de borde

La forma más fácil de cambiar el color del borde en el código es usar el atributo tintBackgound.

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

o

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

No olvides definir tu newColor.

Agregue un fondo Dibujable como 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>

Actualice el fondo de ImageView en 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" />
...

Excluya el relleno de ImageView si desea que el src dibuje sobre el fondo.

Esto se ha utilizado anteriormente pero no se menciona exclusivamente.

setCropToPadding(boolean);

Si es cierto , la imagen se recortará para ajustarse a su relleno.

Esto hará que la ImageViewfuente se ajuste al relleno agregado a su fondo.

A través de XML se puede hacer de la siguiente manera:

android:cropToPadding="true"

debe crear un background.xml en res / drawable este código

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

Para aquellos que buscan bordes personalizados y formas de ImageView. Puedes usar android-shape-imageview

Solo agrégalo compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'a tu build.gradle.

Y úsalo en tu diseño.

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

Casi me di por vencido con esto.

Esta es mi condición usando deslizamiento para cargar la imagen, vea el problema de deslizamiento detallado aquí sobre las transformaciones de esquinas redondeadas y aquí

También tengo los mismos atributos para mi ImageView, porque todos responden aquí 1 , aquí 2 y aquí 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"

Pero aún no hay éxito.

Después de investigar por un tiempo, el uso de foregroundatributos de esta respuesta SO aquí da un resultadoandroid:foreground="@drawable/all_round_border_white"

desafortunadamente me da la esquina del borde "no agradable" como la imagen de abajo:

Me resultó mucho más fácil hacer esto:

1) Edite el marco para tener el contenido dentro (con la herramienta 9patch).

2) Coloque el ImageViewinterior de a Linearlayout, y establezca el fondo o el color del marco que desee como fondo del Linearlayout. A medida que configura el marco para tener el contenido dentro de sí mismo, ImageViewestará dentro del marco (justo donde configura el contenido con la herramienta 9patch).

La siguiente es mi solución más simple para este largo problema.

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

En la siguiente respuesta lo he explicado bastante bien, ¡échale un vistazo también!

¡Espero que esto sea útil para alguien más por ahí!

En el mismo xml que he usado a continuación:

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

Primero de agregar el color de fondo que desea como el color de su borde, luego

cambie el cropToPadding a verdadero y luego agregue el relleno.

Entonces tendrá su borde para su imageView.