Android Development
ActionBar
UI Design
Customize ActionBar
Android Studio

Remove shadow below actionbar

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

The thin shadow under the Android action bar usually comes from elevation or an overlay drawn by the theme. Removing it is simple once you identify which top app bar implementation your screen is using: legacy ActionBar, Toolbar, or MaterialToolbar inside an AppBarLayout.

Identify Where the Shadow Comes From

Older Android themes often drew a windowContentOverlay below the built-in ActionBar. Newer Material-based layouts usually create the shadow through elevation. If you remove the wrong thing, nothing changes, which is why many fixes seem inconsistent across projects.

A quick diagnostic rule is useful:

  • if your layout uses Toolbar or MaterialToolbar, check elevation
  • if your app relies on the theme-provided ActionBar, check theme overlays
  • if the bar sits inside AppBarLayout, check both the toolbar and the parent container

Removing the Shadow from a Toolbar

For modern apps, the most direct fix is setting elevation to zero in XML.

xml
1<com.google.android.material.appbar.AppBarLayout
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:elevation="0dp"
5    app:elevation="0dp">
6
7    <com.google.android.material.appbar.MaterialToolbar
8        android:id="@+id/toolbar"
9        android:layout_width="match_parent"
10        android:layout_height="wrap_content"
11        android:background="@color/white"
12        android:elevation="0dp"
13        app:elevation="0dp"
14        app:title="Profile" />
15
16</com.google.android.material.appbar.AppBarLayout>

Setting both android:elevation and app:elevation helps when you are mixing platform and support-library behavior.

If your toolbar is configured in code, you can also remove the shadow after inflation.

kotlin
1import android.os.Bundle
2import androidx.appcompat.app.AppCompatActivity
3import com.google.android.material.appbar.MaterialToolbar
4
5class MainActivity : AppCompatActivity() {
6    override fun onCreate(savedInstanceState: Bundle?) {
7        super.onCreate(savedInstanceState)
8        setContentView(R.layout.activity_main)
9
10        val toolbar = findViewById<MaterialToolbar>(R.id.toolbar)
11        setSupportActionBar(toolbar)
12        toolbar.elevation = 0f
13    }
14}

Removing the Overlay from the Legacy ActionBar

If the app still uses the theme-managed ActionBar, the shadow may come from windowContentOverlay. In that case, set it to null in the theme.

xml
1<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
2    <item name="android:windowContentOverlay">@null</item>
3    <item name="windowContentOverlay">@null</item>
4</style>

This disables the divider-like overlay that older themes draw under the bar. It is a theme-level change, so it affects every screen using that theme.

When AppBarLayout Re-adds the Effect

Material layouts can still show a shadow-like effect during scrolling because AppBarLayout changes its lifted state. If the bar becomes elevated only after scroll events, disable that behavior rather than only changing the toolbar.

xml
1<com.google.android.material.appbar.AppBarLayout
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:elevation="0dp"
5    app:elevation="0dp"
6    app:liftOnScroll="false">
7
8    <androidx.appcompat.widget.Toolbar
9        android:id="@+id/toolbar"
10        android:layout_width="match_parent"
11        android:layout_height="?attr/actionBarSize"
12        android:elevation="0dp" />
13
14</com.google.android.material.appbar.AppBarLayout>

If a state list animator is reintroducing elevation on newer Android versions, clear it in code.

kotlin
toolbar.stateListAnimator = null
toolbar.elevation = 0f

Choosing the Least Risky Fix

Prefer the narrowest fix that matches your layout.

If only one screen needs a flat top bar, change the specific toolbar or app bar on that screen.

If the whole app should have no action bar shadow, adjust the theme.

If the shadow appears only while scrolling, inspect AppBarLayout behavior before changing global theme settings.

This matters because theme changes are broad and sometimes affect screens you did not intend to touch.

Common Pitfalls

Changing only the toolbar while leaving AppBarLayout elevated is a common reason the shadow appears to “come back.” Check both components.

Confusing ActionBar and Toolbar leads to the wrong fix. They are related concepts, but the implementation path is different.

Applying @null to windowContentOverlay in a project that already uses a Toolbar may do nothing. In that case, elevation is the more likely source.

Forgetting scroll behavior is another common miss. A perfectly flat bar at startup may gain a shadow later because of liftOnScroll or a state animator.

Summary

  • the shadow under the top bar usually comes from elevation or windowContentOverlay
  • for Toolbar and MaterialToolbar, set elevation to zero
  • for the legacy theme-provided ActionBar, remove windowContentOverlay
  • if the effect appears during scrolling, inspect AppBarLayout lift behavior
  • choose the smallest change that matches your actual top bar implementation

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.