Confine per una visualizzazione immagine in Android?

Come posso impostare un bordo per un ImageViewe cambiarne il colore in Android?

Ho impostato il codice XML in basso sullo sfondo della Vista immagine come Disegnabile. Funziona.

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

E poi aggiungi android:background="@drawable/yourXmlFileName"al tuoImageView

Di seguito è riportato il codice che un tempo avevo il bordo nero. Nota che non ho usato file XML extra per il bordo.

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

Questo è un vecchio post che conosco, ma ho pensato che potesse aiutare qualcuno.

Se vuoi simulare un bordo traslucido che non si sovrappone al colore "solido" della forma, usa questo nel tuo XML. Si noti che non uso affatto il tag "tratto" in quanto sembra sovrapporsi sempre alla forma disegnata effettiva.

  <?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 nel file 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" />

salva sotto il codice con il nome di border_image.xmle dovrebbe essere nella cartella disegnabile

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

se si desidera assegnare un angolo arrotondato al bordo dell'immagine, è possibile modificare una linea nel file border.xml

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

Crea bordo

Crea un file xml (ad esempio "frame_image_view.xml") con il seguente contenuto nella tua cartella disegnabile:

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

Sostituisci @dimen/borderThicknesse @color/borderColorcon quello che vuoi o aggiungi il dimen / color corrispondente.

Aggiungi il Drawable come sfondo a 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" />

Devi usare android:cropToPadding="true", altrimenti il ​​padding definito non ha effetto. In alternativa, utilizza android:padding="@dimen/borderThickness"ImageView per ottenere lo stesso risultato. Se il bordo incornicia il genitore anziché ImageView, prova a utilizzareandroid:adjustViewBounds="true" .

Cambia colore del bordo

Il modo più semplice per modificare il colore del bordo nel codice è utilizzare l'attributo 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));

Non dimenticare di definire il tuo newColor.

Aggiungi uno sfondo Disegnabile come 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>

Aggiorna lo sfondo di ImageView in 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" />
...

Escludere il riempimento ImageView se si desidera che src disegni sullo sfondo.

Questo è stato usato sopra ma non menzionato esclusivamente.

setCropToPadding(boolean);

Se vero , l'immagine verrà ritagliata per adattarsi alla sua imbottitura.

Ciò renderà la ImageViewsorgente adatta al padding aggiunto al suo sfondo.

Tramite XML può essere fatto come di seguito-

android:cropToPadding="true"

è necessario creare un background.xml in res / drawable questo codice

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

Per coloro che cercano bordi e forme personalizzati di ImageView. Puoi usare android-shape-imageview

Aggiungi compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'al tuobuild.gradle .

E usa nel tuo layout.

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

Ho quasi rinunciato a questo.

Questa è la mia condizione che utilizza la planata per caricare l'immagine, vedere il problema di planata dettagliato qui sulle trasformazioni degli angoli arrotondati e qui

Ho anche gli stessi attributi per il mio ImageView, per tutti rispondere qui 1 , qui 2 e qui 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"

Ma ancora nessun successo.

Dopo aver cercato per un po ', usando a foreground attributi di questa risposta SO dà un risultatoandroid:foreground="@drawable/all_round_border_white"

purtroppo mi dà l'angolo del bordo "non carino" come sotto l'immagine:

Ho trovato molto più facile farlo:

1) Modifica la cornice per avere il contenuto all'interno (con lo strumento 9patch).

2) Posiziona l' ImageViewinterno a Linearlayoute imposta lo sfondo o il colore della cornice che desideri come sfondo della Linearlayout. Mentre imposti la cornice per avere il contenuto al suo interno, ImageViewsarai all'interno della cornice (proprio dove hai impostato il contenuto con lo strumento 9patch).

Di seguito è la mia soluzione più semplice a questo lungo 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>

Nella seguente risposta ho spiegato abbastanza bene, per favore dai un'occhiata anche a quello!

Spero che questo possa essere utile a qualcun altro là fuori!

Nello stesso xml che ho usato dopo:

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

Prima di aggiungere il colore di sfondo desiderato come colore del bordo, quindi

cambia cropToPadding in true e successivamente aggiungi padding.

Quindi avrai il tuo bordo per imageView.