0

I'm working with material design and I faced the problem I can't solve. It's about the shadows/elevation.

  1. 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?

  1. 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

enter image description here

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

enter image description here

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?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
user2775914
  • 193
  • 1
  • 9

2 Answers2

1

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

Community
  • 1
  • 1
piotrek1543
  • 19,130
  • 7
  • 81
  • 94
  • 1
    Thanks a lot for the useful links! I surely will use them in my work. But I still don't understand one point. Imagine, as in example above, I have some designed element and I need to place it at the screen correctly. As I understand from your links all those techniques implies using drawables which include shadows. For example, like this android:background="@android:drawable/dialog_holo_light_frame" Which way is correct to determine the correct place of this element in my layout, considering that the drawable includes the shadow? – user2775914 Dec 11 '15 at 20:09
  • Well, if you really want to glue any view with its destination, learn hard about `RelativeLayout` and its attributes. It's the best layout to setting specific positions for layout elements. In xml file i think it doesn't matter in which query you put attributes - it depends only on you, I mean make it as readable as you can in case to find later a attribute to change – piotrek1543 Dec 11 '15 at 20:16
  • Thanks, but I almost always use RelativeLayout in my projects. It's clear for me that I can, for example, set something like this The problem is that if I set the drawable with shadow - it takes incorrect place, it not matches to the given psd layout. Shadow shifts the element down, lower than it has to be. Should I every time consider shadow length and recalculate layout_marginTop attribute? It can't be true, it's too complicated. – user2775914 Dec 11 '15 at 20:42
  • Well, you need to calculate many things if you want to have layout as your .psd file :-) There are paddings, margins, shadows ... and finally screen devices. Try to open your app on emulators or devices with different screen sizez and density. Yeap, it's sometimes really painfull. That's why Google nowadays: keep your app as simple as possible. We have Material Design, don't create your own and etc... – piotrek1543 Dec 11 '15 at 20:50
  • Yeah, you right. But before the Material Design it was more clear. Those shadows are killing me... – user2775914 Dec 11 '15 at 21:15
1

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

Community
  • 1
  • 1
Zielony
  • 16,239
  • 6
  • 34
  • 39
  • Wow! I don't dove deep into this library but at the first sight it's really impressive. Thanks a lot, Zielony! I will try it soon. – user2775914 Dec 14 '15 at 09:48