I'm working on an Android app and, up until this point, have mostly focused on functionality. But now that most of the functions are implemented, I want to clean everything up and make it presentable.
Unfortunately, some items are way too compressed:
(Note: The numbers are mostly just made up for now just so everything has a value)
As you can see, the text of the food is squished to near-nothingness because I have a serving-size EditText, a food category icon, a settings button, a notes icon (which turns black if there is a note present), and a touch icon on the far right that lets you drag the item around the list to reorder (I'm aware that icon's resolution is not great and will eventually add all the right files for that one).
Clicking the TextView (food name) expands/contracts the nutrition info below it. But even that is an issue because it takes up a lot of space on account of having five items.
So my main question is what a good way might be to reorganize the items so that it is less cluttered, more space-efficient, but still carries all the relevant functionality.
Context:
In this screen, the user can input a variety of foods that they're about to eat. The category icons make for easy visual identification.
The reordering is meant to be easy in that you can click and drag. In this particular screen, reordering is perhaps not as important (since it all gets submitted with the same timestamp), but this same sort of framework is used in another section of my app where workout routines take place, where order does matter (sample picture here). So the reordering here is more for consistency in experience, although I suppose I can do away with it in this situation. But I figure some people will want the ability to group things together / move them around more easily (for instance, someone logging / organizing ingredients for a meal).
I could have done a "hold to reorder item" instead, but I am generally hesitant about functionality that is hidden by long-presses as it's not immediately obvious to many users.
Clicking the actual row item (i.e. the name) is meant to expand/contract the nutrition info.
The serving size TextView can be toggled between serving size mode (e.g. "3 nuggets", "2 servings", etc) and grams mode ("45 grams") by clicking on the text itself (which looks like a link currently). I had wanted this EditText + Textview to be a feature of the collapsed view since it makes it easy for users to quickly see how much of what they're eating in total, and so that they don't have to do two steps to edit their consumed quantity (expand item + enter value, vs. just entering value).
The note field I can wrap into the settings most likely. Although, right now the settings icon only has a singular "Delete" option that comes up, but I could probably get rid of that (and let deletion be handled only through the checkmarks) and replace the settings icon with the note icon. However in the workout routine section of my app, the settings icon does have more functionality, so if I can't figure how what to do with it here, it'll be an issue later anyway.
The checkboxes are meant to facilitate mass deletion. I have a floating action menu where you can select all / unselect all, and delete selected. Or you can press the checkboxes individually. It's less time-consuming compared to deleting each item one by one.
