I'm working with material design and I faced the problem I can't solve. It's about the shadows/elevation.
Here we can read about the shadows and elevations in Material Design
https://developer.android.com/training/material/shadows-clipping.html#Shadows
But we can use these features only in lollipop and higher.
And what about the pre-lollipop devices? If I want to create the app which could be used at pre-lollipop devices then I can't use, for example
android:elevation="2dp"
Am I right?
If so then all I can do - it's using the design drawables which already include their shadows.
And here's another issue that I can't get.
For example, the designer gives me psd with some design. Imagine it looks like this
As you can see, top margin of the panel is 448px. We can easily get this margin value using the Photoshop.
But when I extracted this panel with its shadow then I discover that shadow by itself takes 10 px at the top of the panel
That 448px top margin doesn't count the shadow.
Obviously I can't just put panel.png on my some_layout.xml and set the margin top as 448px(298.67dp) because this drawable includes the shadow. It seems I should consider the shadow length and I should deduct this length from the top margin (448-10=438px=292dp).
Is this reasoning correct? I just can't believe it. This way seems to be too complicated. Maybe more effective practice exists?
According to shadow in Pre Lollipop devices
For Android 5.0 and above : AppBarLayout automatically provides/gives
shadow in the layout. You can also increase the elevation of the
AppBarLayout by android:elevation="4dp"
For Pre-Lollipop : You can use the following link:
http://blog.grafixartist.com/add-a-toolbar-elevation-on-pre-lollipop/
Note: Toolbar also supports elevation to it, using
android:elevation="4dp"
Read more: Add elevation/shadow on toolbar for pre-lollipop devices
According to elevation in Pre Lollipop devices
You can't mimic the elevation on pre-Lollipop with a official method.
You can use some drawables to make the shadow in your component.
Google uses this way in CardView for example.
The ViewCompat.setElevation(View, int) currently creates the shadow
only on API21+. If you check the code behind, this method calls:
API 21+:
#Override
public void setElevation(View view, float elevation) {
ViewCompatLollipop.setElevation(view, elevation);
}
API < 21
#Override
public void setElevation(View view, float elevation) {
}
Read more: How to implement the Material-design Elevation for Pre-lollipop
EDIT: As #geek90 suggest visit also this repo: http://github.com/navasmdc/MaterialDesignLibrary
It frustrated me too. I didn't like making shadows with gradients. I dove into the documentation, found how is the Lollipop's implementation done and coded that from scratch for older devices.
My implementation is called Carbon. It's a Material Design implementation with support for dynamic, automatic shadows. No need to add any kind of margin or gradient - just specify elevation for a view and get shadows on all SDKs.
https://github.com/ZieIony/Carbon
Read more about the method here: How to implement the Material-design Elevation for Pre-lollipop
Related
Want this kind of shadow effect with android card view except for white background with cardview property, neither use with the canvas draw mechanism nor 9 patch image mechanism
want to use only drawable shape or cardview properties. TIA
EDIT: There is this github project you can use to get custom shadow for CardView. Just implement it in your project and use this instead of androidx components. Link: https://github.com/nvl2val/CardView/tree/master
2nd EDIT: Also another workaround for this issue. Read this thread: Android change Material elevation shadow color
I don't really get your question but CardView itself has a lot of properties you can play with. Check this documentation for more: https://developer.android.com/reference/androidx/cardview/widget/CardView
Using elevation will give you shadow by default so if you don't want a shadow on objects with a white background you need to set the elevation to 0. Here you can play with
android:elevation = "10dp"
app:cardElevation = "10dp"
and see which one does the job better for you. Also, try adding some padding to your parent layout so that CardView has some space around. All this and maybe more you can find in this answer: https://stackoverflow.com/a/46374054/14759470
I'm using API 19, and I have the following shadow showing up over my DrawerLayout in newer versions of android (API 22 for example).
Screenshot
I want it gone, and I can't figure out how to achieve this.
What I've tried so far:
Setting elevation on literally every element to 0dp in the XML,
setting the elevation programatically for the DrawerLayout and Toolbar using getSupportToolbar(),
setting the shadow to an empty Drawable,
adding various other settings in style XML with no result.
For my case just removed the line from the parent layout and the problem have solved!
android:fitsSystemWindows="true"
By the way, I have also tried all the solution I have known! But there is no solution until I removed "android:fitsSystemWindows" attribute from the parent layout. Hope this will help who will suffer the same problem. Thanks.
I'm trying to set a shadow on my navigation drawer after updating the support library but for some reason nothing is working and I'm stumped.
I came across this issue but it's solution is to just use setElevation which is also not working for me: https://code.google.com/p/android/issues/detail?id=184434
There really isn't much code to post but here's what I'm talking about for reference:
int currentapiVersion = android.os.Build.VERSION.SDK_INT;
if (currentapiVersion >= android.os.Build.VERSION_CODES.LOLLIPOP) {
mDrawerLayout.setDrawerElevation(25f);
} else {
mDrawerLayout.setDrawerShadow(R.drawable.left_drawer_shadow, GravityCompat.START);
}
I'm using a ScrimInsetsFrameLayout but that shouldn't be causing the issue AFAIKT.
Any ideas?
What might have happened:
Since support lib 23 v21+ devices ignore custom drawables in this case. The the native built in elevation shadows are used. See: this issue
Here is the kicker though: transparent elements have no shadow.
By default the elevation shadow is drawn from the views background-outline. If the view has no background, the shadow won't show up.
If your view doesn't have its own background, using the outline Provider e.g.:
android:outlineProvider="bounds"
should do the trick. The doc can be found here ViewOutlineProvider.
In short:
Interface by which a View builds its Outline, used for shadow casting and clipping.
Some more information and in-depth explanation is here: Android "elevation" not showing a shadow
Using a background color for a view with some alpha (e.g. #99fe0038) and some elevation on API 21 reveals two circles: one for the view itself and another inside:
Elevation and background color are set via code:
view.setElevation(getResources().getDimensionPixelSize(R.dimen.fab_elevation_lollipop));
view.setBackgroundColor(Color.parseColor("#99fe0038"));
Without setting elevation or with using an opaque color everything looks like expected.
Is it an Android bug or have I missed something here?
Removing shadow effect worked for me.
FAB.setShadow(false);
FAB.setBackgroundColor(getResources().getColor(R.color.fab_transparent));
setCardElevation has no effect for me on a 4.4 device - works on 5.0 - but from what I read in the documentation it should work on pre-L - do you have to do something different than:
cardView.setCardElevation(8dp)
Try using this:
cardview.setMaxCardElevation(8);
From the CardView docs:
If you want to change elevation dynamically, you should call setMaxCardElevation(float) when CardView is initialized.