Photoshop Question posted in
The official user guide can be found here.

Material Design for pre-lollipop – Photoshop

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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search