I am working on a personal project that is a training log fitness app. On the meal section I want to display what time the meal was had and all the food that they had as well. Each meal being separated by from top to bottom. The food description is broken into two lines separated by commas. I was wondering if that is a good idea or could it cause readability issues for users?

enter image description here

Great ideas everyone, I also considered doing something else too. I looked at the myfitness pal app and like how they lay out the foods from top to bottom so that no matter if I add a few foods or a lot then it stacks up and makes it easy for a user to read. I separate my categories by calling it meal instead of breakfast,lunch and dinner which myfitness pal did. I also saw how I can improve what they did by adding the time of the meal to the right of the meal category. Here is a solution I came up with.

enter image description here

  • 1
    Aside the redundancy of the meals, I'm not having any trouble understanding it. Some graphic depiction of the time of day might help, but that's not a deal breaker. What are the three dots for? If they are only decoration, get rid of them. Do the meal descriptions have to fit on two lines or will the block expand when more meal components are provided. Are you allowing for more daily meals than can fit on a single page? (scrolling or page-navigation) Commented Jan 11, 2016 at 4:51

5 Answers 5


Supposing that most people won't add a lot of foods per meal (lets say 6 each meal at most) I'd prefer to place each food above/under the other, since it's much easier to scan.
As a reference, it's also the common way that recipes are presented.

btw, I'd try to reduce the "layers" of the design:

  • Use lighter colors for titles and time boxes to reduce visual clutch.

  • Does each meal has only 1 time inside? If that's the case I would merge them.
    It could be something like Meal 2 (11:00AM).


I have been doing research about healthy eating for 6 months.Based on my invesitagtion of the best applications on play/App store, I would recommend you to look at

  • Lost it
  • Nutrition Menu
  • MyFitnessPal
  • My personal Diet

Based on my experience in that project, I can easily say that there's no "One-size-fits all " pattern for this but I can advise you to do formative evaluation and get your target-user involved.Propose different design layout for this and show them, get their comments and then evaluate it. Here's a nice layout pattern as shown below;

enter image description here

Additionally, you can be more creative, you can use a product-card if you are building your application using material design. Try to minimize your design and be consistent when you are making the layout. Reduce as much as possible of contents and show the importance of details "I personally avoided using pictures". If you wanna show note maybe you can "implement a note viewer button" so if the user wants to see what he/she wrote about that meal they can easily enable that functionality.

  • The calories which you have mentioned besides breakfast, lunch, and dinner is quite confusing to the user. Instead, you could shift the value to the right. Maybe you could highlight the sections(breakfast, lunch, dinner) in some background color.
    – NB4
    Commented Jun 8, 2017 at 13:22

I would suggest a Horizontal RecyclerView with icons for food with name below it. You can also use tick icon to show whether each item was actually had or not; if you are maintaining a Diet with items in it.

For example: https://www.google.co.in/search?q=play+store+ui&client=ms-android-oneplus&prmd=inv&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjy3MKn3KnKAhVBcI4KHUAYDuUQ_AUIBygB#imgrc=91JsKUjMAczTeM%3A

In this link the third screenshot shows items like rating and genre. So it's more appealing and gives better understanding.

  • Could you link to an example of a Horizontal Recycler View - e.g. on a UI design patterns website, or an article with an example of this type of interface? Do you mean this? plattysoft.com/2015/06/16/snapping-items-on-a-horizontal-list Commented Jan 14, 2016 at 16:18
  • Yes this. Also if you have Android, go to play store and check an app. There is rating and other items in round circle.
    – Keshav
    Commented Jan 14, 2016 at 16:25
  • Great - do you want to edit your rely to include those things? :) Commented Jan 14, 2016 at 16:27

I would make the food-items into tags like in WordPress and then have a cloud of frequently eaten items. That way, it makes it easier for the user to add new foods, to enter frequently eaten items, and to delete mistakes.

It would also be handy to have the ability to copy yesterday's meals and edit them.

Here's a possible popup box for selecting frequently eaten items: food and drink selector

Your meal listing would then look something like this:

food and drink listing


Since it is a fitness app, I am sure the users are quite interested in knowing Calories consumed per meal and per meal item. The screens shared by Serag does that well.

It might also add value to show the budget per meal, and how much excess/shortage there was in the meal

Another thing that iv seen on myfitness pal - everytime you log a food that is high in a nutrient it shows a small temporary message right below the item saying something like "this food is high in protein"

It just adds to the entire experience of wanting to stay fit and in budget.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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