New layout for the Timeline

The Activity displaying the flow of events is intended to be the most frequently used view of the application, so it is top priority to make it user-friendly and well usable. To facilitate dealing with the events, a new layout has been developed (see figure 1). The aim of this post is to introduce the new functions. Note that the Timeline Activity is under development, so several elements described here are not fully implemented yet.

Fig.1. New timeline

As you might observe, the layout is divided into several regions. On the top is the action bar displaying the name of the contact and an easily accessible "..." menu, which contains shortcuts to the main functions of the application.

The next region, the "top panel" displays the avatars of the user and the contact as well as a button titled "h?". This button is for opening the timeline options popup window. By accessing this feature the user could configure source filters for a particular contact. In the previous version these filters were configurable in the Sources Activity. This Activity titled "my sources" has also been redesigned, and now is for configuring sources only (see figure 2).

Fig.2. Configure sources

The avatars on the panel are also touchable. Clicking the user's avatar launches the "my preferences" Activity where the user can provide a custom image as her avatar. Clicking the contact's avatar opens a menu where will be shortcuts for creating new events for the different sources (e.g. call the contact, create a new entry in LendMe, write a message on Facebook). External applications could provide an Intent to launch their customized activity for that purpose (e.g LendMe could launch an activity for adding a new entry where the contact field is already filled with the selected contact's name).

Since the top panel occupies relatively large portion of the screen, the timeline options window also contains a button for hiding the panel. If the panel is not shown, the h! symbol on the actionbar becames touchable. Clicking on it opens the so called h-menu, where the functions of the top panel are accessible via menu elements. The h-menu also provides an option for restoring the top panel to its original state. When hiding the panel, a tooltip message informs the user about this feature (see figure 3).

Fig.3. Message about restoring the top panel

Finally, the last region is for displaying the events, similar to the previous version of the application. Since the bubbles are not always the best way to display large ammount of information, the style of the timeline will be configurable in the "my preferences": the user could choose between the "Bubbles" and the "Rows" theme.