Android
elevation issue
shadow problem
UI design
app development

Android elevation not showing a shadow

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

When android:elevation does not show a shadow, the problem is usually not the property itself. It is typically one of the surrounding conditions: API level, missing outline, clipping by a parent, or a visual design that makes the shadow impossible to notice. Elevation affects drawing order and shadow rendering, but only when the view can produce a visible outline and the environment allows the shadow to be seen.

Elevation Works Only on Android 5.0 and Later

Native elevation shadows require API 21 or newer. On older Android versions, setting elevation does not produce the Material shadow effect.

A simple view definition looks like this:

xml
1<View
2    android:id="@+id/card"
3    android:layout_width="120dp"
4    android:layout_height="80dp"
5    android:background="@drawable/rounded_card"
6    android:elevation="8dp" />

If this is running on an old device, no real elevation shadow will appear. In those cases, developers often use CardView or a custom background drawable for compatibility behavior.

The View Needs an Outline

Android draws elevation shadows from the view outline. If the view has no visible outline, the shadow may not appear at all.

Views with a solid background usually work well. Views with fully transparent backgrounds often do not. For example, a plain FrameLayout with no background may have elevation set correctly but still show no obvious shadow.

A reliable background:

xml
1<!-- res/drawable/rounded_card.xml -->
2<shape xmlns:android="http://schemas.android.com/apk/res/android">
3    <solid android:color="#FFFFFF" />
4    <corners android:radius="12dp" />
5</shape>

Then apply it to the elevated view. The outline comes from the background shape, giving Android something to cast a shadow from.

Parent Clipping Can Hide the Shadow

Even if the view has elevation, a parent container can clip the shadow before it becomes visible. This is common when a parent has:

  • 'clipChildren="true"'
  • 'clipToPadding="true"'
  • tight bounds around the child

If the child sits near the edge of its parent, the shadow may be cut off.

A common fix is:

xml
1<FrameLayout
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:clipChildren="false"
5    android:clipToPadding="false"
6    android:padding="16dp">
7
8    <View
9        android:layout_width="120dp"
10        android:layout_height="80dp"
11        android:background="@drawable/rounded_card"
12        android:elevation="8dp" />
13
14</FrameLayout>

That gives the shadow room to render outside the child bounds.

Flat Designs Can Make the Shadow Look Invisible

Sometimes the shadow is technically there but visually weak:

  • white card on white background
  • low elevation value
  • large bright screen with subtle contrast

Increase contrast or elevation before assuming it is broken. A shadow of 1dp on a bright background may be too subtle to notice.

Programmatic test:

kotlin
val card = findViewById<View>(R.id.card)
card.elevation = 16f
card.translationZ = 4f

translationZ can temporarily raise the apparent depth during interaction, while elevation defines the base depth.

Use Material Components When Appropriate

If the goal is a card-like surface, MaterialCardView or CardView is often easier than a generic view with custom elevation behavior.

xml
1<com.google.android.material.card.MaterialCardView
2    xmlns:android="http://schemas.android.com/apk/res/android"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:layout_margin="16dp"
6    android:elevation="8dp" />

These components are designed for exactly this pattern and often avoid outline or background mistakes that happen with plain containers.

Custom Outlines for Unusual Shapes

If a view has a nonstandard shape, you may need to provide a custom outline. Otherwise, Android may not know how to cast the shadow correctly.

kotlin
view.outlineProvider = ViewOutlineProvider.BACKGROUND
view.clipToOutline = false

For more advanced cases, create a custom ViewOutlineProvider and define the outline bounds explicitly. This is useful when the visual shape and the default rectangular outline do not match.

Z Order Is Not the Same as Visibility

Elevation changes z-order, but shadow visibility still depends on surrounding views. A higher-elevation child can still look flat if:

  • another view covers the shadow
  • the parent background hides it visually
  • the child occupies the entire parent with no outside space for the shadow

So do not treat elevation as a guaranteed "show shadow now" switch. It is one piece of the rendering setup.

Debugging Checklist

When the shadow does not appear, verify these items in order:

  1. device or emulator is API 21 or later
  2. the view has a visible background or outline
  3. parent clipping is not cutting the shadow off
  4. there is enough space around the view for the shadow to render
  5. the shadow has enough contrast to be visible

This sequence catches most real issues quickly.

Common Pitfalls

  • Expecting elevation shadows to work on pre-Lollipop devices without a compatibility component.
  • Setting elevation on a view with no usable background or outline.
  • Letting a parent container clip the shadow outside the child bounds.
  • Using a white surface on a white background and assuming the shadow is missing when it is just too subtle.
  • Confusing elevation and translationZ without understanding that both affect perceived depth differently.

Summary

  • Elevation shadows require Android 5.0 or later and a view with a usable outline.
  • A solid or shaped background often fixes "missing" shadows on plain views.
  • Parent clipping is a very common reason shadows disappear.
  • 'CardView and MaterialCardView are often the simplest solution for card-like surfaces.'
  • If the shadow still seems absent, verify contrast, spacing, and outline behavior before assuming the property is broken.

Course illustration
Course illustration

All Rights Reserved.