Apply material design to a list with a text, like and dislike buttons

Question

I have a list that shows items, and users can like or dislike them.

I have the following items on my cells:

• Item name
• Like button with an icon and a counter
• Dislike button with an icon

Here is how it looks now:

I will change the icons to thumbs up (or heart) and thumbs down.

How should I align the items on my cells according to Material Design?

I found the following documentation, but there is no example for this: https://material.io/guidelines/components/lists-controls.html#

Answer 1

Material design is a loose guide that cannot account for all possible scenarios. Many if not most sites keep this feature to the left, though Material Design does favor placing interactions generally to the right of list items. You'll have to interpret those conventions how you will.

Far and away the most common pattern for this is a vertical split button with a count in the middle. This is found on this very site, as well as most others featuring the ability to vote both up and down. The benefit of this is that it's compact and self-evident.

Even if you go with horizontal split, I would absolutely keep paired icons if one directly toggles the other. Arrows up/down, thumbs up/down, heart/broken heart, etc. I would not expect a thumbs down to cancel a heart, any more than I would expect a banana icon to cancel sardines.

Answer 2

You have an action similar to the switch example from the Material Design guideline website. I would say that according to that you should put the like and dislike buttons to the right.

EDIT: Now that you've uploaded a photo, I have one more suggestion. You might wanna consider having one icon only (a heart for example, twitter-like), that adds a like and changes it's color/style when clicked. If it's already liked when it's clicked, then just remove the like and switch back to the initial style. That is assuming you don't count negative dislikes.

Answer 3

Assuming I understood your question well, You should definitely put the action buttons to the right.

As for the counter, you should put it with absolute positioning so everything is aligned correctly.