Android change Material elevation shadow color

Question

is it possible to change the shadow color produced by the xml elevation property? I want the shadow be dynamically changed by code.

No, the color of the shadow provided by the framework cannot be changed. — alanv, Mar 22 '15 at 09:13
Since I'm interested for a shadow color on CardView I've found something, but didn't understand how to use it: `https://github.com/gabrielemariotti/cardslib/blob/master/doc/SHADOW.md` and I've also found this: `http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/5.0.1_r1/frameworks/support/v7/cardview/res/values/colors.xml` — Davideas, Jul 08 '15 at 13:57
And this: `https://developer.android.com/training/material/shadows-clipping.html` — Davideas, Jul 08 '15 at 14:25
[According to this post](http://stackoverflow.com/questions/39514252/how-to-set-elevation-color) looks like is not possible to change the color of the shadow — FaBioInsolia, Feb 21 '17 at 18:10

Zielony · Accepted Answer · 2019-01-16T17:47:56.180

I know that this question is very old and probably the author doesn't need the answer anymore. I'll just leave it here so others can find it.

Lollipop's elevation system doesn't support colored shadows.

But, if you need colored shadows, it's possible to get them using Carbon. It's a kind-of support library for Material Design and in the most recent version there is an option to change shadow color. There's a ton of nice designs on Behance featuring colored shadows and I thought it would be nice to have them despite lack of such feature in Android. It's important to note that colored shadows are emulated on all Android versions, on 5.0+ too.

https://github.com/ZieIony/Carbon

The following image and code can be found in Carbon's samples.

Code:

<carbon.widget.LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <carbon.widget.Button
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_margin="@dimen/carbon_padding"
        android:background="#ffffff"
        app:carbon_cornerRadius="2dp"
        app:carbon_elevation="8dp"
        app:carbon_elevationShadowColor="@color/carbon_red_700"/>

</carbon.widget.LinearLayout>

"CardView":

<carbon.widget.LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <carbon.widget.LinearLayout
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:layout_margin="@dimen/carbon_margin"
        android:background="#ffffff"
        app:carbon_cornerRadius="2dp"
        app:carbon_elevation="8dp"
        app:carbon_elevationShadowColor="@color/carbon_red_700">

        <carbon.widget.ImageView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/test_image"/>

        <carbon.widget.TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="test text"/>
    </carbon.widget.LinearLayout>

</carbon.widget.LinearLayout>

Would you maybe be able to elaborate exactly how you use Carbon to create coloured shadows? I am currently not able to make it work. Thanks in advance. — Lars, Jul 30 '18 at 18:13
I added a snippet. You can find the complete example in the repository. It's in the sample app, under 'features/shadow'. If you're experiencing any issues, feel free to open an issue and discuss that there. — Zielony, Jul 31 '18 at 17:17
Thank you a lot. The problem however is i want to use it on a CardView or similar, where i am able to have childviews inside. So a Button won't work in my case. — Lars, Jul 31 '18 at 21:21
@Tony uh, sorry for that. Are you trying to copy required pieces of code? Or would you rather like to move from AppCompat to Carbon? You can always add an issue to my GitHub project to ask for help. — Zielony, Jul 04 '21 at 12:19
app:carbon_elevationShadowColor="@color/carbon_red_700" not working! v0.11.0 — Hamid Zandi, Sep 28 '21 at 11:46

score 49 · Answer 2 · answered Feb 19 '19 at 11:47

49

Starting API 28 (Pie) View#setOutlineAmbientShadowColor(int color) and View#setOutlineSpotShadowColor(int color) are available in the View class.

If you use elevation on your View, you can use both methods to change the color of the shadow.

answered Feb 19 '19 at 11:47

Gauthier

4,798
5
34
44

4

To add to that, these can also be set in you Theme xml as @color/yourAmbientShadow @color/yourSpotShadow – ProjectDelta Jan 14 '21 at 15:46

score 1 · Answer 3 · answered Jun 07 '19 at 13:18

1

You can use Shadow Layout. Check my answer.

answered Jun 07 '19 at 13:18

Roman Soviak

791
2
9
30

score 0 · Answer 4 · answered Apr 11 '22 at 11:57

I know I'm late but I want to share the solution as I searched hard for this issue, and the approved method as above ref: https://stackoverflow.com/a/42717993/18398843 is not working well, these shadows show some random shapes in small size of application.. BTW the solution is You have to use "ComplexView" to create your custom shadow,

dependency: implementation 'com.github.BluRe-CN:ComplexView:v1.1'

XML

<com.blure.complexview.ComplexView
   android:id="@+id/shadow_card_1"
   android:layout_width="@dimen/_65sdp"
   android:layout_height="@dimen/_65sdp"
   android:layout_centerInParent="true"
   app:radius="@dimen/_30sdp"
   app:shadow="true"
   app:shadowAlpha="250"
   app:shadowSpread="2"/>

//this will create the circular shadow for my need you can reduce the radius

Custom View

val shadow = ComplexView(context)
val radii = floatArrayOf(100f, 100f, 100f, 100f, 100f, 100f, 100f, 100f)//customise according to your requirement
val opacity = 150//customise according to your requirement
 shadow.shadow =Shadow(
       2,
       opacity,
       "#96B9BB",
       GradientDrawable.RECTANGLE,
       radii,
       Shadow.Position.CENTER
      )

val param: RelativeLayout.LayoutParams =
                    RelativeLayout.LayoutParams(
                        context.resources.getDimension(R.dimen._160sdp).toInt(),
                        context.resources.getDimension(R.dimen._160sdp).toInt()
                    )
shadow.layoutParams = param
shadow.addView(yourCustomView)

thanks :)

Android change Material elevation shadow color

4 Answers4

Linked