2

Suppose I have multiple items in a list that shows progress, say download progress. What would be the best way to design this using material design guidelines?

1

The best way will depend entirely on you, but in order to get HOW to do it by yourself, take a look to the official resource for Android's Developers: Transitions Framework and you could also check lgvalle/Material-Animations for examples on behaviors and a lot of code.

As for more specific Material Design examples, you can check the Progress & Activity section which has many examples and explanations that may help you. However, it will depend on your list style, since unless you use grid lists, you'll be quite restricted

  • Thanks. I'm looked through those stuff but didn't find anything that I could use. – Binoy Babu Aug 20 '16 at 10:01
  • Again, check the Progress & Activity page for material, you'll see the same examples you liked in other answer, only that applied to Material Design. Also, the idea is not not give you the exact transition, but for you (and other people in the future) to create transitions as needed, specific cases are off topic here – Devin Aug 20 '16 at 15:57
1

Material Design for Load Progress Inside of List Items

Material design for load progress inside of list items

You could use either the background or the margin to achieve a Material Design based approach. Light green or blue is typically associated with downloading progress but if you prefer another color feel free! Just please go light, strong vibrant colors can be an eye sore!

What tends to make a loading indicator "flat" or part of the material design, is how much feedback it can provide to the end-user in as little space as needed. A clutter-free user experience is a great one!

The background method, is not usually used as it tends to fill the screen with color. However, in cases where it is used, the color tends to go to a 15-25% grey in order to indicate completeness.

Hope this helps! Good luck!


Sources / References

Standalone Loading Bar Examples:

load bar example

(Source: http://news.bootswatch.com/post/110161099627/material-design-in-bootstrap-with-paper)

Loading bar example 2:

load bar example 2

(Source: http://lightningtgc.github.io/MProgress.js/)


A Website that uses the Background Method

For fun, check out this website, it uses the background method in a decent manner: http://media.io.

  • Good suggestion. Do you have a source or reference? – Binoy Babu Aug 20 '16 at 11:26
  • If you are attempting this in a website, I would recommend the best way being to use CSS transitions and JQuery/JavaScript to update the width of an absolute child element, inside of a relatively positioned list item. – Leviscus Tempris Aug 20 '16 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.