Android change Material elevation shadow color
Solution 1
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>
Solution 2
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.
Solution 3
You can use Shadow Layout. Check my answer.
Broadwell
Updated on July 09, 2022Comments
-
Broadwell almost 2 years
is it possible to change the shadow color produced by the xml elevation property? I want the shadow be dynamically changed by code.
-
Lars almost 6 yearsWould 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.
-
Zielony almost 6 yearsI 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.
-
Lars almost 6 yearsThank 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.
-
ProjectDelta over 3 yearsTo add to that, these can also be set in you Theme xml as <item name="android:outlineAmbientShadowColor">@color/yourAmbientShadow</item> <item name="android:outlineSpotShadowColor">@color/yourSpotShadow</item>
-
Tony almost 3 years@Zielony your repo is hard to integrate into my projects :(
-
Zielony almost 3 years@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.
-
Hamid Zandi over 2 yearsapp:carbon_elevationShadowColor="@color/carbon_red_700" not working! v0.11.0