Fiori Search User Interface¶
The FioriSearchView
component is an extension (a subtype of SearchView
) of Android's SearchView
widget that provides a user interface for the user to enter a search query and submit a request to a search provider.
It shows a list of suggestions or results, if available, and allows the user to pick a suggestion or result to launch. Fiori Search View provides an out-of-the box implementation of a Search UI with an optional bar code reader that can be used to read numerical bar codes (representing, for example, product IDs) and perform search queries using them.
It can be used either as a persistent search view or as search dialog within the toolbar.
Note
When using FioriSearch
in the toolbar, make sure that the color on the Search View does not match the color of Search background, or the icons will be invisible. You can set the Search background to either null or transparent to fix this issue.
Setting up FioriSearch
¶
Setting up the FioriSearchView
is a two step process.
-
Make sure that the application's theme overrides the
SearchViewStyle
. There are multiple ways to achieve this:-
Directly apply the style attribute to the
FioriSearchView
. If you happen to have theFioriSearchView
as UI component in your Activity then, as shown below you can directly apply theFioriSearchView
to your search view.<com.sap.cloud.mobile.fiori.search.FioriSearchView style="@style/FioriSearchView" android:id="@+id/fiori_search_view_maps" android:layout_width="match_parent" android:layout_height="wrap_content" app:iconifiedByDefault="false" />
-
Simply use the
FioriTheme
in your Activity while declaring your Activity inAndroidManifest.xml
file.FioriTheme
has overridden the@android:searchViewStyle
attribute for you. Below is an example of an Activity.<activity android:name=".search.DemoSearchActivity" android:theme="@style/FioriTheme"> ... </activity>
-
Override the
searchViewStyle
attribute in your app theme. As shown below, you can override thesearchViewStyle
attribute in your Theme in order to allowFioriSearchView
to find it.... <item name="searchViewStyle">@style/FioriSearchView</item> ...
-
-
Follow the instructions to setup the
SearchView
from Android's official website at Creating Search View Interface.
Bar Code Scanning with FioriSearch
¶
FioriSearch
allows the user to perform bar code scanning using the device camera. It triggers the camera for the scanning, performs the scans, and sets up the query into the SearchBar
. To enable the bar code scan in FioriSearchView
follow the steps shown below:
-
Add Gradle dependency of google-vision library:
implementation 'com.sap.cloud.android:google-vision:${versions.sapCloudAndroidSdk}'
-
Declare the
QRCodeReaderActivity
provided as part of the google-vision library into your android-manifest file:<activity android:name="com.sap.cloud.mobile.onboarding.qrcodereader.google.QRCodeReaderActivity" android:label="@string/app_name" tools:replace="android:theme" android:theme="@style/Onboarding.Default.Light.Theme"> </activity>
By default FioriSearchBar
provides support for scanning all bar code formats and camera auto focus. However, you can restrict the supported bar code formats
to the format of interest using void setQRCodeReaderSettings(QRCodeReaderSettings QRCodeReaderSettings)
API of FioriSearchView
.
mQRCodeReaderSettings = new QRCodeReaderSettings();
// disable the auto focus
mQRCodeReaderSettings.setAutoFocus(false);
// only EMAIL types bar codes allowed
mQRCodeReaderSettings.setBarcodeFormat(EMAIL);
// set the new settings
mFioriSearchView.setQRCodeReaderSettings(mQRCodeReaderSettings);
You can also add a verification phase for verifying the scanned bar code. To enable the verification of the scanned bar code, you must provide an implementation of QRCodeReaderActionHandler
interface as the metadata to QRCodeReaderActivity
declared in your androidmanifest.xml
file.
<activity
android:name="com.sap.cloud.mobile.onboarding.qrcodereader.google.QRCodeReaderActivity"
android:label="@string/app_name"
tools:replace="android:theme"
android:theme="@style/Onboarding.Default.Light.Theme">
<meta-data
android:name="action_handler"
android:value="com.sap.cloud.mobile.fiori.demo.onboarding.QRCodeReaderActionHandlerImpl"/>
</activity>
public class QRCodeReaderActionHandlerImpl implements QRCodeReaderActionHandler {
final private static String TAG = "QRCodeReaderAHandler"; //abbreviated
/**
* Validates all non-null bar-codes after a user defined delay. If the validation is interrupted the result is false.
*
* @param fragment the caller fragment of the QR code reader activity
* @param barcode the bar code which will be validated
* @return true if the bar code is not null and the validation is not interrupted
*/
@Override
public void validateBarcode(Fragment fragment, Barcode barcode)
throws BarcodeValidationException, InterruptedException {
Log.i(TAG, "validating barcode: ".concat(barcode == null ? "null" : barcode.displayValue));
((DemoApplication) fragment.getActivity().getApplication()).delay();
if (barcode == null) {
// invalidated
Log.i(TAG, "barcode is null");
throw new BarcodeValidationException("Null barcode");
} else {
// send the scanned bar code to the activity which initiated the QRCodeReaderActivity.
Intent intent = new Intent();
intent.putExtra("BARCODE", barcode);
fragment.getActivity().setResult(Activity.RESULT_OK, intent);
fragment.getActivity().finish();
}
}
}
Note
By default Android provides white color background to SearchView
when used inside a toolbar. Because Search icons have white tints applied by default, they may not be visible. Set the SearchView
background to be transparent.