34

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>
rnrneverdies
  • 13,347
  • 9
  • 57
  • 89
Valery Miller
  • 614
  • 1
  • 7
  • 13
  • Wouldn't that be inconsistent with the other shadows on the UI – Henry Oct 31 '15 at 08:50
  • instead of elevation you can create custom shadow background using xml file. Here is sample idea -http://stackoverflow.com/questions/24095223/android-linearlayout-add-border-with-shadow-around-a-linearlayout I think both are ideally same, But way of doing is different. – Keyur Thumar Apr 04 '17 at 04:02

3 Answers3

19

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.

Valery Miller
  • 614
  • 1
  • 7
  • 13
  • 1
    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. – reactor Nov 16 '19 at 02:21
  • @reactor this is because the view really occupies the layout space and appears its background, the space cannot be transport by other view under it. – Shrdi Jan 17 '20 at 03:27
6

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.

Mihai
  • 366
  • 5
  • 8
  • 3
    Would you mind demonstrate your answer by showing your code instead of posting link to someone post? – glagarto Oct 26 '19 at 16:38
0

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

Community
  • 1
  • 1
xxtesaxx
  • 5,150
  • 2
  • 26
  • 42
  • 10
    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 – xanexpt Dec 14 '17 at 16:04
  • 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 – xxtesaxx Dec 14 '17 at 16:51
  • 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", https://material.io/guidelines/resources/shadows.html – xanexpt Dec 14 '17 at 17:56
  • 1
    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" – xxtesaxx Dec 15 '17 at 03:59
  • 1
    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. – Mihai Apr 03 '19 at 13:20