Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android change Material elevation shadow color

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

like image 695
Broadwell Avatar asked Mar 21 '15 19:03

Broadwell


People also ask

Can we change elevation color in Android?

No, the color of the shadow provided by the framework cannot be changed.

How do you set the color in elevation?

Unfortunately, the color of the shadow produced by Android's setElevation cannot be changed. Also, their Material Design guidelines around the web like here don't seem to indicate that you can change the color. In addition, box shadows in React Native are also not supported on Android, based on this.

How do I change the color of my card shadow?

You need to use a drawable background ( shadow. xml ) in the parent layout which is looking like a shadow. You can replace FF46A9 in shadow. xml to change the color of shadow.

What is shadow elevation?

Elevation helps users understand the relative importance of each element and focus their attention to the task at hand. The elevation of a view, represented by the Z property, determines the visual appearance of its shadow: views with higher Z values cast larger, softer shadows.


2 Answers

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.

enter image description here

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> 
like image 118
Zielony Avatar answered Sep 20 '22 05:09

Zielony


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.

like image 21
Gauthier Avatar answered Sep 22 '22 05:09

Gauthier