How to apply shadow to ImageView?

Question

I want to apply shadow to the ImageView. When I'm applying shadow to a TextView I'm getting it but same it's not getting to ImageView. How can I solve this problem?

I may be wrong, but what you are using is a "text shadow" on `TextView`. This is fine. What you asking for is a "box shadow" on `ImageView`. I don't believe this exists. You'd need to build a custom background, that looked like a shadow to achieve this. — Matthew Rudy, Dec 02 '11 at 08:07
possible duplicate of [Custom ImageView with drop shadow](http://stackoverflow.com/questions/3693234/custom-imageview-with-drop-shadow) — Sergey Glotov, Mar 21 '12 at 12:14
I think you are looking for this: http://stackoverflow.com/questions/3693234/custom-imageview-with-drop-shadow I hope this should help you. — Rohit Mandiwal, Dec 02 '11 at 08:06
Seems like `android:elevation` works only if you have `android:background` defined. Without defining both I get no shadow at all. — Idrizi.A, Nov 09 '20 at 14:56

score 9 · Answer 1 · answered Oct 06 '15 at 18:46

9

We can also use CardView which provides a rounded corner background and shadow. To use that you need to add the v7 CardView library as a dependency to the project in the build.gradle like below.

dependencies {
    compile 'com.android.support:cardview-v7:23.0.1'
    -------
}

Note: Change 23.0.1 in the above line with the respected version.

So I surrounded the ImageView with CardView to make shadow like below.

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="@android:color/white">

    <ImageView
        android:id="@+id/dish_image"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:adjustViewBounds="true" />

</android.support.v7.widget.CardView>

It'll add a shadow around the image.

Note: I don't know whether it is a good workaround. I am a beginner. I tried to implement the CardView which gives an idea to implement the same for this. If it is not good please update me with the reason.

answered Oct 06 '15 at 18:46

Mahendran Sakkarai

8,381
6
44
66

3

How is `card_view` declared? – ban-geoengineering Jan 18 '17 at 11:34
...same as how the `app` xmlns is usually declared. – ban-geoengineering Jan 18 '17 at 11:40
What about circle ImageView? – user924 Dec 17 '18 at 11:46
@user924 I'm seeing this answer after a long time :-). Cardview internally using elevation for higher end devices. For lower end devices it's using a custom drawing on canvas. So better [refer here](https://android.googlesource.com/platform/frameworks/support/+/bc943f7/v7/cardview/src/android/support/v7/widget/CardView.java) in the source for more info. I'll take some time to update the answer. – Mahendran Sakkarai Dec 17 '18 at 18:58

score 3 · Answer 2 · edited May 23 '17 at 12:25

3

This is taken from Romain Guy's presentation at Devoxx, pdf found here.

Paint mShadow = new Paint(); 
// radius=10, y-offset=2, color=black 
mShadow.setShadowLayer(10.0f, 0.0f, 2.0f, 0xFF000000); 
// in onDraw(Canvas) 
canvas.drawBitmap(bitmap, 0.0f, 0.0f, mShadow);

Hope this helps.

NOTES

Don't forget for Honeycomb and above you need to invoke setLayerType(LAYER_TYPE_SOFTWARE, mShadow), otherwise you will not see your shadow! (@Dmitriy_Boichenko)

SetShadowLayer does not work with hardware acceleration unfortunately so it greatly reduces performances (@Matt Wear)

Answer Taken from Here

For Api greater than 21. You can try in xml in imageview or Button : Read here at developer site

android:elevation="5dp"

edited May 23 '17 at 12:25

Community

1
1

answered Feb 15 '16 at 11:27

Avinash Verma

2,572
1
18
22

23

`android:elevation` does not appear to work on ImageView – tmm1 Jan 09 '18 at 23:37
Elevation was added in api 21. You may be using lower version. Use card layout for lower api version. – Avinash Verma Jan 10 '18 at 07:16
6

I'm using API 24. Elevation seems to work fine on most things, but not on ImageView. – tmm1 Jan 10 '18 at 16:09
2

What is `bitmap`? – Piotr Aleksander Chmielowski Dec 16 '18 at 15:38
Your imageview will have match parent height and width, try giving margin or padding. As elevation will be hidden behind the other layout. – Avinash Verma Dec 17 '18 at 06:30
get bitmap from image. Call this after image is completly loaded or you will get null. Bitmap bm=((BitmapDrawable)imageView.getDrawable()).getBitmap(); – Avinash Verma Dec 17 '18 at 06:32

score 3 · Answer 3 · answered Jul 13 '16 at 08:11

Create a file shadow_rect.xml

<?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="@android:color/darker_gray" />
            <corners android:radius="0dp"/>
        </shape>
    </item>
    <item android:right="1dp"  android:bottom="2dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="1dp"/>
        </shape>
    </item>

</layer-list>

And the use this as android:background="@drawable/shadow_rect within your Imageview.

score 2 · Answer 4 · answered Jan 25 '20 at 06:05

2

ImageView

  <ImageView
     ......
  android:elevation="2dp"
  android:background="@drawable/myrect"/>

The background drawable is defined as a rectangle with rounded corners:

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

answered Jan 25 '20 at 06:05

Suresh Suthar

794
8
15

4

did you try to understand what OP is asking ? – MDT Feb 02 '20 at 11:08

stdout · Answer 5 · 2016-02-15T12:06:36.220

1

You can create a layer list drawable and put your two items (drawables) in it for an image and your shadow.

Your shadow item's position & content might change according to where you want to apply the shadow (top, left, right, both right & left etc) and style of your shadow.

edited Feb 15 '16 at 12:06

answered Feb 15 '16 at 11:46

stdout

2,471
2
31
40

score 0 · Answer 6 · answered Oct 28 '20 at 14:40

you can use the proprety outlineSpotShadowColor

to put the shadow to true try setOutlineSpotShadowColor with @color/black and increase the elevation to 12dp

to put the shadow to false setOutlineSpotShadowColor with @android:color/transparent and decrease the elevation

score 0 · Answer 7 · answered Jan 10 '23 at 07:01

CardView is the perfect solution for this but if you don't want to use then you can use the XML layer. Here I am applying shadow 4th side of the image.

drawable/bg_shadow.xml: If you need more width border then you can change/remove the value of android:right android:left android:top android:bottom

<?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="#e5e5e5" />
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item android:right=".5dp" android:left=".5dp" android:top=".5dp" android:bottom=".5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>

</layer-list>

On the layout, you have to use it as a background, and android:elevation will give a light style. To avoid crop you can use android:layout_margin.

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_gravity="center"
        android:elevation="2dp"
        android:layout_margin="2dp"
        android:background="@drawable/bg_shadow"
        android:src="@drawable/ic_image" />

How to apply shadow to ImageView?

7 Answers7

Linked