shihaam/thijooree
1
0
Fork 1
Code Issues 14 Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

new NFC tap to pay animation
Auto Tag on Version Change / check-version (push) Failing after 15m0s
Details

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
2026-05-29 23:56:23 +05:00
parent 7f87c9e13f
commit 57bc488b98
1 changed files with 35 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/main/java/sh/sar/basedbank/ui/home/PayWithCardFragment.kt
+35 -46
View File
@@ -875,7 +875,7 @@ ViewCompat.setOnApplyWindowInsetsListener(binding.contentLayout) { v, insets ->
val dp = resources.displayMetrics.density
val progress = animator.animatedFraction
val cx = w / 2f; val cy = h / 2f - 20 * dp
val cx = w / 2f; val cy = h / 2f + 24 * dp
val colorOnSurface = MaterialColors.getColor(this,
com.google.android.material.R.attr.colorOnSurface, android.graphics.Color.BLACK)
@@ -884,70 +884,59 @@ ViewCompat.setOnApplyWindowInsetsListener(binding.contentLayout) { v, insets ->
val colorSurfaceVariant = MaterialColors.getColor(this,
com.google.android.material.R.attr.colorSurfaceVariant, android.graphics.Color.LTGRAY)
// Phone (left of center)
val phoneW = 36 * dp; val phoneH = 62 * dp
val phoneX = cx - 72 * dp - phoneW; val phoneY = cy - phoneH / 2f
// POS terminal (top center)
val posW = 44 * dp; val posH = 72 * dp
val posX = cx - posW / 2f; val posY = cy - 170 * dp
// POS terminal (right of center)
val posW = 30 * dp; val posH = 50 * dp
val posX = cx + 72 * dp; val posY = cy - posH / 2f
// Phone body
paint.style = Paint.Style.FILL; paint.color = colorSurfaceVariant
canvas.drawRoundRect(phoneX, phoneY, phoneX + phoneW, phoneY + phoneH, 6 * dp, 6 * dp, paint)
paint.style = Paint.Style.STROKE; paint.strokeWidth = 2 * dp; paint.color = colorOnSurface
canvas.drawRoundRect(phoneX, phoneY, phoneX + phoneW, phoneY + phoneH, 6 * dp, 6 * dp, paint)
// Phone screen
paint.style = Paint.Style.FILL; paint.color = colorPrimary; paint.alpha = 70
canvas.drawRoundRect(phoneX + 3 * dp, phoneY + 8 * dp,
phoneX + phoneW - 3 * dp, phoneY + phoneH - 12 * dp, 3 * dp, 3 * dp, paint)
paint.alpha = 255
// Static NFC arcs on the right side of phone
paint.style = Paint.Style.STROKE; paint.strokeWidth = 2 * dp; paint.color = colorPrimary
val arcOriginX = phoneX + phoneW
for (i in 1..3) {
val r = i * 10 * dp
paint.alpha = 220 - i * 50
canvas.drawArc(RectF(arcOriginX - r, cy - r, arcOriginX + r, cy + r),
-70f, 140f, false, paint)
}
paint.alpha = 255
// Phone (bottom center)
val phoneW = 52 * dp; val phoneH = 90 * dp
val phoneX = cx - phoneW / 2f; val phoneY = cy + 30 * dp
// POS terminal body
paint.style = Paint.Style.FILL; paint.color = colorSurfaceVariant
canvas.drawRoundRect(posX, posY, posX + posW, posY + posH, 5 * dp, 5 * dp, paint)
paint.style = Paint.Style.STROKE; paint.strokeWidth = 2 * dp; paint.color = colorOnSurface
canvas.drawRoundRect(posX, posY, posX + posW, posY + posH, 5 * dp, 5 * dp, paint)
canvas.drawRoundRect(posX, posY, posX + posW, posY + posH, 7 * dp, 7 * dp, paint)
paint.style = Paint.Style.STROKE; paint.strokeWidth = 2.5f * dp; paint.color = colorOnSurface
canvas.drawRoundRect(posX, posY, posX + posW, posY + posH, 7 * dp, 7 * dp, paint)
// POS screen
paint.style = Paint.Style.FILL; paint.color = colorPrimary; paint.alpha = 70
canvas.drawRoundRect(posX + 3 * dp, posY + 4 * dp,
posX + posW - 3 * dp, posY + posH * 0.45f, 3 * dp, 3 * dp, paint)
canvas.drawRoundRect(posX + 4 * dp, posY + 6 * dp,
posX + posW - 4 * dp, posY + posH * 0.45f, 4 * dp, 4 * dp, paint)
paint.alpha = 255
// POS card slot
paint.style = Paint.Style.STROKE; paint.strokeWidth = 1.5f * dp; paint.color = colorOnSurface
canvas.drawLine(posX + 4 * dp, posY + posH * 0.72f, posX + posW - 4 * dp, posY + posH * 0.72f, paint)
paint.style = Paint.Style.STROKE; paint.strokeWidth = 2 * dp; paint.color = colorOnSurface
canvas.drawLine(posX + 6 * dp, posY + posH * 0.72f, posX + posW - 6 * dp, posY + posH * 0.72f, paint)
// Animated NFC rings travelling from phone toward POS
val gapStart = arcOriginX + 28 * dp
val gapEnd = posX - 4 * dp
val midX = (gapStart + gapEnd) / 2f
paint.style = Paint.Style.STROKE; paint.strokeWidth = 2.5f * dp
// Phone body
paint.style = Paint.Style.FILL; paint.color = colorSurfaceVariant
canvas.drawRoundRect(phoneX, phoneY, phoneX + phoneW, phoneY + phoneH, 8 * dp, 8 * dp, paint)
paint.style = Paint.Style.STROKE; paint.strokeWidth = 2.5f * dp; paint.color = colorOnSurface
canvas.drawRoundRect(phoneX, phoneY, phoneX + phoneW, phoneY + phoneH, 8 * dp, 8 * dp, paint)
// Phone screen
paint.style = Paint.Style.FILL; paint.color = colorPrimary; paint.alpha = 70
canvas.drawRoundRect(phoneX + 4 * dp, phoneY + 10 * dp,
phoneX + phoneW - 4 * dp, phoneY + phoneH - 15 * dp, 4 * dp, 4 * dp, paint)
paint.alpha = 255
// Animated NFC rings originating from phone top, travelling upward toward POS
val gapTop = posY + posH + 4 * dp
val originY = phoneY
val maxR = (originY - gapTop) - 4 * dp
paint.style = Paint.Style.STROKE; paint.strokeWidth = 3 * dp
for (i in 0..2) {
val p = ((progress + i / 3f) % 1f)
val r = p * (gapEnd - gapStart) / 2f + 6 * dp
val r = (p * maxR + 6 * dp).coerceAtMost(maxR)
paint.color = colorPrimary; paint.alpha = ((1f - p) * 200).toInt().coerceIn(0, 255)
canvas.drawArc(RectF(midX - r, cy - r, midX + r, cy + r), -80f, 160f, false, paint)
canvas.drawArc(RectF(cx - r, originY - r, cx + r, originY + r), -160f, 140f, false, paint)
}
paint.alpha = 255
// Label
paint.style = Paint.Style.FILL; paint.color = colorOnSurface; paint.alpha = 160
paint.textSize = 14 * dp; paint.textAlign = Paint.Align.CENTER
canvas.drawText(context.getString(R.string.card_pay_nfc), cx, cy + 60 * dp, paint)
paint.textSize = 15 * dp; paint.textAlign = Paint.Align.CENTER
canvas.drawText(context.getString(R.string.card_pay_nfc), cx, phoneY + phoneH + 28 * dp, paint)
paint.alpha = 255; paint.textAlign = Paint.Align.LEFT
}
}