How to change direction of android elevation shadow?

Question

I have FrameLayout with android:elevation="4dp". Shadow of this elevation directed down. I want change direction of shadow to up.

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:elevation="10dp"
    android:layout_marginBottom="100dp"
    android:background="@color/ColorPrimary"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">
</FrameLayout>

Orthoclase

Wouldn't that be inconsistent with the other shadows on the UI – Bullbat

instead of elevation you can create custom shadow background using xml file. Here is sample idea -#24095723 I think both are ideally same, But way of doing is different. – Mcmillan

Answer 1

I consider this method is the best solution: Android Bottom Navigation Bar with drop shadow Thanks, Alexander Bilchuk.

Solution:

You can draw your own shadow just above the view using simple View and its background:

<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_above="@id/bottom_bar"
    android:background="@drawable/shadow"/>

drawable/shadow.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#1F000000"
        android:endColor="@android:color/transparent"
        android:angle="90" />
</shape>

Also, there are no compatibility issues if use this approach.

Orthoclase

when I do this, I see a bit of a margin between the added shadow and button and it doesn't look like a shadow and doesn't blend in when scrolling around it. – Burgage

@Burgage this is because the view really occupies the layout space and appears its background, the space cannot be transport by other view under it. – Phrixus

Answer 2

The view drop shadow can be translated, or scaled in x and y direction and more by changing the outline provider of the view as detailed in this post.

Rinse

Would you mind demonstrate your answer by showing your code instead of posting link to someone post? – Angelika

Don't post answers that contain a link to a resource without including the relevant content as well. – Defunct

Answer 3

As far as I'm concerned, you don't change the shadow by yourself. In Androids Material Design, the shadow is automatically determined by the amount you elevate a element.

According to this question https://graphicdesign.stackexchange.com/questions/80644/where-are-the-light-sources-located-in-material-design the light source is

45 degrees altitude and 90 degrees angle

You really shouldn't use different shadows as it will destroy the overall consistency of material design. Then only thing you should do is elevate your elements. Maybe you should re-read the Material Design Guidlines: https://material.io/guidelines/material-design/environment.html#environment-light-shadow

Role

this answer should be incorrect, you are only giving your opinion and no response, I didn't understand if it cant be done or you are against changing the light source position – Leaper

The question involved the android:elevation and the material design guidlines state you should not alter the shadows yourself to match the overall style. If you still want to do it, you might be better off with not using android:elevation and instead create your own drop shadow – Role

ok, thanks, but i still dont understand if its possible to change the 3d "position" of if the "light source", or if the native shadow is "fake", material.io/guidelines/resources/shadows.html – Leaper

The "position" of the "light source" is fixed and might only be changed by google. The shadow is actually simple drop shadow and not some fancy 3d rendering with a real lightsource. Each level of elevation has slightly different values so that it looks like something would come closer to the viewer when the elevation level is increased. The reality is that only the spread and intensity of the shadow is modified. Nothing is really moved. If you need to change the "direction" of the "lightsource", you should implement your own drop shadow to match the style of your "lightsource" – Role

That is incorrect you can put the shadow wherever you want in by just changing the outline provider.Offset the outline provider up and the shadow moves up. The shadow is just a layer drawn before the view so why would you say you cannot change it. – Rinse

Where did the OP say he was adhering to material design? He just said he wanted to change the direction of the elevation shadow - which implies that he is implementing a different design language. – Shermanshermie