Author: shreyasnbhat

This author has written 10 articles
Read more about the article Using Travis CI to Generate Sample Apks for Testing in Open Event Android

Using Travis CI to Generate Sample Apks for Testing in Open Event Android

In the Open Event Android app we were using Travis already to push an apk of the Android app to the apk branch for easy testing after each commit in the repo. A better way to test the dynamic nature of the app would be to use the samples of different events from the Open Event repo to generate an apk for each sample. This could help us identify bugs and inconsistencies in the generator and the Android app easily. In this blog I will be talking about how this was implemented using Travis CI. What is a CI? Continuous Integration is a DevOps software development practice where developers regularly push their code changes into a central repository. After the merge automated builds and tests are run on the code that has been pushed. This helps developers to identify bugs in code quite easily. There are many CI’s available such as Travis, Codecov etc. Now that we are all caught up with let’s dive into the code. Script for replacing a line in a file (configedit.sh) The main role of this script would be to replace a line in the config.json file. Why do we need this? This would be used to reconfigure the Api_Link in the config.json file according to our build parameters. If we want the apk for Mozilla All Hands 2017 to be built, I would use this  script to replace the Api_Link in the config.json file to the one for Mozilla All Hands 2017. This is what the config.json file for the app looks like. {   "Email": "dev@fossasia.org",   "App_Name": "Open Event",   "Api_Link": "https://eventyay.com/api/v1/events/6/" } We are going to replace line 4 of this file with "Api_Link":"https://raw.githubusercontent.com/fossasia/open-event/master/sample/MozillaAllHands17" VAR=0 STRING1=$1 while read line do ((VAR+=1)) if [ "$VAR" = 4 ]; then echo "$STRING1" else echo "$line" fi done < app/src/main/assets/config.json The script above reads the file line by line. If it reaches line 4 it would print out the string that was given into the script as a parameter else it just prints out the line in the file. This script would print the required file for us in the terminal if called but NOT create the required file. So we redirect the output of this file into the same file config.json. Now let’s move on to the main script which is responsible for the building of the apks. Build Script(generate_apks.sh) Main components of the script Build the apk for the default sample i.e FOSSASIA17 using the build scripts ./gradlew build and ./gradlew assembleRelease. Store all the Api_Links and apk names for which we need the apks for different arrays Replace the Api_Link in the json file found under android/app/src/main/assets/config.json using the configedit.sh. Run the build scripts ./gradlew build and ./gradlew assembleRelease to generate the apk. Move the generated apk from app/build/outputs/apk/ to a folder called daily where we store all the generated apks. We then repeat this process for the other Api_Links in the array. As of now we are generating the apks…

Continue ReadingUsing Travis CI to Generate Sample Apks for Testing in Open Event Android
Read more about the article Datewise splitting of the Bookmarks in the Homescreen of Open Event Android

Datewise splitting of the Bookmarks in the Homescreen of Open Event Android

In the Open Event Android app we had already incorporated bookmarks in the homescreen along with an improved UI. Now there was scope for further improvement in terms of user experience. The bookmarks were already sorted date wise but we needed to place them under separate date headers. In this blog I will be talking about how this was done in the app.                 Initially the user had no way of knowing which session belonged to which day. This could be fixed with a simple addition of a header indicating the day each bookmark belonged to. One way to do this was to add a day header and then get the bookmarks for each day and so on. But this proved to be difficult owing to the fact the number of days could be dynamic owing to the fact that this is a generic app. Another issue was that adding change listeners for the realm results to the bookmarks list for each day produced view duplication and other unexpected results whenever the bookmark list changed. So another approach was chosen that was to get all the bookmarks first and then add the date header and traverse through the bookmarks and only add sessions which belong to the date for which the date header was added earlier. Bookmark Item Support in GlobalSearchAdapter The main reason why we are reusing the GlobalSearchAdapter is that we have already defined a DIVIDER type in this adapter which can be reused as the date header. We needed to initialize a constant for the Bookmark type. private final int BOOKMARK = 5; //Can be any number Then we add the Bookmark type in the getItemViewType() function which would return a constant that we defined earlier to indicate that in the filteredResultList we have an object of type Bookmark. @Override public int getItemViewType(int position) {    if (filteredResultList.get(position) instanceof Track) {        return TRACK;    }     //Other Cases here    } else if(filteredResultList.get(position) instanceof Session){        return BOOKMARK;    } else {        return 1;    } } Now we create the viewholder if the list item is of the type Session which in this case will be a bookmark. @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {    RecyclerView.ViewHolder resultHolder = null;    LayoutInflater inflater = LayoutInflater.from(parent.getContext());    //Other cases for Track,Location etc case BOOKMARK:    View bookmark = inflater.inflate(R.layout.item_schedule, parent, false);    resultHolder = new DayScheduleViewHolder(bookmark,context);    break;   //Some code } Now we do the same in onBindViewHolder(). We bind the contents of the object to the ViewHolder here by calling the bindSession() function. We also pass in an argument which is our database repository i.e realmRepo here. @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {     switch (holder.getItemViewType()) {     //Other cases handled here case BOOKMARK:    DayScheduleViewHolder bookmarkTypeViewHolder = (DayScheduleViewHolder) holder;    Session bookmarkItem = (Session) getItem(position);    bookmarkTypeViewHolder.setSession(bookmarkItem);    bookmarkTypeViewHolder.bindSession(realmRepo);    break; } Updating the AboutFragment private GlobalSearchAdapter bookMarksListAdapter; private List<Object> mSessions =…

Continue ReadingDatewise splitting of the Bookmarks in the Homescreen of Open Event Android
Read more about the article Addition of Bookmarks to the Homescreen in the Open Event Android App

Addition of Bookmarks to the Homescreen in the Open Event Android App

In the Open Event Android app we had already built the new homescreen but the users only had access to bookmarks in a separate page which could be accessed from the navbar.If the bookmarks section were to be incorporated in the homescreen itself, it would definitely improve its access to the user. In this blog post, I’ll be talking about how this was done in the app. These 2 images show the homescreen and the bookmarks section respectively.                   This was the proposed homescreen page for the app. This would provide easy access to important stuff to the user such as event venue,date,description etc. Also the same homescreen would also have the bookmarks showing at the top if there are any. The list of bookmarks in the first iteration of design was modeled to be a horizontal list of cards. Bookmarks Merging Process These are some variables for reference. private SessionsListAdapter sessionsListAdapter; private RealmResults<Session> bookmarksResult; private List<Session> mSessions = new ArrayList<>(); The code snippet below highlights the initial setup of the bookmarks recycler view for the horizontal List of cards. All of this is being done in the onCreateView callback of the AboutFragment.java file which is the fragment file for the homescreen. bookmarksRecyclerView.setVisibility(View.VISIBLE); sessionsListAdapter = new SessionsListAdapter(getContext(), mSessions, bookmarkedSessionList); sessionsListAdapter.setBookmarkView(true); bookmarksRecyclerView.setAdapter(sessionsListAdapter); bookmarksRecyclerView.setLayoutManager(new LinearLayoutManager(getContext(),LinearLayoutManager.HORIZONTAL,false)); The SessionListAdapter is an adapter that was built to handle multiple types of displays of the same viewholder i.e SessionViewHolder . This SessionListAdapter is given a static variable as an argument which is just notifies the adapter to switch to the bookmarks mode for the adapter. private void loadData() {    bookmarksResult = realmRepo.getBookMarkedSessions();    bookmarksResult.removeAllChangeListeners();    bookmarksResult.addChangeListener((bookmarked, orderedCollectionChangeSet) -> {        mSessions.clear();        mSessions.addAll(bookmarked);        sessionsListAdapter.notifyDataSetChanged();        handleVisibility();    }); } This function loadData() is responsible for extracting the sessions that are bookmarked from the local Realm database. We the update the BookmarkAdapter on the homescreen with the list of the bookmarks obtained. Here we see that a ChangeListener is being attached to our RealmResults. This is being done so that we do our adapter notify only after the data of the bookmarked sessions has been processed from a background thread. if(bookmarksResult != null)    bookmarksResult.removeAllChangeListeners(); And it is good practice to remove any ChangeListeners that we attach during the fragment life cycle in the onStop() method to avoid memory leaks. So now we have successfully added bookmarks to the homescreen. Resources Realm Change Listener : https://realm.io/docs/java/latest/api/io/realm/RealmChangeListener.html Android Activity Lifecycle : https://developer.android.com/guide/components/activities/activity-lifecycle.html Blog Post for Homescreen Details : https://blog.fossasia.org/adding-global-search-and-extending-bookmark-views-in-open-event-android/

Continue ReadingAddition of Bookmarks to the Homescreen in the Open Event Android App
Read more about the article Better Bookmark Display Viewholder in Home Screen of the Open Event Android App

Better Bookmark Display Viewholder in Home Screen of the Open Event Android App

Earlier in the Open Event Android app we had built the homescreen with the bookmarks showing up at the top as a horizontal list of cards but it wasn’t very user-friendly in terms of UI. Imagine that a user bookmarks over 20-30 sessions, in order to access them he/she might have to scroll horizontally a lot in order to access his/her bookmarked session. So this kind of UI was deemed counter-intuitive. A new UI was proposed involving the viewholder used in the schedule page i.e DayScheduleViewHolder, where the list would be vertical instead of horizontal. An added bonus was that this viewholder conveyed the same amount of information on lesser white space than the earlier viewholder i.e SessionViewHolder.                   Above are two images, one in the initial design, the second in the new design. In the earlier design the number of bookmarks visible to the user at a time was at most 1 or 2 but now with the UI upgrade a user can easily see up-to 5-6 bookmarks at a time. Additionally there is more relevant content visible to the user at the same time. Additionally this form of design also adheres to Google’s Material Design guidelines. Code Comparison of the two Iterations Initial Design sessionsListAdapter = new SessionsListAdapter(getContext(), mSessions, bookmarkedSessionList); sessionsListAdapter.setBookmarkView(true); bookmarksRecyclerView.setAdapter(sessionsListAdapter); bookmarksRecyclerView.setLayoutManager(new LinearLayoutManager(getContext(),LinearLayoutManager.HORIZONTAL,false)); Here we are using the SessionListAdapter for the bookmarks. This was previously being used to display the list of sessions inside the track and location pages. It is again being used here to display the horizontal list of bookmarks.To do this we are using the function setBookmarkView(). Here mSessions consists the list of bookmarks that would appear in the homescreen. Current Design bookmarksRecyclerView.setVisibility(View.VISIBLE); bookMarksListAdapter = new DayScheduleAdapter(mSessions,getContext()); bookmarksRecyclerView.setAdapter(bookMarksListAdapter); bookmarksRecyclerView.setLayoutManager(new LinearLayoutManager(getContext())); Now we are using the DayScheduleAdapter which is the same adapter used in the schedule page of the app. Now we use a vertical layout instead of a horizontal layout  but with a new viewholder design. I will be talking about the last line in the code snippet shortly. ViewHolder Design (Current Design) <RelativeLayout android:id="@+id/content_frame">    <LinearLayout android:id="@+id/ll_sessionDetails">        <TextView android:id="@+id/slot_title"/>        <RelativeLayout>            <TextView android:id="@+id/slot_start_time”/>            <TextView android:id="@+id/slot_underscore"/>            <TextView android:id="@+id/slot_end_time"/>            <TextView android:id="@+id/slot_comma"/>            <TextView android:id="@+id/slot_location”/>            <Button android:id="@+id/slot_track"/>            <ImageButton android:id="@+id/slot_bookmark"/>        </RelativeLayout>     </LinearLayout>    <View android:id=”@+id/divider”/> </RelativeLayout> This layout file is descriptive enough to highlight each element’s location. In this viewholder we can also access to the track page from the track tag and can also remove bookmarks instantly. The official widget to make a scroll layout in android is ScrollView. Basically, adding a RecyclerView inside ScrollView can be difficult . The problem was that the scrolling became laggy and weird.  Fortunately, with the appearance of Material Design , NestedScrollView was released and this becomes much easier. bookmarksRecyclerView.setNestedScrollingEnabled(false); With this small snippet of code we are able to insert a RecyclerView inside the NestedScrollView without any scroll lag. So now we have successfully updated the UI/UX for the homescreen  to meet…

Continue ReadingBetter Bookmark Display Viewholder in Home Screen of the Open Event Android App
Read more about the article Addition of Bookmark Icon in Schedule ViewHolder in Open Event Android App

Addition of Bookmark Icon in Schedule ViewHolder in Open Event Android App

In the Open Event Android app we only had a list of sessions in the schedule page without  the ability to bookmark the session unless we went into the SessionDetailPage or visited the session list via the tracks page or the locations page. This was obviously very inconvenient. There were several iterations of UI design for the same. Taking cues from the Google I/O 17 App I thought that the addition of the Bookmark Icon in the Schedule ViewHolder would be helpful to the user. In this blog post I will be talking about how this feature was implemented. Layout Implementation for the Bookmark Icon <ImageButton    android:id="@+id/slot_bookmark"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="end"    android:layout_alignParentEnd="true"    android:layout_alignParentRight="true"    android:layout_alignParentBottom="true"    android:tint="@color/black"    android:background="?attr/selectableItemBackgroundBorderless"    android:contentDescription="@string/session_bookmark_status"    android:padding="@dimen/padding_small"    app:srcCompat="@drawable/ic_bookmark_border_white_24dp" /> The bookmark Icon was modelled as an ImageButton inside the item_schedule.xml file which serves as the layout file for the DayScheduleViewHolder. Bookmark Icon Functionality in DayScheduleAdapter The Bookmark Icon had mainly 3 roles : Add the session to the list of bookmarks (obviously) Generate the notification giving out the bookmarked session details. Generate a Snackbar if the icon was un-clicked which allowed the user to restore the bookmarked status of the session. Update the bookmarks widget. Now we will be seeing how was all this done. Some of this was already done previously in the SessionListAdapter. We just had to modify some of the code to get our desired result.        Session not bookmarked                      Session bookmarked                       First we just set a different icon to highlight the Bookmarked and the un-bookmarked status. This code snippet highlights how this is done. if(session.isBookmarked()) {    slot_bookmark.setImageResource(R.drawable.ic_bookmark_white_24dp); } else { slot_bookmark.setImageResource(R.drawable.ic_bookmark_border_white_24dp); } slot_bookmark.setColorFilter(storedColor,PorterDuff.Mode.SRC_ATOP); We check if the session is bookmarked by calling a function isBookmarked() and choose one of the 2 bookmark icons depending upon the bookmark status. If a session was found out to be bookmarked and the Bookmark Icon was we use the WidgetUpdater.updateWidget() function to remove that particular session from the  Bookmark Widget of the app. During this a  Snackbar is also generated “Bookmark Removed” with an UNDO option which is functional. realmRepo.setBookmark(sessionId, false).subscribe(); slot_bookmark.setImageResource(R.drawable.ic_bookmark_border_white_24dp); if ("MainActivity".equals(context.getClass().getSimpleName())) {    Snackbar.make(slot_content, R.string.removed_bookmark, Snackbar.LENGTH_LONG)            .setAction(R.string.undo, view -> {                realmRepo.setBookmark(sessionId, true).subscribe();                slot_bookmark.setImageResource(R.drawable.ic_bookmark_white_24dp);                WidgetUpdater.updateWidget(context);            }).show(); else {    Snackbar.make(slot_content, R.string.removed_bookmark, Snackbar.LENGTH_SHORT).show(); } If a session wasn’t bookmarked earlier but the Bookmark Icon was clicked we would firstly need to update the bookmark status within our local Realm Database. realmRepo.setBookmark(sessionId, true).subscribe(); We would also create a notification to notify the user. NotificationUtil.createNotification(session, context).subscribe(        () -> Snackbar.make(slot_content,                R.string.added_bookmark,                Snackbar.LENGTH_SHORT)                .show(),        throwable -> Snackbar.make(slot_content,                R.string.error_create_notification,                Snackbar.LENGTH_LONG).show()); The static class Notification Util is responsible for the generation of notifications. The internal working of that class is not necessary right now. What this snippet of code does is that It creates a Snackbar upon…

Continue ReadingAddition of Bookmark Icon in Schedule ViewHolder in Open Event Android App
Read more about the article Addition Of Track Tags In Open Event Android App

Addition Of Track Tags In Open Event Android App

In the Open Event Android app we only had a list of sessions in the schedule page without  knowing which track each session belonged to. There were several iterations of UI design for the same. Taking cues from the Google I/O 17 App we thought that the addition of track tags would be informative to the user.  In this blog post I will be talking about how this feature was implemented. TrackTag Layout in Session <Button                android:layout_width="wrap_content"                android:layout_height="@dimen/track_tag_height"                android:id="@+id/slot_track"                android:textAllCaps="false"                android:gravity="center"                android:layout_marginTop="@dimen/padding_small"                android:paddingLeft="@dimen/padding_small"                android:paddingRight="@dimen/padding_small"                android:textStyle="bold"                android:layout_below="@+id/slot_location"                android:ellipsize="marquee"                android:maxLines="1"                android:background="@drawable/button_ripple"                android:textColor="@color/white"                android:textSize="@dimen/text_size_small"                tools:text="Track" /> The important part here is the track tag was modelled as a <Button/> to give users a touch feedback via a ripple effect. Tag Implementation in DayScheduleAdapter All the dynamic colors for the track tags was handled separately in the DayScheduleAdapter. final Track sessionTrack = currentSession.getTrack();       int storedColor = Color.parseColor(sessionTrack.getColor());       holder.slotTrack.getBackground().setColorFilter(storedColor, PorterDuff.Mode.SRC_ATOP);       holder.slotTrack.setText(sessionTrack.getName());       holder.slotTrack.setOnClickListener(v -> {            Intent intent = new Intent(context, TrackSessionsActivity.class);            intent.putExtra(ConstantStrings.TRACK, sessionTrack.getName());            intent.putExtra(ConstantStrings.TRACK_ID, sessionTrack.getId());            context.startActivity(intent);      }); As the colors associated with a track were all stored inside the track model we needed to obtain the track from the currentSession. We could get the storedColor by calling getColor() on the track object associated with the session. In order to set this color as the background of the button we needed to set a color filter with a PorterDuff Mode called as SRC_ATOP. The name of the parent class is an homage to the work of Thomas Porter and Tom Duff, presented in their seminal 1984 paper titled "Compositing Digital Images". In this paper, the authors describe 12 compositing operators that govern how to compute the color resulting of the composition of a source (the graphics object to render) with a destination (the content of the render target). Ref : https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html To exactly understand what does the mode SRC_ATOP do we can refer to the image below for understanding. There are several other modes with similar functionality.                       SRC IMAGE             DEST IMAGE           SRC ATOP DEST Now we also set an onClickListener for the track tag so that it directs us to the tracks Page. So now we have successfully added track tags to the app. Resources Porter Duff Modes : https://developer.android.com/reference/android/graphics/PorterDuff.Mode.html

Continue ReadingAddition Of Track Tags In Open Event Android App
Read more about the article Addition Of Settings Page Animations in Open Event Android App

Addition Of Settings Page Animations in Open Event Android App

In order to bring in some uniform user flow in the  Open Event Android  there was a need to implement slide animation for various screens. It turned out that the settings page didn’t adhere to such a rule. In this blog post I’ll be highlighting how this was implemented in the app. Android Animations Animations for views/layouts in android were built in order to have elements of the app rely on real life motion and physics. These are mainly used to choreograph motion among various elements within a page or multiple pages. Here we would be implementing a simple slide_in and a slide_out animation for the settings page. Below I highlight how to write a simple animator. slide_in_right.xml <?xml version="1.0" encoding="utf-8"?> <set   xmlns:android="http://schemas.android.com/apk/res/android">   <translate       android:duration="@android:integer/config_shortAnimTime"       android:fromXDelta="100%"       android:toXDelta="0%" /> </set> This xml file maily is what does the animation for us in the app. We just need to provide the translate element with the position fromXDelta from where the view would move to another location that would be toXDelta. @android:integer/config_shortAnimTime is a default int variable for animation durations. Here toXDelta=”0%” signifies that initial position of the page i.e the settings page that is the screen itself. And the 100% in fromXDelta signifies the virtual screen space to the right of the actual screen(OUTSIDE THE SCREEN OF THE PHONE). Using this animation it appears that the screen is sliding into the view of the user from the right. We will be using overridePendingTransition to override the default enter and exit animations for the activities which is fade_in and fade_out as of Android Lollipop. The two integers you provide for overridePendingTransition(int enterAnim, int exitAnim) correspond to the two animations - removing the old Activity and adding the new one. We have already defined the enterAnim here that is slide_in_left. For the exit animation we would define another animation that would be stay_in_place.xml that would have both fromXDelta and toXDelta as 0% as their values. This was done to just avoid any exit animation. We need to add this line after the onCreate call within the SettingActivity. @Override protected void onCreate(Bundle savedInstanceState) {       //Some Code super.onCreate(savedInstanceState);       overridePendingTransition(R.anim.slide_in_right, R.anim.stay_in_place); //Some Code Now we are done. We can see below that the settings page animates with the prescribed animations below. Resources View Animation : https://developer.android.com/guide/topics/graphics/view-animation.html Override Pending Transition : https://www.codota.com/android/methods/android.app.Activity/overridePendingTransition Using Animations in Android : http://www.vogella.com/tutorials/AndroidAnimation/article.html  

Continue ReadingAddition Of Settings Page Animations in Open Event Android App
Read more about the article GlobalSearchAdapter Setup in Open Event Android App

GlobalSearchAdapter Setup in Open Event Android App

In this blog post I describe how the GlobalSearchAdapter in Open Event Android was made which enabled users to search quickly within the app. This post also outlines how to create Recycler Views with heterogenous layouts and explains how to write ViewHolders. Adapter Logic A custom adapter was built for the population of views in the Recycler View in the SearchActivity. private List<Object> filteredResultList = new ArrayList<>(); //ViewType Constants private final int TRACK = 0; private final int SPEAKER = 2; private final int LOCATION = 3; private final int DIVIDER = 4; The DIVIDER constant was assigned to the Result Type Header View. In a gist all the item types such as Speaker, Track, Location, Divider etc have been designated some constants. Getting the ItemViewType @Override public int getItemViewType(int position) {   if(filteredResultList.get(position) instanceof Track){       return TRACK;   }   else if(filteredResultList.get(position) instanceof String){       return DIVIDER;   }    ...Similarly for other ItemTypes such as Session or Location   else{       return 1;   } } As the filteredResultList is of type Object we can insert objects of any type into the list as Object is a superclass of all classes. We would want a view which represents a TRACK if we have an object of type Track in the filteredResultList. And similarly for the other result types we could insert objects of type LOCATION, SPEAKER types in this list. getItemViewType() basically determines the type of the item that is visible to us. If the list consists of an item of type SPEAKER, in the RecyclerView. Code for onCreateViewHolder in GlobalSearchAdapter for the Recycler View @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {   RecyclerView.ViewHolder resultHolder = null;   LayoutInflater inflater = LayoutInflater.from(parent.getContext());   switch(viewType) {       case TRACK:           View track = inflater.inflate(R.layout.item_track, parent, false);           resultHolder = new TrackViewHolder(track,context);           break;       case SPEAKER:           View speaker = inflater.inflate(R.layout.search_item_speaker, parent, false);           resultHolder = new SpeakerViewHolder(speaker,context);           break;       //Similarly for other types       default:           break;   }   return resultHolder; } Depending upon the the viewType returned the desired layout is inflated and the desired ViewHolder is returned. Code for onBindViewHolder in GlobalSearchAdapter for the Recycler View @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {    switch (holder.getItemViewType()){        case TRACK:            TrackViewHolder trackSearchHolder = (TrackViewHolder)holder;            final Track currentTrack = (Track)getItem(position);            trackSearchHolder.setTrack(currentTrack);            trackSearchHolder.bindHolder();            break;         //Similarly for all the other View Types default:            break;    } } These functions are being used to bind the data to the layouts that have been inflated already in the earlier snippet of code of onCreateViewHolder. The bindHolder functions of each ViewHolder type are being used to do the view binding i.e converting the information in the Object Track into what we see in the TrackViewHolder as seen in TrackViewFormat. All ViewHolders have been defined as separate classes in order to enable re usability of these classes. ViewHolder Implementation There are 4 main ViewHolders that were made to enable such a search. I’ll be talking about the TrackViewHolder in detail. public class TrackViewHolder extends RecyclerView.ViewHolder { @BindView(R.id.imageView)    ImageView trackImageIcon; @BindView(R.id.track_title)    TextView trackTitle; @BindView(R.id.track_description)   …

Continue ReadingGlobalSearchAdapter Setup in Open Event Android App
Read more about the article Global Search in Open Event Android

Global Search in Open Event Android

In the Open Event Android app we only had a single data source for searching in each page that was the content on the page itself. But it turned out that users want to search data across an event and therefore across different screens in the app. Global search solves this problem. We have recently implemented  global search in Open Event Android that enables the user to search data from the different pages i.e Tracks, Speakers, Locations etc all in a single page. This helps the user in obtaining his desired result in less time. In this blog I am describing how we implemented the feature in the app using JAVA and XML. Implementing the Search The first step of the work is to to add the search icon on the homescreen. We have done this with an id R.id.action_search_home. @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { super.onCreateOptionsMenu(menu, inflater); inflater.inflate(R.menu.menu_home, menu); // Get the SearchView and set the searchable configuration SearchManager searchManager = (SearchManager)getContext(). getSystemService(Context.SEARCH_SERVICE); searchView = (SearchView) menu.findItem(R.id.action_search_home).getActionView(); // Assumes current activity is the searchable activity searchView.setSearchableInfo(searchManager.getSearchableInfo( getActivity().getComponentName())); searchView.setIconifiedByDefault(true); } What is being done here is that the search icon on the top right of the home screen  is being designated a searchable component which is responsible for the setup of the search widget on the Toolbar of the app. @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater();    inflater.inflate(R.menu.menu_home, menu);    SearchManager searchManager =            (SearchManager) getSystemService(Context.SEARCH_SERVICE);    searchView = (SearchView) menu.findItem(R.id.action_search_home).getActionView();    searchView.setSearchableInfo(            searchManager.getSearchableInfo(getComponentName()));    searchView.setOnQueryTextListener(this);    if (searchText != null) {        searchView.setQuery(searchText, true);    }    return true; } We can see that a queryTextListener has been setup in this function which is responsible to trigger a function whenever a query in the SearchView changes. Example of a Searchable Component <?xml version="1.0" encoding="utf-8"?> <searchable xmlns:android="http://schemas.android.com/apk/res/android"    android:hint="@string/global_search_hint"    android:label="@string/app_name" /> For More Info : https://developer.android.com/guide/topics/search/searchable-config.html If this searchable component is inserted into the manifest in the required destination activity’s body the destination activity is set and intent filter must be set in this activity to tell whether or not the activity is searchable. Manifest Code for SearchActivity <activity        android:name=".activities.SearchActivity"        android:launchMode="singleTop"        android:label="Search App"        android:parentActivityName=".activities.MainActivity">    <intent-filter>        <action android:name="android.intent.action.SEARCH" />    </intent-filter>    <meta-data        android:name="android.app.searchable"        android:resource="@xml/searchable" /> </activity> And the attribute  android:launchMode=”singleTop”  is very important as if we want to search multiple times in the SearchActivity all the instances of our SearchActivity would get stored on the call stack which is not needed and would also eat up a lot of memory. Handling the Intent to the SearchActivity We basically need to do a standard if check in order to check if the intent is of type ACTION_SEARCH. if (Intent.ACTION_SEARCH.equals(getIntent().getAction())) {    handleIntent(getIntent()); } @Override protected void onNewIntent(Intent intent) {    super.onNewIntent(intent);    handleIntent(intent); } public void handleIntent(Intent intent) {    final String query = intent.getStringExtra(SearchManager.QUERY);    searchQuery(query); } The function searchQuery is called within handleIntent in order to search for the text that we received…

Continue ReadingGlobal Search in Open Event Android

Adding Global Search and Extending Bookmark Views in Open Event Android

When we design an application it is essential that the design and feature set enables the user to find all relevant information she or he is looking for. In the first versions of the Open Event Android App it was difficult to find the Sessions and Speakers related to a certain Track. It was only possible to search for them individually. The user also could not view bookmarks on the Main Page but had to go to a separate tab to view them. These were some capabilities I wanted to add to the app. In this post I will outline the concepts and advantages of a Global Search and a Home Screen in the app. I took inspiration from the Google I/O 2017 App  that had these features already. And, I am demonstrating how I added a Home Screen which also enabled users to view their bookmarks on the Home Screen itself. Global Search v/s Local Search                   If we observe clearly in the above images we can see there exists a stark difference in the capabilities of each search. See how in the Local Search we are just able to search within the Tracks section and not anything else. This is fixed in the Global Search page which exists along with the new home screen. As all the results that a user might need are obtained from a single search, it improves the overall user-experience of the app. Also a noticeable feature that was missing in the current iteration of the application was that a user had to go to a separate tab to view his/her bookmarks. It would be better for the app to have a home page detailing all the Event’s/Conference’s details as well as display user bookmarks on the homepage. New Home                                     The above posted images/gifs indicate the functioning and the UI/UX of the new Homescreen within the app. Currently I am working to further improve the way the Bookmarks are displayed. The new home screen provides the user with the event details i.e FOSSASIA 2017 in this case. This would be different for each conference/event and the data is fetched from the open-event-orga server(the first part of the project) if it doesn’t already exist in the JSON files provided in the assets folder of the application. All the event information is being populated by the JSON files provided in the assets folder in the app directory structure. config.json sponsors.json microlocations.json event.json(this stores the information that we see on the home screen) sessions.json speakers.json track.json All the file names are descriptive enough to denote what do all of them store.I hope that I have put forward why the addition of a New Home with Bookmarks along with the Global Search feature was a neat addition to the app. Link to PR for this feature : https://github.com/fossasia/open-event-android/pull/1565 Resources https://guides.codepath.com/android/Heterogenous-Layouts-inside-RecyclerView https://developer.android.com/training/search/index.html  …

Continue ReadingAdding Global Search and Extending Bookmark Views in Open Event Android