Circle Video Guide Block Implemetation with Close Button

Author: jenisha010

app/src/main/java/com/contextu/al/circlevideo/CircleVideoGuideBlock.kt

@@ -0,0 +1,55 @@
+package com.contextu.al.circlevideo
+
+import android.app.Activity
+import android.app.Dialog
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.ColorDrawable
+import android.os.Bundle
+import android.util.DisplayMetrics
+import android.view.Window
+import android.view.WindowManager
+import com.contextu.al.R
+import com.google.android.material.floatingactionbutton.FloatingActionButton
+
+class CircleVideoGuideBlock(private val activity: Activity): Dialog(activity) {
+    init {
+        requestWindowFeature(Window.FEATURE_NO_TITLE)
+        window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
+        window?.setDimAmount(0f)
+    }
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+    }
+
+    fun show(url: String){
+        setContentView(R.layout.circle_video)
+        val container:CircularWebViewContainer = findViewById(R.id.container)
+        val webView:CircularWebView = findViewById(R.id.webView)
+        val btnClose:FloatingActionButton = findViewById(R.id.btnClose)
+        //create code to support video inside web-view
+        val webSettings = webView.settings
+        webSettings.javaScriptEnabled = true
+        webSettings.loadWithOverviewMode = true
+        webSettings.useWideViewPort = true
+        webSettings.domStorageEnabled = true
+        webSettings.setSupportZoom(false)
+        webSettings.builtInZoomControls = true
+        webSettings.displayZoomControls = false
+
+        val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
+        val displayMetrics = DisplayMetrics()
+        windowManager.defaultDisplay.getMetrics(displayMetrics)
+        val width = displayMetrics.widthPixels * 0.90
+
+        container.layoutParams.width = width.toInt()
+        container.layoutParams.height = width.toInt()
+
+        webView.loadUrl(url)
+        btnClose.setOnClickListener {
+            dismiss()
+        }
+        show()
+    }
+}

app/src/main/java/com/contextu/al/circlevideo/CircularWebView.kt

@@ -0,0 +1,68 @@
+package com.contextu.al.circlevideo
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Path
+import android.util.AttributeSet
+import android.webkit.WebView
+import android.widget.FrameLayout
+class CircularWebViewContainer : FrameLayout {
+    private val clipPath = Path()
+
+    constructor(context: Context) : super(context) {
+        init()
+    }
+
+    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
+        init()
+    }
+
+    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
+        context,
+        attrs,
+        defStyleAttr
+    ) {
+        init()
+    }
+
+    private fun init() {
+        // Enable hardware acceleration to improve performance
+        setLayerType(LAYER_TYPE_HARDWARE, null)
+    }
+
+    override fun dispatchDraw(canvas: Canvas) {
+        val save = canvas.save()
+        canvas.clipPath(clipPath)
+        super.dispatchDraw(canvas)
+        canvas.restoreToCount(save)
+    }
+
+    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+        super.onSizeChanged(w, h, oldw, oldh)
+        updateClipPath()
+    }
+
+    private fun updateClipPath() {
+        val radius = Math.min(width, height) / 2f
+        val centerX = width / 2f
+        val centerY = height / 2f
+        clipPath.reset()
+        clipPath.addCircle(centerX, centerY, radius, Path.Direction.CW)
+        clipPath.close()
+    }
+}
+
+class CircularWebView : WebView {
+    constructor(context: Context) : super(context)
+
+    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
+
+    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
+        context,
+        attrs,
+        defStyleAttr
+    )
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+    }
+}

app/src/main/res/drawable/ic_close.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
+</vector>

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

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.contextu.al.circlevideo.CircularWebViewContainer
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/container"
+    android:layout_width="400dp"
+    android:layout_height="400dp"
+    android:layout_gravity="center">
+
+    <com.contextu.al.circlevideo.CircularWebView
+        android:id="@+id/webView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_gravity="center">
+
+    </com.contextu.al.circlevideo.CircularWebView>
+    <!-- Close Button -->
+    <com.google.android.material.floatingactionbutton.FloatingActionButton
+        android:id="@+id/btnClose"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/ic_close"
+        app:fabSize="mini"
+        app:backgroundTint="@color/white"
+        android:layout_margin="10dp"
+        android:layout_gravity="bottom|center"/>
+
+</com.contextu.al.circlevideo.CircularWebViewContainer>