Open Science

Mockups are an essential part of app development cycle. With numerous mock-up tools available for android apps (both offline and online), choosing the right mock-up tool becomes quite essential. The developers need a tool that supports the latest features like drag & drop elements, support collaboration upto some extent and allow easy sharing of mockups. So, Moqups was chosen as the mockups tool for the PSLab Android team. Like other mock-up tools available in the market, using moqups is quite simple and it’s neat & simple user interface makes the job easier. This blog discusses some of the important aspects that need to be taken care of while designing mockups. A typical online mock-up tool would look like this having a palette to drag & drop UI elements like Buttons, Text boxes, Check boxes etc. Additionally a palette to modify the features of each element ( here on the right ) and other options at the top related to prototyping, previewing etc. The foremost challenge while designing any mock-up is to keep the design neat and simple such that even a layman doesn’t face problems while using it. A simple UI is always appealing and the current trend of UIs is creating flat & crisp UIs. For example, the above mock-up design has numerous advantages for both a user and also as a programmer. There are seek bars as well as text boxes to input the values along with the feature of displaying the value that actually gets implemented and it’s much simpler to use. From the developer’s perspective, presence of seven identical views allows code reuse. A simple layout can be designed for one functionality and since all of them are identical, the layout can be reused in a Recyclerview. The above design is a portion of the Control UI which displays the functionalities for  using PSLab as a function generator and as a voltage/current source. The other section of the UI is of the Read portion. This has the functionalities to measure various parameters like voltage, resistance, capacitance, frequency and counting pulses. Here, drop-down boxes have been provided at places where channel selection is required. Since voltages are most commonly measured values in any experiment, voltages of all the channels have been displayed simultaneously. Attempts should always be made to keep the smaller views as identical as possible since it becomes easier for the developer to implement it and also for the user to understand.   The Control UI has an Advanced Section which has features like Waveform Generators allows to generate sine/square waves of a given frequency & phase, Configuring Pulse Width Modulation (PWM)  and selecting the Digital output channel. Since, the use of such features are limited to higher level experiments, they have been separately placed in the Advanced section. Even here drop-down boxes, text boxes & check boxes have been used to make UI look interactive. The common dilemma faced while writing the XML file is regarding the view type to be chosen as Android provides…

ButterKnife is an Android Library which is used for View injection and binding. Unlike Dagger, ButterKnife is limited to views whereas Dagger has a much broader utility and can be used for injection of anything like views, fragments etc. Being limited to views makes it much more simpler to use compared to dagger. The need for using ButterKnife in our project PSLab Android was felt due to the fact binding views would be much more simpler in case of layouts like that of Oscilloscope Menu which has multiple views in the form of Textboxes, Checkboxes, Seekbars, Popups etc. Also, ButterKnife makes it possible to access the views outside the file in which they were declared. In this blog, the use of ButterKnife is limited to activities and fragments. ButterKnife can used anywhere we would have otherwise used findViewById(). It helps in preventing code repetition while instantiating views in the layout. The ButterKnife blog has neatly listed all the possible uses of the library. The added advantage of using Butterknife are- The hassle of using Boilerplate code is not needed and the code volume is reduced significantly in some cases. Setting up ButterKnife is quite easy as all it takes is adding one dependency to your gradle file. It also has other features like Resource Binding (i.e binding String, Color, Drawable etc.). Other uses like simplification of code while using buttons. For example, there is no need of using findViewById and setOnClickListener, simple annotation of the button ID with @OnClick does the task. Using butterknife was essential for PSLab Android since for the views shown below which has too many elements, writing boilerplate code can be a very tedious task. Using ButterKnife in activities The PSLab App defines several activities like MainActivity, SplashActivity, ControlActivity etc. each of which consists of views that can be injected with ButterKnife. After setting up ButterKnife by adding dependencies in gradle files, import these modules in every activity. import butterknife.BindView; import butterknife.ButterKnife; Traditionally, views in Android are defined as follows using the ID defined in a layout file. For this findViewById is used to retrieve the widgets. private NavigationView navigationView; private DrawerLayout drawer; private Toolbar toolbar; navigationView = (NavigationView) findViewById(org.fossasia.pslab.R.id.nav_view); drawer = (DrawerLayout) findViewById(org.fossasia.pslab.R.id.drawer_layout); toolbar = (Toolbar) findViewById(org.fossasia.pslab.R.id.toolbar); However, with the use of Butterknife, fields are annotated with @BindView and a View ID for finding and casting the view automatically in the layout files. After the annotation, finding and casting of views ButterKnife.bind(this) is called to bind the views in the corresponding activity. @BindView(R.id.nav_view) NavigationView navigationView; @BindView(R.id.drawer_layout) DrawerLayout drawer; @BindView(R.id.toolbar) Toolbar toolbar; setContentView(R.layout.activity_main); ButterKnife.bind(this); Using ButterKnife in fragments The PSLab Android App implements ApplicationFragment, DesignExperimentsFragment, HomeFragment etc., so ButterKnife for fragments is also used. Using ButterKnife is fragments is slightly different from using it in activities as the binded views need to be destroyed on leaving the fragment as the fragments have different life cycle( Read about it here). For this an Unbinder needs to be defined to unbind the views before they are destroyed. Quoting…

Often, while designing apps, we need planning and proper designing before actually building the apps. This is where mock-up tools and prototyping is useful. While designing user interfaces, the first step is usually creating mockups. Mockups give quite a good idea about the appearance of various layouts of the app. However, mockups are just still images and they don’t give a clue about the user experience of the app. This is where prototyping tools are useful. Prototyping helps to get an idea about the user experience without actually building the app. Invision is an online prototyping service which was used for initial testing of the PSLab Android app. Some of pictures below are the screenshots of our prototype taken in Invision. Since, it supports collaboration among developers, it proves to be a very useful tool.  Using Invision is quite simple. Visit the Invision website and sign up for an account.Before using invision for prototyping, the mockups of the UI layouts must be ready since Invision is simply meant for prototyping and not creating mockups. There are a lot of mock-up tools available online which are quite easy to use. Create a new project on Invision. Select the project type - Prototype in this case followed by selecting the platform of the project i.e. Android, iOS etc. Collaborators can be added to a project for working together. After project creation and adding collaborators is done with, the mock-up screens can be uploaded to the project directory Select any mock-up screen, the window below appears, there are a few modes available in the bottom navbar - Preview mode, Build mode, Comment mode, Inspect Mode and History Mode. Preview Mode - View your screen and test the particular screen prototype. Build Mode - Assign functionality to buttons, navbars, seek bars, check boxes etc. and other features like transitions. Comment Mode - Leave comments/suggestions regarding performance/improvement for other collaborators to read. Inspect mode - Check for any unforeseen errors while building. History Mode - Check the history of changes on the screen. Switch to the build mode, it would now prompt to click & drag to create boxes around buttons, check boxes, seek bars etc,(shown above). Once a box ( called as “hotspot” in Invision ), a dialog box pops up asking to assign functionalities. The hotspot/box which was selected must link to another menu/layout or result in some action like app closing. This functionality is provided by the “Link To:” option. Then the desired gesture for activating the hotspot is selected which can be tap for buttons & check boxes, slide for navbars & seek bars etc from the “Gesture:” option. Lastly, the transition resulting due to moving from the hotspot to the assigned window in “Link To:” is selected from the “Transition:” menu. This process can be repeated for all the screens in the project. Finally for testing and previewing the final build, the screen which appears when the app starts is selected and further navigation, gestures etc. are tested there. So, building prototypes is quite…