improve payment success UI

This commit is contained in:
riz081 2025-05-30 14:59:46 +07:00
parent 46fb81b6a7
commit 191966a2e4
3 changed files with 84 additions and 21 deletions

View File

@ -301,7 +301,7 @@ public class PinActivity extends AppCompatActivity {
// In real implementation, this would call backend API // In real implementation, this would call backend API
if (isValidPin(pin)) { if (isValidPin(pin)) {
// Don't show toast, show success screen instead // Show success screen instead of toast
handleSuccessfulVerification(); handleSuccessfulVerification();
} else { } else {
showToast("PIN tidak valid. Silakan coba lagi."); showToast("PIN tidak valid. Silakan coba lagi.");
@ -323,38 +323,100 @@ public class PinActivity extends AppCompatActivity {
// Show full screen success message // Show full screen success message
showSuccessScreen(); showSuccessScreen();
// Navigate to receipt page after 2-3 seconds // Navigate to receipt page after 2.5 seconds
animationHandler.postDelayed(() -> { animationHandler.postDelayed(() -> {
navigateToReceiptPage(); navigateToReceiptPage();
}, 2500); // 2.5 seconds delay }, 2500);
} }
private void showSuccessScreen() { private void showSuccessScreen() {
if (successScreen != null) { if (successScreen != null) {
// Hide all other UI components first
hideMainUIComponents();
// Set success message // Set success message
if (successMessage != null) { if (successMessage != null) {
successMessage.setText("Pembayaran berhasil!"); successMessage.setText("Pembayaran Berhasil");
} }
// Show success screen with fade in animation // Show success screen with fade in animation
successScreen.setVisibility(View.VISIBLE); successScreen.setVisibility(View.VISIBLE);
successScreen.setAlpha(0f); successScreen.setAlpha(0f);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(successScreen, "alpha", 0f, 1f); // Fade in the background
fadeIn.setDuration(500); ObjectAnimator backgroundFadeIn = ObjectAnimator.ofFloat(successScreen, "alpha", 0f, 1f);
fadeIn.start(); backgroundFadeIn.setDuration(500);
backgroundFadeIn.start();
// Add scale animation to success icon // Add scale and bounce animation to success icon
if (successIcon != null) { if (successIcon != null) {
ObjectAnimator scaleX = ObjectAnimator.ofFloat(successIcon, "scaleX", 0f, 1f); // Start with invisible icon
ObjectAnimator scaleY = ObjectAnimator.ofFloat(successIcon, "scaleY", 0f, 1f); successIcon.setScaleX(0f);
successIcon.setScaleY(0f);
successIcon.setAlpha(0f);
// Scale animation with bounce effect
ObjectAnimator scaleX = ObjectAnimator.ofFloat(successIcon, "scaleX", 0f, 1.2f, 1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(successIcon, "scaleY", 0f, 1.2f, 1f);
ObjectAnimator iconFadeIn = ObjectAnimator.ofFloat(successIcon, "alpha", 0f, 1f);
AnimatorSet iconAnimation = new AnimatorSet(); AnimatorSet iconAnimation = new AnimatorSet();
iconAnimation.playTogether(scaleX, scaleY); iconAnimation.playTogether(scaleX, scaleY, iconFadeIn);
iconAnimation.setDuration(600); iconAnimation.setDuration(800);
iconAnimation.setStartDelay(200); iconAnimation.setStartDelay(300);
iconAnimation.setInterpolator(new android.view.animation.OvershootInterpolator(1.2f));
iconAnimation.start(); iconAnimation.start();
} }
// Add slide up animation to success message
if (successMessage != null) {
successMessage.setAlpha(0f);
successMessage.setTranslationY(50f);
ObjectAnimator messageSlideUp = ObjectAnimator.ofFloat(successMessage, "translationY", 50f, 0f);
ObjectAnimator messageFadeIn = ObjectAnimator.ofFloat(successMessage, "alpha", 0f, 1f);
AnimatorSet messageAnimation = new AnimatorSet();
messageAnimation.playTogether(messageSlideUp, messageFadeIn);
messageAnimation.setDuration(600);
messageAnimation.setStartDelay(600);
messageAnimation.setInterpolator(new android.view.animation.DecelerateInterpolator());
messageAnimation.start();
}
}
}
private void hideMainUIComponents() {
// Hide all main UI components to create clean full screen success
if (backNavigation != null) {
backNavigation.setVisibility(View.GONE);
}
// Hide the red header backgrounds
View redStatusBar = findViewById(R.id.red_status_bar);
View redHeaderBackground = findViewById(R.id.red_header_background);
if (redStatusBar != null) {
redStatusBar.setVisibility(View.GONE);
}
if (redHeaderBackground != null) {
redHeaderBackground.setVisibility(View.GONE);
}
// Hide PIN card
View pinCard = findViewById(R.id.pin_card);
if (pinCard != null) {
pinCard.setVisibility(View.GONE);
}
// Hide numpad
View numpadGrid = findViewById(R.id.numpad_grid);
if (numpadGrid != null) {
numpadGrid.setVisibility(View.GONE);
}
// Hide confirm button
if (confirmButton != null) {
confirmButton.setVisibility(View.GONE);
} }
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -255,7 +255,7 @@
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0"/> app:layout_constraintVertical_bias="0"/>
<!-- Success Screen (Full Screen Overlay) --> <!-- Success Screen (Full Screen Overlay) - IMPROVED VERSION -->
<LinearLayout <LinearLayout
android:id="@+id/success_screen" android:id="@+id/success_screen"
android:layout_width="match_parent" android:layout_width="match_parent"
@ -272,23 +272,24 @@
<!-- Success Icon --> <!-- Success Icon -->
<ImageView <ImageView
android:id="@+id/success_icon" android:id="@+id/success_icon"
android:layout_width="80dp" android:layout_width="120dp"
android:layout_height="80dp" android:layout_height="120dp"
android:src="@drawable/ic_check_circle" android:src="@drawable/ic_success_payment"
android:tint="@android:color/white" android:layout_marginBottom="32dp"
android:layout_marginBottom="24dp"/> android:scaleType="centerInside"/>
<!-- Success Message --> <!-- Success Message -->
<TextView <TextView
android:id="@+id/success_message" android:id="@+id/success_message"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="Pembayaran berhasil!" android:text="Pembayaran Berhasil"
android:textColor="@android:color/white" android:textColor="@android:color/white"
android:textSize="24sp" android:textSize="24sp"
android:textStyle="bold" android:textStyle="bold"
android:fontFamily="@font/inter" android:fontFamily="@font/inter"
android:gravity="center"/> android:gravity="center"
android:letterSpacing="0.02"/>
</LinearLayout> </LinearLayout>