How to Implement 'Data Tables' (material design component) in android?

Question

I have gone through this new design specifications

https://www.google.com/design/spec/components/data-tables.html#data-tables-interaction

How can we implement all these Structure, Interactions in android. I haven't found enough documents describing this implementation. Is this only a design language specification. Any helpful documents? Thanks

The official document says that "Data tables usually appear in desktop enterprise products." But I am curious about the implementation. Is it not a good practice to show this much data as table in mobile/Tablet?

Solution

TL;DR: I would highly recommend looking into a different UI element to represent this data in your application, but if you feel it is correct to display the data in a table format, use the v7 Support Library GridLayout.

How can we implement all these Structure, Interactions in android. I haven't found enough documents describing this implementation. Is this only a design language specification. Any helpful documents? Thanks

To implement this Data Table design, you would most certainly want to use a GridLayout from the v7 support library. To achieve the colored dividers in your Table Layout, see this StackOverflow answer. The logic may be slightly different, as that answer I've linked to tells you how to display the grid item dividers for a GridView rather than a GridLayout, but the same logic should apply. Simply give a background color to your GridLayout, a different background color to your GridLayout children, and then designate the spacing you need between each item. In your case, the vertical spacing you want will be 0dp, and the horizontal spacing will be 1dp. That way, the background from your GridLayout will "show through" to the user, creating a divider effect.

The official document says that "Data tables usually appear in desktop enterprise products." But I am curious about the implementation. Is it not a good practice to show this much data as table in mobile/Tablet?

As always, the answer depends. However, think about it this way: when was the last time you saw a table displayed on a mobile device? To be honest, I can't quite think of one. Perhaps you may want to talk with your design team (or consider yourself if you're an indie developer) whether or not a data table is the best design choice for this particular use-case. Perhaps a graph would be a more digestible way of displaying the data. Perhaps a few different lists of each column separated by selection via a Spinner.

Comments

[AITAALI_ABDERRAHMANE]

I want to implement this feature to, any solution please?

[Avamander]

@deniz, have you implemented this and would you be willing to share your implementation?

[blueberry_chopsticks]

You're very welcome! If that answer works for you, could you please mark it as selected?

[HK.avdalyan]

@halfjew22 it is an amazing answer! I was looking for it. thanks man!

[Avamander]

@halfjew22 Is there an existing implementation of this? I'd like to show nutrition data exactly like in the example, but my skills are not up to implementing it myself.

[blueberry_chopsticks]

@Avamander, I linked an example above from the Udacity course.

[Karan Harsh Wardhan]

@lustig the udacity link is dead

[blueberry_chopsticks]

@KaranHarshWardhan and perhaps so, too, should be Udacity. Highly disagree with their teaching metrics.