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?
2 Answers
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. Commented Aug 20, 2016 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– DevinCommented Aug 20, 2016 at 15:57
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:
(Source: http://news.bootswatch.com/post/110161099627/material-design-in-bootstrap-with-paper)
Loading 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.
-
-
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. Commented Aug 20, 2016 at 11:51