Add text search bar to Xamarin PDF viewer

Text search functionality can be added to your viewer using the text search UI component. Alternatively, you can programmatically perform text search in PDFViewCtrl.

• Set up PDFViewCtrl and ToolManager in your activity.

Apryse provides SearchToolbar and FindTextOverlay as utility classes for implementing text search in your document viewer. Here is a short guide on adding text search to your activity:

1. Add the search controls to your layout, a simple example will be something like:

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                   xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">
       <pdftron.PDF.Controls.SearchToolbar
           android:id="@+id/searchtoolbar"
           android:visibility="gone"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:minHeight="?attr/actionBarSize"
           app:contentInsetStart="@dimen/second_keyline"
           android:background="?attr/colorPrimary"
           app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
           app:navigationIcon="@drawable/ic_arrow_back_white_24dp" />
       <pdftron.PDF.PDFViewCtrl
           android:id="@+id/pdfviewctrl"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           android:layout_weight="1"
           android:scrollbars="vertical|horizontal" />
     </LinearLayout>
     <pdftron.PDF.Controls.FindTextOverlay
           android:id="@+id/find_text_view"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:visibility="gone"/>
   </RelativeLayout>

2. In onCreate of your activity, set up your SearchToolbar and FindTextOverlay:

   var searchToolbar = FindViewById<pdftron.PDF.Controls.SearchToolbar>(Resource.Id.searchtoolbar);
   var searchOverlay = FindViewById<pdftron.PDF.Controls.FindTextOverlay>(Resource.Id.find_text_view);
   searchOverlay.SetPdfViewCtrl(mPdfViewCtrl);
   
   searchToolbar.ExitSearch += (sender, e) =>
   {
       searchToolbar.Visibility = ViewStates.Gone;
       searchOverlay.Visibility = ViewStates.Gone;
       searchOverlay.ExitSearchMode();
   };
   searchToolbar.ClearSearchQuery += (sender, e) =>
   {
       searchOverlay?.CancelFindText();
   };
   searchToolbar.SearchQuerySubmit += (sender, e) =>
   {
       searchOverlay?.QueryTextSubmit(e.Query);
   };
   searchToolbar.SearchQueryChange += (sender, e) =>
   {
       searchOverlay?.SetSearchQuery(e.Query);
   };
   searchToolbar.SearchOptionsItemSelected += (sender, e) =>
   {
       int id = e.Item.ItemId;
       if (id == Resource.Id.action_match_case)
       {
           bool isChecked = e.Item.IsChecked;
           searchOverlay?.SetSearchMatchCase(!isChecked);
           searchOverlay?.ResetFullTextResults();
           e.Item.SetChecked(!isChecked);
       }
       else if (id == Resource.Id.action_whole_word)
       {
           bool isChecked = e.Item.IsChecked;
           searchOverlay?.SetSearchWholeWord(!isChecked);
           searchOverlay?.ResetFullTextResults();
           e.Item.SetChecked(!isChecked);
       }
   };

3. Show the layout

   searchToolbar.Visibility = ViewStates.Visible;
   searchOverlay.Visibility = ViewStates.Visible;

Now when running the app, you will see a toolbar that allows you to enter search terms as well as an overlay on top of the PDFViewCtrl that navigates among search results.

SearchResultsView class enables users to easily search for a query and see the results.

To set up your layout for a SearchResultsView, add an element to your XML layout as follows:

<com.pdftron.pdf.controls.SearchResultsView
    android:id="@+id/searchResultsView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Then, you need to set the following events

• An item from the search results is clicked
• A full-text search is started and result has not yet been ready
• A search is found

searchResultsView.SetPdfViewCtrl(mPdfViewCtrl);
searchResultsView.FullTextSearchStart += (sender, e) =>
{
    searchToolbar?.SetSearchProgressBarVisible(true);
};
searchResultsView.SearchResultFound += (sender, e) =>
{
    searchToolbar?.SetSearchProgressBarVisible(false);
    searchOverlay?.HighlightFullTextSearchResult(e.Result);
};
searchResultsView.SearchResultClicked += (sender, e) =>
{
    searchOverlay?.HighlightFullTextSearchResult(e.Result);
    mPdfViewCtrl?.SetCurrentPage(e.Result.PageNum);
    searchResultsView.Visibility = ViewStates.Gone;
};