Implementing search bar in PSLab app
PSLab offers a large range of functions with a large field of applications. This results in the long access path to certain information and functionality in the app, which affects the user experience (UX) negatively. In this blog post, I will show how the UX in Android applications with many functions can be improved by implementing a ‘Search Bar’. Further, I have created a screencast that follows the step-by-step description shown in this blog post [1]. Search Bar is the functionality which can be seen nowadays in almost all the apps. It is a handy widget for users to navigate the app. PSLab's Android app was lacking this functionality and so I added it using an external library from Mirrajabi called ‘search-dialog’ [3]. I decided to use this library as it provides a search bar with built-in functionality of highlighting the text that’s selected or written down in the ‘Edit Text’ field by the user and also it overlays on the screen which provides a good user experience rather than other search bars which overlap on the text provided on the screen with a ListView. Further working with this dependency was easier than working with others as it seems well designed. The Search Bar was added in the Saved Experiments section which contains a lot of default experiments along with their respective manuals. The search bar was intended to provide the user with a greater UI so that they don’t need to navigate through sections every time to find an experiment. This blog is a step by step guide on how to implement it in any app. First, add dependencies in the gradle at both project level and app level. By adding these dependencies, we don’t need to worry about writing code for how the Search Bar will filter searches and how it will be placed on the screen. App Level : 'com.github.mirrajabi:search-dialog:1.1' Project Level : maven { url "https://jitpack.io" } Create a SearchModel class which will help to carry out the search operations. public class SearchModel implements Searchable { private String mTitle; public SearchModel(String mTitle) { this.mTitle = mTitle; } public void setTitle(String mTitle) { this.mTitle = mTitle; } @Override public String getTitle() { return mTitle; } } The SearchModel class helps to communicate with the filtered search results by returning the string which is selected: SearchModel(String string) - It is a default constructor setTitle(String string) - It is a method used to set the string provided in the search results getTitle() - It is also a method to get the string selected by the user from the filtered search result provided Now provide some data which needs to be searched using an ArrayList or by using StringArrays and then converting it to Search Model Object. private ArrayList<SampleSearchModel> createSampleData(){ ArrayList<SampleSearchModel> items = new ArrayList<>(); items.add(new SampleSearchModel("First item")); items.add(new SampleSearchModel("Second item")); items.add(new SampleSearchModel("Third item")); items.add(new SampleSearchModel("Fourth item")); return items; } At last add the constructor in MainActivity to make the search bar. SimpleSearchDialogCompat(Context context, String title, String searchHint, @Nullable Filter…
