How To Display Border To Imageview?

Question

Friends How To Display Border To Imageview ?

I Want To Result Like Mobile gallery all image display with border.

plz give me ans thanks for advance....

Answer 1

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

1. create a new layer drawable file (image_border.xml),
2. modify/create your styles.xml file
3. modify/create your colors.xml file
4. 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" />

Answer 2

You can use this XML file as a drawable instead of multiple files, but this file is placed in drawable folder. In ImageView use this XML file as a background drawable, like: android:background="@drawable/following code file name".

I hope this is helpful for you.

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

Answer 3

I tried all the above solutions but they didn't work for me! So I figured out a simple solution to this! :-)

I remember that I read about FrameLayout of Android in the following article saying that it helps us to stack up our UI elements on top of each other in the same order we add them up.

Solution:

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

Preview:

And that's it. You will get the following like imageView!

Pros and Cons:

I think this is pretty easy solution to be used in anywhere else and it's all the things you do sits in one single place so easier to modify it. However I don't like to having to add two ImageViews.