DEV Community: Mynor Meza

How to get Darker shadows on Android

Mynor Meza — Thu, 20 Jan 2022 17:15:31 +0000

A blog post about shadows might be an old topic but it never hurts to revisit it and put it out there, especially for newcomers to Android development.

I am sure you know you can get Android components to have a shadow by using the elevation property, this one works on components that have backgrounds such as buttons (if the component doesn't have background there will be no shadow), this shadow is provided to components by the system, that is why there are things that you can't modify from it but others can be changed such as the transparency of the shadow, you can achieve this with the theme attributes called ambientShadowAlpha and spotShadowAlpha these ones are float numbers that are normally below 0.25, which makes the shadow a bit hard to see on light backgrounds. These are theme attributes so you can set them in your theme like this:

<style name="Theme.Shadows" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    ....
    <!-- Customize your theme here. -->
    <item name="android:ambientShadowAlpha">1</item>
    <item name="android:spotShadowAlpha">1</item>
</style>

This is an example of how it looks when modifying theses attributes:

First image: Both attributes to 1, Second image: only ambientShadowAlpha to 1, Third image: only spotShadowAlpha to 1

You can play around with these two attributes and use them as best suits your case, keep in mind that if you apply this to the app theme, it will affect all shadows that are set through elevation in your app/activity, depending on how you are using your themes, and you can't apply this through widgets styles such as buttonStyles or materialButtonStyles in the theme or directly through the style attribute.

If you want to know more about these attributes I'll leave some references at the end of this post.

Changing alpha shadow for specific components

Since you cannot apply these attributes to a layout to affect small part of a screen, there are other 2 attributes that might help you change the shadow transparency of a specific component these are outlineSpotShadowColor and outlineAmbientShadowColor but keep in mind that they only work on API level 28 or higher, with the help of these 2 and setting both ambientShadowAlpha and spotShadowAlpha to 1 you can change the transparency of the shadow for single components by setting a color that already includes transparency.

You can get it like this, by using a helper function to make the color have opacity:

button.outlineAmbientShadowColor = getColorWithAlpha(ContextCompat.getColor(this, R.color.black), 50f)

button.outlineSpotShadowColor = getColorWithAlpha(ContextCompat.getColor(this, R.color.black), 50f)
And of course with this attribute you can change the color of the shadow:
val button2 = findViewById<Button>(R.id.button_test_2)
button2.outlineAmbientShadowColor = getColorWithAlpha(Color.GREEN, 50f)

button2.outlineSpotShadowColor = getColorWithAlpha(Color.GREEN, 50f)

This is the result:

Always remember that there is an attribute called stateListAnimator that controls the shadow of the component, if you ever tried to change the elevation of a button and it doesn't work, check the stateListAnimator of that button. For example, the definition of stateListAnimator for buttons that comes with MaterialTheme (at the the moment of writing this post) sets the enable/base state like this:

<!-- Base state (enabled, not pressed) -->
<item android:state_enabled="true">
  <set>
    <objectAnimator
        android:duration="@integer/mtrl_btn_anim_duration_ms"
        android:propertyName="translationZ"
        android:startDelay="@integer/mtrl_btn_anim_delay_ms"
        android:valueTo="@dimen/mtrl_btn_z"
        android:valueType="floatType"
        tools:ignore="UnusedAttribute"/>
    <objectAnimator
        android:duration="0"
        android:propertyName="elevation"
        android:valueTo="@dimen/mtrl_btn_elevation"
        android:valueType="floatType"/>
  </set>
</item>

The main reason for this attribute is to control the animation based on state, like press, hover, enable state. This sets the elevation to be 2dp and translationZ to be 0dp, you can create your own custom state list animator, and can set it to your buttonStyles, materialButtonStyles, through the app theme or individually to single components. This is not only for buttons there are many components where you can use this attribute.

Custom shadows

If you really need to change shadows for one specific component only, please take a look at this blog post:

Simple custom shadow on Android

Resources & Credits

Shadows seem like a simple subject but there is actually a lot behind it, I'm not going to give deeper explanations but if you want to dig further you can take a look a these blog posts:
Playing with elevation in Android
Mastering Shadows in Android
Colors with Alpha

Simple custom shadow on Android

Mynor Meza — Thu, 20 Jan 2022 17:07:21 +0000

There might be some rare specific cases when elevation is not enough. In this post we are going to see how to create a custom shadow wrapper in a fast-easy way, using Drawables. At the end of this post you will be able to set a custom shadow for a single component such as an image, I will leave a link to the GitHub repo at the end.

The first thing we will need is a wrapper layout that will represent and eventually draw the shadow, sticking to an image example, we want to put the ImageView inside the wrapper layout like this:

<FrameLayout
    android:id="@+id/wrapper"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:padding="14dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/test" />
</FrameLayout>

Once this is set we can start working on the shadow itself, on the fragment or activity we’ll get a reference to the wrapper view and add the shadow using Kotlin code. The main class that provides the shadow is a ShapeDrawable, we are going to create an object of this class and later we will later set it as background for the wrapper view. This class has a function called setShadowLayer, this allows us to set blur, offsets and color of the shadow. The blur option is the one that controls how “big” or how much the shadow spreads around the child view, ideally this should be a bit smaller than the padding we set to the wrapper view so that the shadow does not cut off. So in this case we’ll take the padding and subtract 4dp to get the shadow’s blur value like this:

val shadowColorValue = ContextCompat.getColor(context, R.color.teal)
val shapeDrawable = ShapeDrawable()
shapeDrawable.setTint(shadowColorValue)

val shadowBlur = view.paddingBottom - 4.toDp(resources)

shapeDrawable.paint.setShadowLayer(
    shadowBlur.toFloat(), //blur
    0f, //dx
    0f, //dy
    getColorWithAlpha(shadowColorValue, 0.8f) //color
)

Here we set a color with 80% opacity for the shadow, and set the same color but with no opacity to the shape itself using the setTint function. If we don’t set color for the shape to be the same as the shadow we might get a black color around the image when using dy or dx options.

If we want the shadow to have shape, we can use a RoundRectShape to mold the shadow, this RoundRectShape takes an array with 8 float values that represent the corners of a rect, each corner takes 2 values, you can play around with each corner values in case you want to get a particular shape. If you don’t want the shadow to have a shape or rounded corners you can omit this part.

val radius = 4.toDp(view.context.resources)
val outerRadius = floatArrayOf(
    radius, radius, //top-left
    radius, radius, //top-right
    radius, radius, //bottom-right
    radius, radius  //bottom-left
)
shapeDrawable.shape = RoundRectShape(outerRadius, null, null)

At this point, if we set the shapeDrawable as background to the wrapper layout, the shadow won’t be visible, we need to add inset with the help of a LayerDrawable, ideally the inset will be the same as the padding of the wrapper view, this can’t be smaller than padding of the wrapper view, so that the shapeDrawable itself stays behind the ImageView and only the shadow is visible.

val drawable = LayerDrawable(arrayOf<Drawable>(shapeDrawable))
val inset = view.paddingBottom 
drawable.setLayerInset(
    0,
    inset,
    inset,
    inset,
    inset
)
view.background = drawable

And this is the final result:

If we’d like, we can set padding for the wrapper layout to the sides where we’d like the shadow to be visible, for example if we only want the shadow to be at the bottom and right, we could only set paddingBottom and paddingRight on the wrapper layout, but that is not the best solution, lets see a better option.

Using the offsets options in the setShadowLayer we can control placement of the shadow, but we’ll need to make a few adjustments like reducing the blur and making use of a BlurMaskFilter on the shapeDrawable. This is the code for it:

val shadowBlur = view.paddingBottom - 4.toDp(resources)
val offset = 4.toDp(resources)
shapeDrawable.paint.setShadowLayer(
    shadowBlur - offset, //blur
    offset, //dx
    offset, //dy
    getColorWithAlpha(shadowColorValue, 0.8f) //color
)
val filter = BlurMaskFilter(offset, BlurMaskFilter.Blur.OUTER)
view.setLayerType(View.LAYER_TYPE_SOFTWARE, shapeDrawable.paint)
shapeDrawable.paint.maskFilter = filter

These adjustments are needed so that the shadow doesn’t get cut off and draws nicely below the image, all the rest of the code stays the same and the results look like this:

Conclusion

This is one easy option to create a custom shadow, if you are in the need of a quick solution this can be of help, specially if you only need to apply it in one specific place/view. Although this example is not reusable and might not be the best solution for you, you can play around with it to see if it can suit your needs, there are also other options to create custom shadows that you can find browsing the web. You can explore and use the best for your case!

Source Code