1

I'm having an issue in Android when adding elevation to a View. As we can see, in the first example, the shadow casted by adding elevation is the same size for both rectangles. In the second example however, the shadow for the grey rectangle is bigger than the shadow for the blue rectangle.

enter image description here

The styling is exactly the same, however the only difference is the size of the rectangles.

(written in React Native)

Rectangle A:

<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
  <View style={{elevation: 5, width: 140, height: 90, backgroundColor: "#d9d9d9"}} />
  <View style={{elevation: 5, width: 140, height: 60, backgroundColor: "#00aeef"}} />        
</View>

Rectangle B:

<View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
  <View style={{elevation: 5, width: 220, height: 90, backgroundColor: "#d9d9d9"}} />
  <View style={{elevation: 5, width: 60, height: 60, backgroundColor: "#00aeef"}} />        
</View>

Adding a shadow to a parent component is not a solution since the component are not the same height. In such a case shadow will be visible above the blue component, and it just doesn't look right.

Also increasing the value of elevation of the blue rectangle is not a solution, since increasing the value of elevation spreads the shadow, making it less visible.

Any ideas how I can make the shadows look alike when both the component have different sizes?

Amaros
  • 503
  • 5
  • 20
  • I know that is not an efficient way, but why don't you put an if condition in elevation and decrease it in case of bigger width? – Saeid Aug 09 '19 at 15:10

0 Answers0