Discover Search Widget | HMS Site Kit - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
Most of the developers use the services of searching places, displaying or utilizing place-related information in mobile applications. You need two basic requirements to provide a complete searchbar for your users. The first thing is a layout which enables to use searching activities like entering a keyword or showing suggestions according to user’s input, and the second thing is an API which enables to utilize all place-related information to the users.
HMS Site Kit offers you a Widget that meets all your needs to provide place search services and fetching their information. It is a search component of the built-in place search suggestion feature. When a users enters a keyword in the search box, the widget displays the list of suggested places for user. If the user clicks on any place in the list, your app will receive a Site object and use it to obtain place details.
If you have any questions about how you can integrate HMS Core into your project, please take a look at below post before beginning.
https://medium.com/huawei-developers/android-integrating-your-apps-with-huawei-hms-core-1f1e2a090e98
Note: Please do not forget to activate Site Kit in AppGalery Connect (Project Setting → Manage API) and to add build dependencies to app level build.gradle file (implementation ‘com.huawei.hms:site:{version}’).
Let’s see how to use Widget of the HMS Site Kit with an example. You can use widget by adding a SearchFragment object to your layout or using the Intent object. We will use it by adding fragment in our demo project.
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.WidgetActivity">
<fragment
android:id="@+id/widget_fragment"
android:name="com.huawei.hms.site.widget.SearchFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.cardview.widget.CardView
android:id="@+id/card_widget"
android:visibility="invisible"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:cardBackgroundColor="@android:color/holo_orange_light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/nameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="@android:color/white"/>
<TextView
android:id="@+id/AddressText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"/>
<TextView
android:id="@+id/locText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"/>
<TextView
android:id="@+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
You can see the fragment and a cardview in the layout given above. When users selects a place from the widget, we will fetch some information about that place and display in that card. The next step is to prepare our interface class.
Code:
package com.huawei.sitekitdemohms.interfaces
import com.huawei.hms.site.api.model.Site
import com.huawei.hms.site.widget.SearchFragment
interface WidgetInterface {
interface WidgetPresenter {
fun initWidget()
}
interface WidgetView {
fun getMyFragment() : SearchFragment
fun showMySite(site: Site)
fun showMessage(message: String?)
}
}
Two interfaces are defined one for presenter and the another is for view. initWidget() will be called with presenter object to initialize the Widget component and to set SiteSelectedListener. The view instance will get the user inputs and show place details with getMyFragment() and showMySite() methods.
Code:
package com.huawei.sitekitdemohms.ui
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.TextView
import android.widget.Toast
import androidx.cardview.widget.CardView
import com.huawei.hms.site.api.model.Site
import com.huawei.hms.site.widget.SearchFragment
import com.huawei.sitekitdemohms.R
import com.huawei.sitekitdemohms.interfaces.WidgetInterface
import com.huawei.sitekitdemohms.presenters.WidgetPresenter
class WidgetActivity : AppCompatActivity(), WidgetInterface.WidgetView {
private lateinit var textName: TextView
private lateinit var textAddr: TextView
private lateinit var textLocation: TextView
private lateinit var phno: TextView
private lateinit var card: CardView
private var presenter: WidgetInterface.WidgetPresenter?=null
private lateinit var searchFragment: SearchFragment
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_widget)
textName = findViewById(R.id.nameText)
textAddr = findViewById(R.id.AddressText)
textLocation = findViewById(R.id.locText)
phno = findViewById(R.id.phone)
card = findViewById(R.id.card_widget)
card.visibility = View.INVISIBLE
searchFragment = (supportFragmentManager.findFragmentById(R.id.widget_fragment) as SearchFragment?)!!
presenter = WidgetPresenter(this)
presenter!!.initWidget()
}
override fun getMyFragment(): SearchFragment {
return searchFragment
}
override fun showMySite(site: Site) {
textName.text = site.name
textAddr.text = site.formatAddress
textLocation.text = "Lat: " + site.location.lat + ", " + "Lng: " + site.location.lng
phno.text = "Phone: " + site.poi.internationalPhone
card.visibility = View.VISIBLE
}
override fun showMessage(message: String?) {
Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
}
}
In WidgetActivity class, searchFragment is defined and initWidget method has been called with presenter object. Moreover, override methods of view interface are also defined here.
Code:
package com.huawei.sitekitdemohms.presenters
import android.annotation.SuppressLint
import com.huawei.hms.site.api.model.SearchStatus
import com.huawei.hms.site.api.model.Site
import com.huawei.hms.site.widget.SiteSelectionListener
import com.huawei.sitekitdemohms.interfaces.WidgetInterface
import com.huawei.sitekitdemohms.utils.Constants
class WidgetPresenter internal constructor(val view: WidgetInterface.WidgetView) : WidgetInterface.WidgetPresenter {
override fun initWidget() {
view.getMyFragment().setApiKey(Constants.API_KEY)
view.getMyFragment().setOnSiteSelectedListener(object : SiteSelectionListener {
@SuppressLint("SetTextI18n")
override fun onSiteSelected(site: Site) {
view.showMySite(site)
}
override fun onError(searchStatus: SearchStatus) {
view.showMessage("Sorry, we couldn't find any results matching with your query ")
}
})
}
}
In WidgetPresenter class, initWidget() method has been generated. The searchFragment is obtained via view instance and API Key has been set. Then, SiteSelectedListener has been set from the fragment to determine user selection. When user clicks on a place, details of place are obtained with showMySite() method by using the site object that returns from the API.
Note: “API Key” is required to use Widget. You can find it in agconnect-services.json file.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
This project has been developed with an architecture that enables to provide maintainable and adaptable design for developers. You can build up your app based on it to shape your usage.
In this article, we discovered the usage of Widget Component that offerred by HMS Site Kit. I hope that it will provide greate convenience for your projects.
Thank you for reading !
References
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/android-sdk-widget-0000001050156642

---

What is EMU version needed to integrate HMS Site kit ?