SUSI.AI android app has the functionality to detect the available WiFi networks and among them check for the hotspot named “SUSI.AI”. Now, this process is required so that the app can connect to the smart speaker and send the WiFi credentials, the authentication credentials and the configuration data to the smart speaker.
After on clicking the “SET UP” button on the available SUSI.AI hotspot as shown in the image below,
The app needs to make API requests where the app will send the data to the speaker, the first API that needs to be hit is for the WiFi credentials. Once the “SET UP” button is clicked the app shows a message “Connecting to your device” with a loader as in the image below :
Now during this step the code to detect the available WiFi networks is run again and the list of the available networks is sent from the DeviceConnectPresenter.kt to the DeviceConnectFragment.kt from the function defined in the presenter as follows :
| override fun availableWifi(list: List<ScanResult>) { connections = ArrayList<String>() for (i in list.indices) { connections.add(list[i].SSID) } if (!list.isEmpty()) { deviceConnectView?.setupWiFiAdapter(connections) } else { deviceConnectView?.onDeviceConnectionError(utilModel.getString(R.string.no_device_found), utilModel.getString(R.string.setup_tut)) } } |
Now to show the list of available WiFi networks a new ViewHolder had to made which contained a textview and an imageview. The viewholder file named WifiViewHolder.java is responsible for this and is used along with the DeviceAdapter only.
The interesting thing to see is that the DeviceAdapter already inflates the ViewItems of the type DeviceViewHolder. Instead of making a new adapter for the WifiViewHolder view item, I wrote some smart code that handles both the viewholders with the same adapter i.e DeviceAdapter. Let’s now see how this was handled,
In the DeviceAdapter a private variable named viewCode of type integer was made and it would be responsible to segregate the two viewholders using an if command. Here is code below that shows how using viewcode variable allows us to choose and inflate a viewholder among the two we have in onCreateViewHolder() method :
| if (viewCode == 1) { View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.device_layout, parent, false); return new DeviceViewHolder(v, (DeviceConnectPresenter) devicePresenter); } else { View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_wifi_item, parent, false); return new WifiViewHolder(v, (DeviceConnectPresenter) devicePresenter); } |
Now, when the viewholder of type WifiViewHolder is inflated the app displays a list of available wifi networks and on clicking any of the Wifi items the app asks the user to enter the credentials of the WiFi network. Below is how the app looks when the available wifi networks are loaded and displayed and also when we click on any of the item in the list.
References :
- Android manipulating Wifi networks using WiFiManager : https://medium.com/@josiassena/android-manipulating-wifi-using-the-wifimanager-9af77cb04c6a
- Kotlin broadcast intents and receivers : https://www.techotopia.com/index.php/Kotlin_Android_Broadcast_Intents_and_Broadcast_Receivers
- Android Viewholder pattern : https://www.javacodegeeks.com/2013/09/android-viewholder-pattern-example.html