Setting up layout for timetable

Question

I have a list of timetable-events and would like to lay them out as in the image.

You can ignore the backgroundgrid as I will not use one.

Every event in the timetable has a start- and endtime. The height of the item in the view is related to the duration of the event. The list is observed with LiveData so changes to the timetable need to update the screen.

I considered the following approaches:

a) Using a recyclerView. Unfortunatly this either lays out the items from left to right and scrolls vertically or lays them out vertically but scrolls horizontally. I basicly need vertical layout, jumping to the next column when necessary with vertical scrolling.

b) using a gridlayout (not gridview) and spanning items over rows. Drawback is that all items need to be a multiple of a single row. This assumes all events have a duration which is a multiple of a minimum time. I can use 1 or 5 minutes as that minimum duration, but it would result in a lot of rows. Furthermore I am not sure about updating the screen, the scrolling and if this is memory efficient.

c) using a parent scroll-layout with five vertical lineairlayouts. Programmatically adding the items to the corresponding lineairlayout with the right heigth. This adds all the viewitems to the layout even if they are not visible on screen. I can forget about LiveData updates I guess.

Is there another option I have overlooked? Or can I use a recyclerView anyway? How do I do that?

P.S. I am still using Java but started to learn Kotlin

score 2 · Answer 1 · answered Jul 10 '18 at 12:27

2

You can use Android Week View

Android Week View is an android library to display calendars (week view or day view) within the app. It supports custom styling.

Features

Week view calendar
Day view calendar
Custom styling
Horizontal and vertical scrolling
Infinite horizontal scrolling
Live preview of custom styling in xml preview window

Add below dependencies

implementation 'com.github.alamkanak:android-week-view:1.2.6'

WeekView in your xml layout.

<com.alamkanak.weekview.WeekView
        android:id="@+id/weekView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:eventTextColor="@android:color/white"
        app:textSize="12sp"
        app:hourHeight="60dp"
        app:headerColumnPadding="8dp"
        app:headerColumnTextColor="#8f000000"
        app:headerRowPadding="12dp"
        app:columnGap="8dp"
        app:noOfVisibleDays="3"
        app:headerRowBackgroundColor="#ffefefef"
        app:dayBackgroundColor="#05000000"
        app:todayBackgroundColor="#1848adff"
        app:headerColumnBackground="#ffffffff"/>

answered Jul 10 '18 at 12:27

AskNilesh

67,701
16
123
163

Will look into this, but I intend to apply material design later. Do not see at a glance if this is possible with this library. – KvdLingen Jul 10 '18 at 12:50
It is a nice library but not what I am looking for. Would not be able to put my own functionality in. – KvdLingen Jul 10 '18 at 17:31
@KvdLingen yes you can – AskNilesh Jul 11 '18 at 03:51
Not without taking the library apart and removing some features. I do not want a timescale at the left. Days in the weekend are not to be shown. Horizontal scrooling is not necessary. And I want to be able to overlay two schedules. If you can and are willing to enlighten me as how to do all of that, we can continue this conversation in chat. Or make it a seperate answer I will gladly accept. – KvdLingen Jul 12 '18 at 12:12

score 0 · Answer 2 · answered Jul 10 '18 at 12:27

You can use tableLayout.

Example -

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*"  android:stretchColumns="*"  
    android:background="#ffffff">

   <TableRow
       android:id="@+id/tableRow1"
       android:layout_height="wrap_content"
       android:layout_width="match_parent">

   <TextView
       android:id="@+id/TextView04" 
       android:text="Row 2 column 1"
       android:layout_weight="1" android:background="#dcdcdc"
       android:textColor="#000000"
       android:padding="20dip"
       android:gravity="center"/>

    <TextView
        android:id="@+id/TextView04" 
        android:text="Row 2 column 2"
        android:layout_weight="1" android:background="#d3d3d3"
        android:textColor="#000000"
        android:padding="20dip"
        android:gravity="center"/>

    <TextView
        android:id="@+id/TextView04" 
        android:text="Row 2 column 3"
        android:layout_weight="1" android:background="#cac9c9"
        android:textColor="#000000"
        android:padding="20dip" 
        android:gravity="center"/>

</TableRow>

For tutorials refer-

https://androidexample.com/Table_Layout_-_Android_Example/index.php?view=article_discription&aid=74

I have looked at TableLayout but it fills in from left to right while my list is ordered according to time which means the last item on the monday comes before the first item on the tuesday. And items can only span columns and not rows — KvdLingen, Jul 10 '18 at 12:35
Then you could create tableLayout programatically and set items at the required positions. — Raj, Jul 10 '18 at 12:38

score 0 · Answer 3 · answered Jul 10 '18 at 12:32

0

May be you can achieve this using FlexboxLayout.

Google flexbox-layout

answered Jul 10 '18 at 12:32

Geo

746
6
14

score 0 · Answer 4 · answered Apr 08 '19 at 17:31

0

I did not find an appropiate library or layout so I ended up writing my own view, calculating in onDraw the position of every appointment. It was not as hard as it sounds.

answered Apr 08 '19 at 17:31

KvdLingen

1,230
2
14
22

Setting up layout for timetable

4 Answers4