Rahmen für eine Bildansicht in Android?

Wie kann ich einen Rahmen für ein festlegen ImageViewund seine Farbe in Android ändern?

Ich habe die folgende XML-Datei als zeichnbar auf den Hintergrund der Bildansicht gesetzt. Es klappt.

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

Und dann android:background="@drawable/yourXmlFileName"zu Ihrem hinzufügenImageView

Das Folgende ist der Code, den ich verwendet habe, um schwarzen Rand zu haben. Beachten Sie, dass ich keine zusätzliche XML-Datei für den Rahmen verwendet habe.

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

Dies ist ein alter Beitrag, den ich kenne, aber ich dachte, dies könnte möglicherweise jemandem da draußen helfen.

Wenn Sie einen durchscheinenden Rand simulieren möchten, der die "Vollton" -Farbe der Form nicht überlappt, verwenden Sie diesen in Ihrer XML-Datei. Beachten Sie, dass ich das "Strich" -Tag hier überhaupt nicht verwende, da es die tatsächlich gezeichnete Form immer zu überlappen scheint.

  <?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 in XML-Datei

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

Speichern Sie den folgenden Code mit dem Namen border_image.xmlund er sollte sich in einem Zeichenordner befinden

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

Wenn Sie dem Bildrand eine abgerundete Ecke geben möchten, können Sie eine Zeile in der Datei border.xml ändern

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

Rahmen erstellen

Erstellen Sie eine XML-Datei (z. B. "frame_image_view.xml") mit dem folgenden Inhalt in Ihrem Zeichenordner:

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

Ersetzen Sie @dimen/borderThicknessund @color/borderColordurch was auch immer Sie wollen oder fügen Sie entsprechendes Maß / Farbe hinzu.

Fügen Sie das Drawable als Hintergrund zu Ihrer ImageView hinzu:

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

Sie müssen verwenden android:cropToPadding="true", sonst hat die definierte Polsterung keine Auswirkung. Alternativ können Sie dies auch android:padding="@dimen/borderThickness"in Ihrer ImageView verwenden, um dasselbe zu erreichen. Wenn der Rahmen das übergeordnete Element anstelle Ihrer ImageView umrahmt, versuchen Sie es zu verwenden android:adjustViewBounds="true".

Ändern Sie die Farbe des Rahmens

Der einfachste Weg, Ihre Rahmenfarbe im Code zu ändern, ist das Attribut tintBackgound.

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

oder

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

Vergessen Sie nicht, Ihre zu definieren newColor.

Hintergrund hinzufügen Drawable wie 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>

Aktualisieren Sie den ImageView-Hintergrund 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" />
...

Schließen Sie die ImageView-Auffüllung aus, wenn der Quellcode über den Hintergrund gezeichnet werden soll.

Dies wurde oben verwendet, aber nicht ausschließlich erwähnt.

setCropToPadding(boolean);

Wenn dies der Fall ist , wird das Bild so zugeschnitten, dass es in die Polsterung passt.

Dadurch ImageViewpasst die Quelle in die Polsterung, die dem Hintergrund hinzugefügt wurde.

Über XML kann dies wie folgt erfolgen:

android:cropToPadding="true"

Sie müssen eine background.xml in res / drawable dieses Codes erstellen

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

Für diejenigen, die nach benutzerdefinierten Rahmen und Formen von ImageView suchen. Sie können Android-Shape-Imageview verwenden

Fügen compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'Sie einfach zu Ihrembuild.gradle .

Und in Ihrem Layout verwenden.

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

Ich hätte das fast aufgegeben.

Dies ist meine Bedingung beim Verwenden von Gleiten zum Laden des Bildes. Siehe ausführliches Gleitproblem hier über Transformationen mit abgerundeten Ecken und hier

Ich habe auch die gleichen Attribute für meine ImageView, für alle antworten hier 1 , hier 2 & hier 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"

Aber immer noch kein Erfolg.

Nach einer Weile der Recherche ergibt die Verwendung von foregroundAttributen aus dieser SO-Antwort hier ein Ergebnisandroid:foreground="@drawable/all_round_border_white"

Leider gibt es mir die "nicht schöne" Randecke wie unten abgebildet:

Ich fand es so viel einfacher, dies zu tun:

1) Bearbeiten Sie den Rahmen so, dass der Inhalt darin enthalten ist (mit dem 9patch-Werkzeug).

2) Platzieren Sie das ImageViewInnere a Linearlayoutund legen Sie den gewünschten Rahmenhintergrund oder die gewünschte Farbe als Hintergrund für das Bild fest Linearlayout. Wenn Sie den Frame so einstellen, dass der Inhalt in sich selbst enthalten ist, befindet sich Ihr ImageViewFrame innerhalb des Frames (genau dort, wo Sie den Inhalt mit dem 9patch-Tool festlegen).

Das Folgende ist meine einfachste Lösung für dieses langwierige Problem.

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

In der folgenden Antwort habe ich es gut genug erklärt, bitte schauen Sie sich das auch an!

Ich hoffe, das wird jemand anderem da draußen helfen!

In der gleichen XML, die ich als nächstes verwendet habe:

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

Fügen Sie dann zuerst die gewünschte Hintergrundfarbe als Farbe Ihres Rahmens hinzu

Ändern Sie das cropToPadding in true und fügen Sie anschließend das Padding hinzu.

Dann haben Sie Ihren Rand für Ihre imageView.