The Open Event Android app allows users to search any event. The results are fetched from the server and the data is displayed in the recycler view. But, how do we handle situations when there are no results found? This is where we arrive at implementing a No search results message in the Open Event android app.
First of all, we will create a search icon vector drawable. We can make our own vector drawable in Android Studio.
Right clicking on any folder, we then select new Vector Drawable option. After that, a dialogue will open where we can select our preferred icon. In this case, we select search icon. After that, on clicking next, we successfully complete the process!
Coming back to the actual matter, we create a layout containing the message and the drawable.
We will create a LinearLayout containing an Image View and a TextView. We add this layout in fragment_search.
| <LinearLayout
android:id=“@+id/noSearchResults” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:orientation=“vertical” android:gravity=“center” android:visibility=“gone” android:layout_gravity=“center”> <ImageView android:layout_width=“@dimen/item_image_view” android:layout_height=“@dimen/item_image_view” app:srcCompat=“@drawable/ic_search_grey_24dp”/> <TextView android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:textSize=“@dimen/text_size_medium” android:text=“@string/no_search_results”/> </LinearLayout> |
As we can clearly observe, the layout will not be visible at first. We have to make the layout visible only when there are no search results found.
Heading onto the backend code. We move onto the SearchFragment.kt file. There we will handle the visibility of the layout.
| searchViewModel.events.observe(this, Observer {
it?.let { eventsRecyclerAdapter.addAll(it) eventsRecyclerAdapter.notifyDataSetChanged() handleVisibility(it) } Timber.d(“Fetched events of size %s”, eventsRecyclerAdapter.itemCount) }) |
We observe that we have added a line of code handleVisibility(it). This is a function which will take care of events fetched. Let’s head onto the code of that function.
| fun handleVisibility(events: List<Event>){
rootView.noSearchResults.visibility = if (events.isEmpty()) View.VISIBLE else View.GONE } |
We already know the id of the layout, that is noSearchResults. So, in the above function, we are setting the visibility of the layout as visible whenever the events list is empty. This satisifes our logic completely. If it is the other case around, we set the visibility of the layout as View.GONE, which means we are making the layout completely invisible.
Thus, this is how we are able to achieve a better UX effect whenever there are no results found in the Open Event android app.
Additional Resources
- Android Step by Step – Visibility Handling: http://androidsbs.blogspot.com/2013/12/androidvisibility-hide-textview.html
- Android Documentation for Visibility: https://developer.android.com/reference/android/transition/Visibility
Tags: GSoC18, FOSSASIA, Open Event, Android, CustomTabsIntent