I have this LinearLayout
that is going to be placed on the bottom of an activity layout. I want this LinearLayout
to have a 4dp elevation, just like the top toolbar should have, however, since android:elevation
places the shadow below the ui component and this specific component (linearLayout) is going to be on the bottom of the screen, I won't see any elevation at all..
This is my LinearLayout
code, and an image of it with the default elevation implemented:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:weightSum="3" android:background="@android:color/transparent" android:orientation="horizontal" android:elevation="4dp" android:layout_alignParentBottom="true"> <ImageButton android:id="@+id/playButton" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:scaleType="center" android:clickable="true" android:background="@drawable/bottom_toolbar_menu_selector" android:src="@drawable/ic_play" style="?android:attr/borderlessButtonStyle" /> <ImageButton android:id="@+id/stopButton" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:scaleType="center" android:clickable="true" android:background="@drawable/bottom_toolbar_menu_selector" android:src="@drawable/ic_stop" style="?android:attr/borderlessButtonStyle" /> <ImageButton android:id="@+id/bookmarkButton" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:scaleType="center" android:clickable="true" android:background="@drawable/bottom_toolbar_menu_selector" android:src="@drawable/ic_bookmark" style="?android:attr/borderlessButtonStyle" /> </LinearLayout>
Is there a way, using elevation
to place a shadow on top of the ui component? Thanks in advance!
There is no such attribute in Android, to show a shadow. But possible ways to do it are: Add a plain LinearLayout with grey color, over which add your actual layout, with margin at the bottom and right equal to 1 or 2 dp.
Elevation helps users understand the relative importance of each element and focus their attention to the task at hand. The elevation of a view, represented by the Z property, determines the visual appearance of its shadow: views with higher Z values cast larger, softer shadows.
To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1" .
You can't theoretically do it with android:elevation
, in the sense that you can't choose the direction where the shadow is going to be cast.
There are two solutions.
1. Drawables
You could, for instance, put an ImageView
right above your layout and set android:src="@drawable/shadow"
. This should be a vertical GradientDrawable
defined in XML, as explained here.
2. Workaround
While most of the shadow is actually below the view, a subtle shadow is also above. A workaround might be using a very high value for elevation
, like 40dp
: the bottom part is going to be hidden due to your layout, while the top is going to be expanded and look like a common shadow.
In either case, you do not have control over the elevation value in dp
, in the sense that you can't be sure your shadow is equivalent to the one cast by android:elevation=4dp
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With