How To Display Border To Imageview?

android, android-imageview, border, image, imageview

Solution

You can create a resource (layer drawable xml) for your `ImageView`'s "border" (actually background), and declare in your `theme` that the `ImageView`'s background resource is the drawable xml.

If you need this "border" to be changed based on the `ImageView`'s state (`focused`, `selected`, etc.), then you should create more layer drawables, and put them together into a selector xml (state drawable). Then in your theme you should set the `ImageView`'s background to be this `selector.xml`.

Update Below is a sample of how to specify a simple border to your images, that will result in

You have to

- create a new layer drawable file (`image_border.xml`),

- modify/create your `styles.xml` file

- modify/create your `colors.xml` file

- modify your layout xml file (or your code) to apply the style to the `ImageView`.

res/drawable/image_border.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="90" 
                android:startColor="@color/image_border_start" 
                android:centerColor="@color/image_border_center"
                android:endColor="@color/image_border_end" />
        </shape>
    </item>
    <item android:top="2dp" android:left="2dp" 
        android:right="2dp" android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/default_back_color" />
        </shape>
    </item>
</layer-list>

res/values/styles.xml Add the following lines:

<style name="myImageView">
    <!-- 3dp so the background border to be visible -->
    <item name="android:padding">3dp</item>
    <item name="android:background">@drawable/image_border</item>
    <item name="android:scaleType">fitCenter</item>
</style>

res/values/colors.xml Add the following lines:

<color name="image_border_start">#40990000</color>
<color name="image_border_end">#FF660000</color>
<color name="image_border_center">#FFFF3333</color>

And finally specify the style of your `ImageView` in your layout xml:

<ImageView android:id="@+id/my_image" 
    android:layout_width="100dp" android:layout_height="100dp"
    android:src="@drawable/efteling"
    style="@style/myImageView" />

Problem

Original source