It’s pretty common to face connectivity issues and when the user has no Internet connection he should be shown an appropriate response rather than allowing him to send requests to the server. Let’s have a look how we are handling such cases in Open Event Android
Firstly we need to add the required permission in the manifest. We need the permission to access the user’s WiFi state and network state.
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
We use this function to check if the user is connected to the Internet. This function return a Boolean which is true if the user is connected to the Internet otherwise it is false
private fun isNetworkConnected(): Boolean { val connectivityManager = context?.getSystemService(Context.CONNECTIVITY_SERVICE) as? ConnectivityManager return connectivityManager?.activeNetworkInfo != null }
This function is used to decide which screen should be shown to the user. If the user has an active Internet connection he will see events fragment but if there is no Internet he will see the no Internet card.
private fun showNoInternetScreen(show: Boolean) { rootView.homeScreenLL.visibility = if (show) View.VISIBLE else View.GONE rootView.noInternetCard.visibility = if (!show) View.VISIBLE else View.GONE }
Let’s see how the above two functions are used in the events fragment. When the app starts we check if there is a need to show the no Internet screen. If the user is not connected to the Internet, the no Internet card will be shown. Then when the user clicks on retry, the events fragment is shown again if the user is connected to the Internet.
showNoInternetScreen(isNetworkConnected())
rootView.retry.setOnClickListener {
showNoInternetScreen(isNetworkConnected())
}
Let’s have a look a how the XML code looks, here we are only seeing a part of the code as the rest is pretty obvious. We have cardView and inside it all the views ie ImageView,TextView are inside a LinearLayout which has a vertical orientation so that all these views appear below each other.
<android.support.v7.widget.CardView android:id="@+id/noInternetCard" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/layout_margin_medium" app:cardBackgroundColor="@color/white" app:cardCornerRadius="@dimen/card_corner_radius" app:cardElevation="@dimen/card_elevation"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/layout_margin_extra_large" android:orientation="vertical"> <ImageView android:id="@+id/noInternetImageView" android:layout_width="@dimen/item_image_view_large" android:layout_height="@dimen/item_image_view_large" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/layout_margin_large" android:scaleType="centerCrop" app:srcCompat="@drawable/ic_no_internet" /> <TextView android:id="@+id/noInternetTextview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="@dimen/layout_margin_large" android:text="@string/no_internet_message" android:textSize="@dimen/text_size_medium" tools:text="No Internet" />
References
- AndroidHive tutorial – https://www.androidhive.info/2012/07/android-detect-internet-connection-status/
- Official Android Documentation – https://developer.android.com/training/monitoring-device-state/connectivity-monitoring
- StackOverflow – https://stackoverflow.com/questions/9570237/android-check-internet-connection