added attrset for the custom loading view

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

@@ -24,7 +24,7 @@
             app:layout_constraintTop_toTopOf="parent" />
 
 
-        <com.apprajapati.circlepoints.CirclePointsView
+        <com.apprajapati.loadingviews.CirclePointsView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginStart="32dp"

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

@@ -8,6 +8,7 @@
 
     <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="match_parent"
+        android:background="@color/black"
         android:layout_height="match_parent">
 
 <!--        <com.apprajapati.myanimations.ui.fragments.progressview.ProgressCustomView-->
@@ -20,9 +21,11 @@
 <!--            app:layout_constraintTop_toTopOf="parent" />-->
 
         <com.apprajapati.loadingviews.CircularLoadingView
-            android:layout_width="60dp"
-            android:layout_height="60dp"
+            android:layout_width="100dp"
+            android:layout_height="100dp"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:duration="1000"
+            app:circleWidth="20"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />

build.gradle.kts

@@ -7,8 +7,8 @@ buildscript {
         maven(url = "https://jitpack.io")
     }
     dependencies {
-        classpath ("com.android.tools.build:gradle:8.1.1")
-        classpath ("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.22")
+        classpath("com.android.tools.build:gradle:8.1.1")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.22")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -20,6 +20,6 @@ plugins {
 //    id("org.jetbrains.kotlin.android") version "1.8.0" apply false
 }
 
-tasks.create<Delete>("clean"){
+tasks.create<Delete>("clean") {
     delete(rootProject.buildDir)
 }

customLoadingViews/src/main/java/com/apprajapati/loadingviews/CircularLoadingView.kt

@@ -8,19 +8,21 @@ import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.PointF
 import android.graphics.RectF
+import android.os.Handler
+import android.os.Looper
 import android.util.AttributeSet
+import android.util.Log
 import android.view.View
+import android.view.animation.AccelerateInterpolator
+import android.view.animation.AlphaAnimation
 import android.view.animation.DecelerateInterpolator
+import androidx.core.content.ContextCompat
+import androidx.core.view.updateLayoutParams
 
-class CircularLoadingView(context: Context, attributeSet: AttributeSet) : View(context, attributeSet), Runnable{
+class CircularLoadingView(context: Context, attributeSet: AttributeSet) :
+    View(context, attributeSet), Runnable {
 
-    private val centerXY= PointF(0f, 0f)
-    private val mCirclePaint = Paint().apply{
-        isAntiAlias = true
-        style = Paint.Style.STROKE //stroke will make one layer only, fill will draw a filled circle.
-        color = Color.BLACK
-        strokeWidth = 10f
-    }
+    private val centerXY = PointF(0f, 0f)
 
     var minHeight = 0f //Minimum height and width of the view.
         get() = field
@@ -34,50 +36,97 @@ class CircularLoadingView(context: Context, attributeSet: AttributeSet) : View(c
 
     var valueAnimator = ValueAnimator()
     var fadeAnimator = ValueAnimator()
+    var circleColor = Color.WHITE
+    var animationDuration = 1000
+    var circleWidth = 15f
+
+    private var mCirclePaint = Paint()
+    private var outerCirclePaint = Paint()
+    private var shownOuter = false
+
+    private val handler = Handler(Looper.getMainLooper())
+
+    init {
+        val setValues =
+            context.obtainStyledAttributes(attributeSet, R.styleable.CircularLoadingView, 0, 0)
+        animationDuration =
+            setValues.getInteger(R.styleable.CircularLoadingView_duration, animationDuration)
+        // circleColor = setValues.getColor(R.styleable.CircularLoadingView_circleColor, Color.BLACK)
+        circleWidth = setValues.getFloat(R.styleable.CircularLoadingView_circleWidth, circleWidth)
+        setValues.recycle()
+
+        mCirclePaint = Paint()
+        mCirclePaint.isAntiAlias = true
+        mCirclePaint.style =
+            Paint.Style.STROKE //stroke will make one layer only, fill will draw a filled circle.
+        mCirclePaint.color = circleColor
+        mCirclePaint.strokeWidth = circleWidth
+
+        outerCirclePaint = Paint()
+        outerCirclePaint.isAntiAlias = true
+        outerCirclePaint.style =
+            Paint.Style.STROKE //stroke will make one layer only, fill will draw a filled circle.
+        outerCirclePaint.color = ContextCompat.getColor(context, R.color.black_fade)
+        outerCirclePaint.alpha = 100
+        outerCirclePaint.strokeWidth = circleWidth / 2
+    }
 
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec)
         //centerXY.getCenterXY() //at this point in this method doesn't give the correct center points.
-        //viewRect.set(centerXY.x, centerXY.y, minHeight, minHeight)
         outerCircleRadius = minHeight
     }
 
     override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
         super.onSizeChanged(w, h, oldw, oldh)
         //Always pick the minimum value as a radius so full circle can be seen.
-        if(w < h){
-            minHeight = w.toFloat().div(2)-5
-        }else{
-            minHeight = h.toFloat().div(2)-5
+        if (w < h) {
+            minHeight = w.toFloat()
+                .div(2) - circleWidth / 2  //-circleWidth so it doesn't get cropped when width is too big.
+        } else {
+            minHeight = h.toFloat().div(2) - circleWidth / 2
         }
 
-        if(w == h){
-            minHeight = w.toFloat().div(2)-5
+        if (w == h) {
+            minHeight = w.toFloat().div(2) - circleWidth / 2
         }
-
-        mCirclePaint.strokeWidth = minHeight/8
+        centerXY.getCenterXY()
         animateProgress()
     }
 
     override fun onDraw(canvas: Canvas) {
-        centerXY.getCenterXY()
-
         canvas.drawCircle(centerXY.x, centerXY.y, radius, mCirclePaint)
+
+        if (shownOuter.not()) {
+            canvas.drawCircle(centerXY.x, centerXY.y, minHeight, outerCirclePaint)
+        }
     }
 
-    fun PointF.getCenterXY(){
+    fun PointF.getCenterXY() {
         x = width.toFloat().div(2) //width/2).toFloat()
         y = height.toFloat().div(2) //height/2).toFloat()
     }
 
-    fun animateProgress(){
-        val valuesHolder= PropertyValuesHolder.ofFloat("progressValue", 0f, minHeight)
+    private fun getColorRange(): PropertyValuesHolder {
+        if (circleColor == Color.BLACK) {
+            return PropertyValuesHolder.ofInt("colorValues", 0, 255)
+        } else {
+            return PropertyValuesHolder.ofInt("colorValues", 255, 210, 200, 0)
+        }
+    }
+
+    fun animateProgress() {
+        val valuesHolder = PropertyValuesHolder.ofFloat("progressValue", 0f, minHeight)
+
+        val colorValues = getColorRange() //0 being black and 255 being white.
 
-        val colorValues = PropertyValuesHolder.ofInt("colorValues",  0, 255) //0 being black and 255 being white.
+        handler.postDelayed({
+            shownOuter = true
+        }, 500)
 
         valueAnimator = ValueAnimator().apply {
             setValues(valuesHolder, colorValues)
-            duration = 1200
+            duration = animationDuration.toLong()
             repeatCount = ValueAnimator.INFINITE
 
             interpolator = DecelerateInterpolator(2f) //10f does give some interesting effects
@@ -101,6 +150,7 @@ class CircularLoadingView(context: Context, attributeSet: AttributeSet) : View(c
         super.onDetachedFromWindow()
         valueAnimator.end()
     }
+
     override fun run() {
         TODO("Not yet implemented")
     }

customLoadingViews/src/main/res/values/attrs.xml

@@ -22,4 +22,10 @@
 
     </declare-styleable>
 
+    <declare-styleable name="CircularLoadingView">
+        <attr name="duration" format="integer" />
+<!--        <attr name="circleColor" format="color" />-->
+        <attr name="circleWidth" format="float" />
+    </declare-styleable>
+
 </resources>

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

@@ -7,6 +7,8 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
 
+    <color name="black_fade">#F0F0F0</color>
+
     <color name="colorPrimary">#3F51B5</color>
     <color name="colorPrimaryDark">#303F9F</color>
     <color name="primary_light">#C5CAE9</color>