improve payment success UI
This commit is contained in:
parent
46fb81b6a7
commit
191966a2e4
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
BIN
app/src/main/res/drawable/ic_success_payment.png
Normal file
BIN
app/src/main/res/drawable/ic_success_payment.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.0 KiB |
@ -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>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user