I have to desgin an android layout from the web page shown below.

How can I represent the time table UI shown below for an Android layout.

Time table

Note that the periods & days are dynamically delivered by a REST API & they don't contain all the days & hours, so I can't use a calender week view and when a group selected the equivalent period & day must be presented as a square filling the equivalent cell.

I have designed the selection UI which is a part of registration step layout and contains a recycler view with cards each card represents one course as below.

enter image description here

Also, should I design the time table UI in the same step as the selection step or it's better UX to have a second step for review the selection?

  • 2
    Maybe you can add some context details. I guess this is for students signing up for courses, but for example what are the practical and theoretical groups. And are these courses connected to each other or completely separate? Are both, practical and theoretical selection necessary?
    – Big_Chair
    Commented Nov 22, 2018 at 14:21
  • Yes it's for students signing up for courses. The app is for middle east universities and the theoretical group is a class of 20 students taking the theoretical part of the subject. Same for practical groups but the students taking the practical part of the same subject. Depends on the json data there will be a parameter that if the parameter true theoretical groups is related to practical otherwise it's not related Commented Nov 23, 2018 at 21:23
  • 1
    @AliHabbash In US universities we often use the term “lab” for the hands on or experimental portion of the course. For example a student registers for a physics “course” and a physics “lab”. Commented Nov 24, 2018 at 0:22

3 Answers 3


I did some work on this but didn't have enough time to get anything usable up until now.

Here's a display of the weekly schedule that fits. Users can view the schedule at the top of the page while they're working on it. This follows material design mostly.

One thing to pay attention to is how colors are used sparingly because they're UI indicators, like a legend, for the schedule. The interface can't have these colors anywhere else or competing colors so that users can easily see and identify their meaning.

CSS grid can easily make this schedule design.

enter image description here

  • wow, It's very very awsome UI that fits the requirement. Commented Nov 26, 2018 at 22:39

I am assuming that students are selecting modules that are offered at different times of day.

If that's the case, have them select their preference for when they'd like to attend the class for that module, add it to a shopping cart, and if their next selection clashes with the first selection, throw an error.

So the workflow would be,

  1. select the course/module you want to study (module A)
  2. select the times you want to study it from a drop-down list
  3. select another module (module B)
  4. select the times you want to study it from a drop-down list
  5. if user selects a time that overlaps with module A, throw an error, and ask if they want to :

    (a) select a new time for module A

    (b) select a new time for module B

    (c) if no other sessions available, inform them that the clash cannot be resolved and ask them to pick a new module.

With this model, there's no need to try to represent the whole timetable on the screen.

  • The requirement is the drop down list must show the practical group number followed by the available seats in the group for example 1 (1/20). Each partical group has a list of times related to that group. Commented Nov 21, 2018 at 19:42
  • So, I can't show the times to select in the drop down list Commented Nov 21, 2018 at 19:44
  • 1
    how flexible are the requirements? can you add the times to what is displayed? Commented Nov 22, 2018 at 18:48

Finally I have come across the solution by the help of this repo.


I have searched a lot and I find that This is the best way to represent the timetable based on groups that's selected by the student.

  • 1
    That’s a nice looking timetable. Commented Nov 24, 2018 at 0:32
  • 1
    If your requirements are flexible you might consider more assistive presentations. For example, if the student chooses the classes they need to take you might present them with a list of alternative schedule options. That way the student doesn’t need to manually figure out the set of possible options. Commented Nov 24, 2018 at 0:34
  • @Micheal You mean that the flow will be like this: 1- For every subject the students choose a one group for class and one for lab. 2- The app show an alternative groups for those subjects that does not clashes with each other. Commented Nov 24, 2018 at 11:02
  • 1
    I’m assuming the students (1) are trying to get a degree, (2) have a maximum number of credits available each semester, (3) have a maximum number of semesters to complete a degree, (4) labs must be taken when courses are taken, (5) students can also use credits to take courses that aren’t required for their degree, (6) students can only enroll in courses that are offered in the current semester and below a maximum number of students, (7) students can be progressing toward multiple major and minor degrees at the same time. That is a very complicated scheduling task for students! Commented Nov 24, 2018 at 14:52
  • 1
    While you have found an effective solution for showing a timetable on Android, students might benefit from a non-tabular UI that allows them to specify the degree they want, the courses they’ve completed, and the units they have available and then recommends schedules they can pick from. Commented Nov 24, 2018 at 14:57

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.