Android "Elevation" Not Showing a Shadow

Android elevation not showing a shadow

I've been playing around with shadows on Lollipop for a bit and this is what I've found:

1. It appears that a parent ViewGroup's bounds cutoff the shadow of its children for some reason; and
2. shadows set with android:elevation are cutoff by the View's bounds, not the bounds extended through the margin;
3. the right way to get a child view to show shadow is to set padding on the parent and set android:clipToPadding="false" on that parent.

Here's my suggestion to you based on what I know:

1. Set your top-level RelativeLayout to have padding equal to the margins you've set on the relative layout that you want to show shadow;
2. set android:clipToPadding="false" on the same RelativeLayout;
3. Remove the margin from the RelativeLayout that also has elevation set;
4. [EDIT] you may also need to set a non-transparent background color on the child layout that needs elevation.

At the end of the day, your top-level relative layout should look like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/block"
    android:gravity="center"
    android:layout_gravity="center"
    android:background="@color/lightgray"
    android:paddingLeft="40dp"
    android:paddingRight="40dp"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:clipToPadding="false"
    >

The interior relative layout should look like this:

<RelativeLayout
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:background="[some non-transparent color]"
    android:elevation="30dp"
    >

Elevation is not working in ContraintLayout

Somehow elevation does not work until you set any background color to the ViewGroup or View in which you want to set elevation.

Set

android:background="@color/colorWhite"
android:elevation="2dp"

to LinearLayout in your above xml.

Android elevation not showing shadow on Button

The default Button style under Material has a StateListAnimator
that controls the android:elevation and android:translationZ
properties.

_{copied from here}

just add this property to your Button. you can set your own using the android:stateListAnimator property.

android:stateListAnimator="@null"

full code :

        <Button
                android:id="@+id/my_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="20dp"
                android:elevation="2dp"
                android:translationZ="2dp"
                android:stateListAnimator="@null"
                android:background="@android:color/holo_green_light"
                android:text="BUTTON">

UpDate :

for Understanding I set it 10dp..

xml code :

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp">

        <Button
            android:id="@+id/my_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="20dp"
            android:elevation="10dp"
            android:translationZ="10dp"
            android:stateListAnimator="@null"
            android:background="@android:color/holo_green_light"
            android:text="BUTTON"/>

    </RelativeLayout>

Relative Layout elevation not showing shadow

Solved my problem using custom shadows with 9 patch drawable, and using this 9 patch drawable as the background of my Relative Layouts.

This site helped me draw custom shadows with 9 patch drawable:

https://inloop.github.io/shadow4android/

Elevation shadow not visible for Toolbar with Basic Activity

With the XML that you provided, add android:clipChildren="false" to the CoordinatorLayout. This will permit the shadow to be drawn outside the bounds of the AppBarLayout.

The XML now looks like this (simplified here):

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:clipChildren="false">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="16dp"
            app:title="The Toolbar"
            app:titleTextColor="@android:color/white" />

    </com.google.android.material.appbar.AppBarLayout>

This is really going to be enough for the shadow to be displayed. The problem that I had here was that the shadow was so faint on API 28 and 29 that I could not distinguish it from the toolbar.

To make the shadow more visible, create a styles file for v28 and add the following to the application's theme:

<item name="android:spotShadowAlpha">0.5</item>

It seems that the default alpha value is too faint to be readily seen. This value corrects the problem.

"Playing with elevation in Android (part 1)" does a good job of explaining this issue.

The layout now looks like this on an API 29 emulator:

Elevation shadow won't show on device only on preview

The elevation property is supported only on Android 5.0+. So I think you are running your app on older device.

Here is a solution, you can use CardView as an alternative to RelativeLayout.

Add dependency in your build.gradle()app

compile 'com.android.support:cardview-v7:26.0.0'

Then use it in your xml file like this

<android.support.v7.widget.CardView
  android:id="@+id/media_card_view"
  android:layout_width="300dp"
  android:layout_height="300dp"
  card_view:cardBackgroundColor="@android:color/white"
  card_view:cardElevation="30dp"
  card_view:cardUseCompatPadding="true">
   ...
</android.support.v7.widget.CardView>

Or you can make your own shadow using LayerList, create a file called shadow.xml and place it in your Drawable folder

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--the shadow comes from here-->
<item
    android:bottom="0dp"
    android:drawable="@android:drawable/dialog_holo_light_frame"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">

</item>

<item
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <!--whatever you want in the background, here i preferred solid white -->
    <shape android:shape="rectangle">
        <solid android:color="@android:color/white" />

    </shape>
</item>
</layer-list>

Then you assign it to your view like this

android:background="@drawable/shadow"

Elevation on Material Toolbar doesn't produce a shadow

You have to add android:clipChildren="false" to the parent view.

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    android:clipChildren="false">

    <com.google.android.material.appbar.AppBarLayout>

        <androidx.appcompat.widget.Toolbar
           app:elevation="8dp"
        />

    </com.google.android.material.appbar.AppBarLayout>

Also by default an alpha channel is applied to the shadow for api28+.
You can change this value adding in your app theme the android:spotShadowAlpha attribute (only for api28+):

<!--Alpha value of the spot shadow projected by elevated views, between 0 and 1.-->
<item name="android:spotShadowAlpha">0.x</item>

Android elevation property not working

Make sure that the background for the container holding the FrameLayout is not transparent.

Elevation / shadow not working on my app

I was able to fix my erro by removing this on my Android Manifest:

        android:hardwareAccelerated="false"

---

Related Topics