Add Frame or Border to ImageView and Drop-Shadow

Question

What I'm trying to do will work better with an example image. As you can see below I have a grey background, ontop of that sits a container with some padding containing an image. The container also has a slight dropshadow to it.

What I want to know, is if there's so non-painstaking way of doing this in my layout.xml? In a normal HTML document this would've been easy. But since this is for a mobile app and for a number of screen resolutions and so on, it's proving a bit difficult.

Any advice?

enter image description here

Edit: I eventually settled using a 9patch image. Everyting went really smooth in the creation of it but when I actually use it in my app I see these dark stripes on the right and bottom of the image. The dropshadow seems to work, it's a very light dropshadow.. but those darn stripes??

enter image description here

score 17 · Answer 1 · answered May 29 '12 at 08:35

You can provide a border to a view by writing an xml file (say editBorder.xml) in drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <stroke 
        android:width="5dp"
        android:color="#EBDDE2" />

    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="4dp" />

    <gradient
        android:centerColor="@color/white" 
        android:endColor="@color/white"
        android:startColor="@color/white" />

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

</shape>

and to provide this border, use statement in ImageView as android:background="@drawable/editBorder"

This should solve your problem. :)

thanks this looks really promising, I just tried this but got an exception saying "Failed to convert (at)drawable/editBorder into a drawable". Any ideas? — , May 29 '12 at 08:59
Try: Clean your code, compile and run again. Or, as you cannot give a name of xml file with uppercase letter, give edit_border.xml — Shrikant Ballal, May 29 '12 at 09:05

Mohammed Azharuddin Shaikh · Answer 2 · 2012-05-29T08:34:28.490

5

ImageView having two property android:background and android:src

http://developer.android.com/reference/android/widget/ImageView.html

Create a blank white frame with drop shadow(Photoshop recommended).

So just do this

<ImageView android:id="@+id/imageView"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@drawable/image"
     android:background="@drawable/whiteFrame" 
     android:padding="10dp" >
</ImageView>

edited May 29 '12 at 08:34

answered May 29 '12 at 08:28

Mohammed Azharuddin Shaikh

41,633
14
96
115

Thank you very much appreciated. Would this still work on different screen densities though? Because the image and the whiteFrame wouldn't be able to resize on different phones with different resolutions, correct? – May 29 '12 at 08:39
Use nine patch image, see @orchidrudra's provided link. – Mohammed Azharuddin Shaikh May 29 '12 at 08:44
please can you have a look again at my edited post and see the result I get with the 9patch? It seems that there are these dark stripes on the right and bottom of the image. Don't understand why they're there? – May 29 '12 at 10:27

score 5 · Accepted Answer · edited May 23 '17 at 11:53

5

This can be done with proper padding and 9 patch image. See this link, may be it can help you.

edited May 23 '17 at 11:53

Community

1
1

answered May 29 '12 at 08:31

orchidrudra

1,172
1
12
30

Is is most certainly the best way to go about it. Thanks! – May 29 '12 at 09:19
please can you have a look again at my edited post and see the result I get with the 9patch? It seems that there are these dark stripes on the right and bottom of the image. Don't understand why they're there? – May 29 '12 at 10:27
Can you post your 9 patch file, it seems that there are some problem with that 9 patch. – orchidrudra May 29 '12 at 10:44
Ah never mind, I see what the problem was. I set the imageView to a static size e.g. 100dp. When I changed it to wrap_content the rendering problem went away, looking good now – May 29 '12 at 11:01
Interesting, but what if you need to set it to a fixed size? I'm having the same problem and wondering why it's different fixed vs. wrap_content – phreakhead Jun 19 '13 at 21:16
Nevermind, I figured it out. My 9patch was bigger than the ImageView so I was getting weird stripes. – phreakhead Jun 19 '13 at 22:18

score -1 · Answer 4 · answered Oct 19 '18 at 18:15

-1

I found this imageView . It's may good for you

answered Oct 19 '18 at 18:15

Stevie

401
4
13

Add Frame or Border to ImageView and Drop-Shadow

4 Answers4

Linked