diff --git a/app/src/main/java/sh/sar/basedbank/ui/home/PayWithCardFragment.kt b/app/src/main/java/sh/sar/basedbank/ui/home/PayWithCardFragment.kt index 58dc99d..761d223 100644 --- a/app/src/main/java/sh/sar/basedbank/ui/home/PayWithCardFragment.kt +++ b/app/src/main/java/sh/sar/basedbank/ui/home/PayWithCardFragment.kt @@ -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 } }