update the example project to show online offline feature

app/build.gradle

@@ -1,6 +1,7 @@
 plugins {
     id 'com.android.application'
     id 'kotlin-android'
+    id "kotlin-kapt"
 }
 
 android {
@@ -30,6 +31,9 @@ android {
     kotlinOptions {
         jvmTarget = '1.8'
     }
+    buildFeatures {
+        dataBinding true
+    }
 }
 
 dependencies {

app/src/main/java/com/maku/networkutilexample/MainActivity.kt

@@ -1,26 +1,79 @@
 package com.maku.networkutilexample
 
+import android.animation.Animator
+import android.animation.AnimatorListenerAdapter
 import androidx.appcompat.app.AppCompatActivity
 import android.os.Bundle
 import android.widget.Toast
+import androidx.core.content.ContextCompat
+import androidx.databinding.DataBindingUtil
 import com.maku.networkutil.util.NetworkUtil
+import com.maku.networkutilexample.databinding.ActivityMainBinding
+import com.maku.networkutilexample.util.hide
+import com.maku.networkutilexample.util.show
 
 class MainActivity : AppCompatActivity() {
+
+    //databinding
+    private lateinit var mViewBinding: ActivityMainBinding
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-        setContentView(R.layout.activity_main)
+
+        //initialize the binding
+        mViewBinding = DataBindingUtil.setContentView(this,
+            R.layout.activity_main
+        )
 
         handleNetwork()
     }
 
     private fun handleNetwork() {
         NetworkUtil.getNetworkLiveData(applicationContext).observe(this, { isConnected ->
             if (!isConnected) {
-                Toast.makeText(this, "no internet", Toast.LENGTH_SHORT).show()
+                //Toast.makeText(this, "no internet", Toast.LENGTH_SHORT).show()
+                mViewBinding.textViewNetworkStatus.text = getString(R.string.text_no_connectivity)
+                mViewBinding.networkStatusLayout.apply {
+                    alpha = 0f
+                    show()
+                    setBackgroundColor(
+                        ContextCompat.getColor(
+                            context,
+                            R.color.colorStatusNotConnected
+                        ))
+                    animate()
+                        .alpha(1f)
+                        .setDuration(ANIMATION_DURATION)
+                        .setListener(null)
+                }
             } else {
-                Toast.makeText(this, "internet available", Toast.LENGTH_SHORT).show()
+                //Toast.makeText(this, "internet available", Toast.LENGTH_SHORT).show()
+                mViewBinding.textViewNetworkStatus.text = getString(R.string.text_connectivity)
+                mViewBinding.networkStatusLayout.apply {
+                    setBackgroundColor( ContextCompat.getColor(
+                        context,
+                        R.color.colorStatusConnected
+                    ))
+
+                    animate()
+                        .alpha(0f)
+                        .setStartDelay(ANIMATION_DURATION)
+                        .setDuration(ANIMATION_DURATION)
+                        .setListener(object : AnimatorListenerAdapter() {
+                            override fun onAnimationEnd(animation: Animator) {
+                                hide()
+                            }
+                        })
+                }
             }
         })
     }
 
+    /**
+     * Companion object
+     */
+    companion object {
+        const val ANIMATION_DURATION = 1000.toLong()
+    }
+
 }

app/src/main/java/com/maku/networkutilexample/util/view.kt

@@ -0,0 +1,11 @@
+package com.maku.networkutilexample.util
+
+import android.view.View
+
+fun View.show() {
+    visibility = View.VISIBLE
+}
+
+fun View.hide() {
+    visibility = View.GONE
+}

app/src/main/res/layout/activity_main.xml

@@ -1,18 +1,44 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<layout 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"
-    tools:context=".MainActivity">
+    xmlns:tools="http://schemas.android.com/tools">
 
-    <TextView
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:text="Hello World!"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toRightOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+    <data>
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        tools:context=".MainActivity">
+
+        <LinearLayout
+            android:id="@+id/networkStatusLayout"
+            android:layout_width="match_parent"
+            android:layout_height="50dp"
+            style="@style/StatusView"
+            android:background="@color/colorStatusNotConnected"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent">
+
+            <TextView
+                android:gravity="center"
+                android:id="@+id/textViewNetworkStatus"
+                style="@style/StatusTextView"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                tools:text="@string/text_no_connectivity" />
+        </LinearLayout>
+
+        <TextView
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="Hello World!"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintLeft_toLeftOf="parent"
+            app:layout_constraintRight_toRightOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

app/src/main/res/values/colors.xml

@@ -7,4 +7,7 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+
+    <color name="colorStatusConnected">#43A047</color>
+    <color name="colorStatusNotConnected">#D32F2F</color>
 </resources>

app/src/main/res/values/strings.xml

@@ -1,3 +1,5 @@
 <resources>
     <string name="app_name">NetworkUtilExample</string>
+    <string name="text_no_connectivity">No Internet Connection, please connect …</string>
+    <string name="text_connectivity">Back Online</string>
 </resources>

app/src/main/res/values/themes.xml

@@ -13,4 +13,17 @@
         <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
         <!-- Customize your theme here. -->
     </style>
+
+    <style name="StatusView">
+        <item name="android:orientation">vertical</item>
+        <item name="android:padding">8dp</item>
+        <item name="android:layout_gravity">top</item>
+        <item name="android:visibility">gone</item>
+    </style>
+
+    <style name="StatusTextView">
+        <item name="android:layout_gravity">center</item>
+        <item name="android:textColor">@android:color/white</item>
+    </style>
+
 </resources>