Analyzing the mockup plan

Things are getting hooked! We are ready to begin with some serious development! We will create all of the screens for our application. However, before we create them, we will create and analyze a mockup so we know what exactly we will create. The mockup will represent the basic application wireframe with no design. It will be just a layout for the screens and the relationship between them. To create a good mockup with wireframes, you will need a tool. Any tool capable of drawing lines will do the job. To draw our mockup, we used Pencil. Pencil is a free open source application providing GUI prototyping.

Let's take a look at our mockup:

As you can see, the mockup presents a relatively simple application with a few screens. There are different components that will be included in these screens, and we will explain these along with each screen. Let's go through the mockup.

The first screen, titled Landing screen, will be our main application screen. Every time we enter the application, this screen will appear. We already defined the MainActivity class. This activity will represent the screen. Soon, we will extend the code so the activity follows the mockup exactly as described.

The central part of the screen will be the list containing all the items we created. Each item will contain basic properties, such as title or date and time. We will be able to filter items by type. We will be able to filter only Notes or TODOs. The difference between Notes and TODOs is that TODOs will represent tasks with the date and time assigned. We will also support some functionalities such as the onLongPress events. The onLongPress event on each item will present a Popup menu with the Edit, Remove, or Complete options. Clicking on Edit will open the screen for updating.

At the bottom-right corner, we will have a + button. The purpose of the button is to open the option Dialog on which a user can choose if they want to create a Note or TODO task. Depending on the option, a user can choose one of the screens that appear--Add note screen or Add TODO screen. 

Landing screen also contains the Sliding menu button positioned at its top-left corner. Clicking on that button will open the Sliding menu with the following items in it:

• An application icon with the application title and version
• A Today button to filter only TODO items assigned for the current date
• A Next 7 Days button to filter TODO items assigned in the Next 7 Days including the current one
• A TODOs button filter only TODO items
• The Notes button will filter only the Note items

Applying some of these filters will affect the checkboxes from the Popup menu we get by clicking on the top-right corner of the Landing screen. Also, checking and unchecking those will modify the currently applied filter.

The last item in the sliding menu is Synchronize now. This button will trigger synchronization and synchronize all unsynchronized items with backend if there are any.

Now we will explain two screens responsible for the creation (or editing) of Notes and TODOs:

• Add/Edit note screen: This is used to create a new note or to update the content of an existing one. Keyboard will be opened as edit text field is focused. There is no save or update button since we plan that all changes we make are applied immediately. The top-left and top-right buttons are disabled while we are on this screen.
• Add/Edit TODO screen: This is used to create a new TODO application or to update the content of an existing one. Keyboard will open as in the previous example. There is no save or update button as shown in the previous example, either. The top-left and top-right buttons are disabled too. Following are the title view, we have buttons to pick date and time. By default, they will be set to the current date and time. Opening keyboard will push these buttons up.

We covered the basic UI and what we want to achieve by analyzing this mockup. The time has come to create some new screens.