Elevation not working for ImageView

Question

Elevation for ImageView is not working. I declared ImageView in XML like this:

<ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:elevation="10dp"
        android:src="@drawable/youtube" />

What else should I do for elevation to work properly for ImageView?

it's working fine right?what is the problem? – RaMeSh Jun 04 '15 at 10:03 — RaMeSh, Jun 04 '15 at 10:03
edit your question with full xml file. – RaMeSh Jun 04 '15 at 10:06 — RaMeSh, Jun 04 '15 at 10:06

score 42 · Answer 1 · answered Jun 04 '15 at 10:14

42

The elevation shadow is derived from the background drawable of a View. If your ImageView has no background, you'll see no shadow.

If you want to change that behavior, you need to build your own ViewOutlineProvider and call View.setOutlineProvider() to set it (and this is not trivial).

answered Jun 04 '15 at 10:14

BladeCoder

12,779
3
59
51

So, you can just add a background too. – Kevin Robatel Sep 07 '16 at 09:47
@BladeCoder, What value need to set in outlineProvider, Is it background, bounds, paddedBounds or none – Naveen Kumar M Jan 03 '18 at 07:09
@Naveen Kumar M None, you need to extend the ViewOutlineProvider class and override the getOutline() method. – BladeCoder Jan 05 '18 at 03:25
@BladeCoder, Okay Thanks! – Naveen Kumar M Jan 05 '18 at 04:17
Of course if you just want the shadow to fill the whole view, you can use BOUNDS or PADDED_BOUNDS. – BladeCoder Jan 05 '18 at 11:51
13

Applying `android:outlineProvider="bounds"` is enough to see the shadow. – azizbekian Nov 11 '18 at 11:53
@BladeCoder would you please share some example how to add shadow effect to imageView , when background drawable set to imageView . – Vivek Aug 25 '20 at 18:31
4

Let me recap: - If you want the shadow to follow the bounds of a translucent image, you need to set the image as background or provide a custom ViewOutlineProvider in code. - If your image is fully opaque and has the same shape as your ImageView (rectangular), then you can use `android:outlineProvider="bounds"` – BladeCoder Aug 27 '20 at 12:26

score 16 · Answer 2 · answered Dec 29 '17 at 06:43

For displaying a round Image with SHADOW with elevation attribute, I created a round drawable WITHOUT SHADOW as shown below :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />
        </shape>
    </item>

</layer-list>

Use this drawable as background in your ImageView as shown below :

    <ImageView
        android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_shape"
        android:elevation="5dp"
        android:src="@drawable/center" />

This will display ImageView with shadow.

One question that might be arising in your mind is why to use xml drawable. As mentioned by other developers on various answers to this question, shadow is formed from background and a bordered background to be more specific. Xml drawable helps us in creating a bordered background from which elevation attribute can create shadow.

Thank you, this was the only solution that worked for me – bug56 Sep 20 '18 at 08:11 — bug56, Sep 20 '18 at 08:11

Shyam Kumar · Answer 3 · 2018-11-21T06:16:57.320

12

Works in all latest versions

Use CardView as parent layout. Use android:background="@drawable/your_img" instead of android:src="@drawable/your_img" in ImageView.

<android.support.v7.widget.CardView
    android:layout_gravity="center_horizontal"        
    app:cardElevation="5dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView       
        android:id="@+id/image"
        android:background="@drawable/your_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null" />

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

edited Nov 21 '18 at 06:16

answered Feb 10 '17 at 10:45

Shyam Kumar

909
11
12

12

what if image is circle ? – Jaimin Modi May 15 '18 at 11:18
if the image is a circle and if you know the radius of the image, you can set app:cardCornerRadius to that value. – vikasreddy Dec 13 '18 at 18:24
This produces a nasty bug in some Android 6 devices. The image is drawn in two steps: first, the image is drawn as a square and then it flickers and the image appears inside the CardView. And while you leave the screen, the CardView is lost and you see the image as a square again as soon as you press the back button. My solution was to use Glide to make the image round and then apply a circular background, as @Tarun specifies in the answer below. – Juan José Melero Gómez Dec 18 '19 at 09:24

score 8 · Answer 4 · answered May 01 '19 at 22:46

8

As an addition to the clarification of BladeCoder's answer: applying android:outlineProvider="bounds" to the ImageView will result in the shadow to be displayed.

answered May 01 '19 at 22:46

azizbekian

60,783
13
169
249

simple and easy. thanks – Sam Jan 05 '22 at 14:35

score 3 · Answer 5 · answered Dec 23 '17 at 14:18

If you are using CardView, be sure to leave the CardView background transparent.

<android.support.v7.widget.CardView
                android:layout_gravity="center_horizontal"
                app:cardElevation="@dimen/cardview_default_elevation"
                app:cardBackgroundColor="@android:color/transparent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
<ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:src="@drawable/youtube" />

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

score 2 · Answer 6 · answered Dec 12 '19 at 17:38

2

The elevation attribute will be simply ignored if your minSdk version is less than 21. Either change that or try the method explained over here https://stackoverflow.com/a/28980908/7184172

answered Dec 12 '19 at 17:38

Anubhav Pandey

1,285
1
14
18

score 0 · Answer 7 · edited Jun 04 '15 at 11:42

0

On Lollipop it works setting elevation. For pre-Lollipop, you need to implement shadows by yourself. Support-v4 has ViewCompat.setElevation(view, value) method for by if you check the sources there is no implementation. (at least, at the time of writing).

edited Jun 04 '15 at 11:42

Neha Shukla

3,572
5
38
69

answered Jun 04 '15 at 10:18

Mohammad Rababah

1,730
4
17
32

Bhavin Shah · Answer 8 · 2015-08-11T07:24:51.987

0

Instead of using android:src you need to change to android:background for displaying shadows.

 <ImageView
    android:id="@+id/image"
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:elevation="10dp"
    android:background="@drawable/youtube" />

edited Aug 11 '15 at 07:24

answered Aug 11 '15 at 07:19

Bhavin Shah

361
4
11

12

How come I don't see any shadow? Tested on 5.1.1, with wrap_content for both width and height, and I've even tried android:outlineProvider="background" . Nothing shows elevation on the imageView's content. – android developer Mar 16 '16 at 15:46

Elevation not working for ImageView

8 Answers8

Linked