add loading view

gradle.properties

@@ -1,5 +1,5 @@
 org.gradle.jvmargs=-Xmx1536m
-VERSION_NAME=1.1.12
-VERSION_CODE=23
+VERSION_NAME=1.1.13
+VERSION_CODE=24
 android.useAndroidX=true
 android.enableJetifier=true

lib/build.gradle

@@ -44,6 +44,7 @@ dependencies {
         // excluding org.json which is provided by Android
         exclude group: 'org.json', module: 'json'
     }
+    implementation 'com.airbnb.android:lottie:3.0.1'
 }
 
 apply from: rootProject.file('deploy.gradle')

lib/src/main/java/co/opensi/kkiapay/uikit/CustomTabActivity.kt

@@ -5,10 +5,14 @@ import android.annotation.TargetApi
 import android.app.Activity
 import android.content.Intent
 import android.graphics.Bitmap
+import android.graphics.Color
 import android.os.Build
 import android.os.Bundle
+import android.transition.Visibility
 import android.util.Log
+import android.view.View
 import android.webkit.*
+import android.widget.Toast
 import androidx.appcompat.app.AppCompatActivity
 import co.opensi.kkiapay.R
 import co.opensi.kkiapay.uikit.Me.Companion.KKIAPAY_TRANSACTION_ID
@@ -25,6 +29,13 @@ internal class CustomTabActivity: AppCompatActivity() {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.custom_tab_activity)
 
+        loading_view.playAnimation()
+
+        web_view.setBackgroundColor(0x00000000);
+        web_view.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
+
+        web_view.settings
+
         intent?.run {
             val url = getStringExtra(EXTRA_URL)
             web_view.run {
@@ -59,7 +70,10 @@ internal class CustomTabActivity: AppCompatActivity() {
 
                     override fun onPageFinished(view: WebView?, url: String?) {
                         super.onPageFinished(view, url)
+                        loading_view.visibility = View.GONE
+                        loading_view.cancelAnimation()
                         Log.i("CustomTabActivity", "onPageFinished")
+                        Log.e("CustomTabActivity", "onPageFinished " +  url)
                     }
 
                     @TargetApi(Build.VERSION_CODES.LOLLIPOP)

lib/src/main/res/layout/custom_tab_activity.xml

@@ -1,9 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
-<WebView xmlns:android="http://schemas.android.com/apk/res/android"
-         android:layout_width="match_parent"
-         android:layout_height="match_parent"
-         android:id="@+id/web.view"
-         android:paddingBottom="@dimen/activity_vertical_margin"
-         android:paddingLeft="@dimen/activity_horizontal_margin"
-         android:paddingRight="@dimen/activity_horizontal_margin"
-         android:paddingTop="@dimen/activity_vertical_margin"/>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:background="@android:color/white"
+    android:layout_height="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <WebView android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:id="@+id/web.view"
+        android:background="@android:color/white"
+        android:paddingBottom="@dimen/activity_vertical_margin"
+        android:paddingLeft="@dimen/activity_horizontal_margin"
+        android:paddingRight="@dimen/activity_horizontal_margin"
+        android:paddingTop="@dimen/activity_vertical_margin"/>
+
+    <com.airbnb.lottie.LottieAnimationView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:scaleType="centerCrop"
+        android:layout_centerInParent="true"
+        android:id="@+id/loading_view"
+        app:lottie_rawRes="@raw/load"
+        app:lottie_loop="true"
+        app:lottie_autoPlay="true" />
+</RelativeLayout>
+

lib/src/main/res/raw/load.json

@@ -0,0 +1 @@
+{"v":"4.6.0","fr":29.9700012207031,"ip":0,"op":61.0000024845809,"w":400,"h":400,"nm":"Comp 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 2","refId":"comp_1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.372,"y":0.995},"o":{"x":0.333,"y":0},"n":"0p372_0p995_0p333_0","t":-1,"s":[-63.707,132,0],"e":[508.793,132,0],"to":[95.4166641235352,0,0],"ti":[-95.4166641235352,0,0]},{"t":65.0000026475043}]},"a":{"a":0,"k":[200,200,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"w":400,"h":400,"ip":-1.00000004073083,"op":899.000036617021,"st":-1.00000004073083,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":0,"nm":"Pre-comp 2","refId":"comp_1","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0.663,"y":0.994},"o":{"x":0.333,"y":0},"n":"0p663_0p994_0p333_0","t":47,"s":[-120.707,132,0],"e":[480.293,132,0],"to":[100.166664123535,0,0],"ti":[-100.166664123535,0,0]},{"t":120.0000048877}]},"a":{"a":0,"k":[200,200,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"w":400,"h":400,"ip":47.0000019143492,"op":947.000038572101,"st":47.0000019143492,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Master","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[198,192,0]},"a":{"a":0,"k":[146.5,5.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-2.858,0],[0,0],[0,-2.858],[2.859,0],[0,0],[0,2.858]],"o":[[0,0],[2.859,0],[0,2.858],[0,0],[-2.858,0],[0,-2.858]],"v":[[-140.825,-5.175],[140.825,-5.175],[146,0.001],[140.825,5.175],[-140.825,5.175],[-146,0.001]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.973,0.973,0.973,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[146.25,5.425],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 5/progressbar-final Outlines","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[296,260,0]},"a":{"a":0,"k":[76.5,5.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-2.858,0],[0,0],[0,-2.859],[2.859,0],[0,0],[0,2.857]],"o":[[0,0],[2.859,0],[0,2.857],[0,0],[-2.858,0],[0,-2.859]],"v":[[-70.825,-5.175],[70.825,-5.175],[76,0],[70.825,5.175],[-70.825,5.175],[-76,0]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.89,0.204,0.184,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[76.25,5.425],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 4/progressbar-final Outlines","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[86,260,0]},"a":{"a":0,"k":[22.5,5.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-2.858,0],[0,0],[0,-2.859],[2.858,0],[0,0],[0,2.857]],"o":[[0,0],[2.858,0],[0,2.857],[0,0],[-2.858,0],[0,-2.859]],"v":[[-16.825,-5.175],[16.825,-5.175],[22,0],[16.825,5.175],[-16.825,5.175],[-22,0]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.89,0.204,0.184,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[22.25,5.425],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 3/progressbar-final Outlines","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[164,260,0]},"a":{"a":0,"k":[40,5.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[-2.858,0],[0,0],[0,-2.859],[2.858,0],[0,0],[0,2.857]],"o":[[0,0],[2.858,0],[0,2.857],[0,0],[-2.858,0],[0,-2.859]],"v":[[-34.325,-5.175],[34.325,-5.175],[39.5,0],[34.325,5.175],[-34.325,5.175],[-39.5,0]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.89,0.204,0.184,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[39.75,5.425],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 1","refId":"comp_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[202.032,208.014,0]},"a":{"a":0,"k":[200,200,0]},"s":{"a":0,"k":[99.979,100,100]}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[4.821,0],[0,0],[0,-4.821],[-4.821,0],[0,0],[0,2.771]],"o":[[0,0],[-4.821,0],[0,4.821],[0,0],[4.821,0],[0,-2.417]],"v":[[337.122,186.522],[59.625,186.49],[52.02,192.229],[59.708,197.449],[337.205,197.481],[343.914,191.917]],"c":true}},"o":{"a":0,"k":100},"x":{"a":0,"k":0},"nm":"Mask 2"}],"w":400,"h":400,"ip":0,"op":900.000036657751,"st":0,"bm":0,"sr":1}]}