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?

Solution 1

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.

Solution 2

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.

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

Solution 4

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>

Solution 5

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.

View more solutions

Comments

[ban-geoengineering]

How is card_view declared?

[ban-geoengineering]

...same as how the app xmlns is usually declared.

[tmm1]

android:elevation does not appear to work on ImageView

[Avinash Verma]

Elevation was added in api 21. You may be using lower version. Use card layout for lower api version.

[tmm1]

I'm using API 24. Elevation seems to work fine on most things, but not on ImageView.

[Piotr Aleksander Chmielowski]

What is bitmap?

[Avinash Verma]

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]

get bitmap from image. Call this after image is completly loaded or you will get null. Bitmap bm=((BitmapDrawable)imageView.getDrawable()).getBitmap();

[user924]

What about circle ImageView?

[Mahendran Sakkarai]

@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 in the source for more info. I'll take some time to update the answer.

[MDT]

did you try to understand what OP is asking ?