QRISFLOW DESIGN IMPROVED

This commit is contained in:
riz081 2025-06-17 14:39:12 +07:00
parent eac3179d8a
commit 448dfd9835
6 changed files with 645 additions and 380 deletions

View File

@ -158,7 +158,7 @@ public class MainActivity extends AppCompatActivity {
if (cardView != null) {
cardView.setOnClickListener(v -> {
if (cardId == R.id.card_kartu_kredit) {
startActivity(new Intent(MainActivity.this, CreditCardActivity.class));
startActivity(new Intent(MainActivity.this, PaymentActivity.class));
} else if (cardId == R.id.card_kartu_debit) {
startActivity(new Intent(MainActivity.this, PaymentActivity.class));
} else if (cardId == R.id.card_qris) {

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#F0F0F0"/>
<corners android:radius="8dp"/>
<stroke android:width="1dp" android:color="#E0E0E0"/>
</shape>

View File

@ -0,0 +1,5 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#E31937"/>
<corners android:radius="8dp"/>
<solid android:color="@android:color/transparent"/>
</shape>

View File

@ -0,0 +1,5 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#F0F0F0"/>
<corners android:radius="24dp"/>
<stroke android:width="1dp" android:color="#E0E0E0"/>
</shape>

View File

@ -1,223 +1,241 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFFFFF">
android:background="#F5F5F5"
tools:context=".QrisResultActivity">
<!-- Red Status Bar -->
<!-- Header Background -->
<View
android:id="@+id/header_background"
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="#E31937" />
<!-- Header with Back Navigation -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_height="100dp"
android:background="#E31937"
android:paddingBottom="16dp">
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<LinearLayout
android:id="@+id/back_navigation"
<!-- Back Navigation -->
<LinearLayout
android:id="@+id/back_navigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:padding="16dp"
android:layout_marginTop="24dp"
android:background="?android:attr/selectableItemBackground"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="@+id/backArrow"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_arrow_back"
android:layout_marginEnd="8dp" />
<TextView
android:id="@+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_marginStart="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:padding="8dp"
android:clickable="true"
android:focusable="true">
android:text="Generate QR"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
android:fontFamily="@font/inter" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginEnd="8dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kembali"
android:textColor="@android:color/white"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<!-- White Card Container -->
<!-- Main Content Card -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:id="@+id/main_card"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_marginTop="0dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
app:cardCornerRadius="16dp"
app:cardElevation="8dp"
app:cardBackgroundColor="@android:color/white">
app:layout_constraintTop_toBottomOf="@id/header_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@id/cancel_button"
app:layout_constraintVertical_bias="0.3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="24dp"
android:gravity="center_horizontal">
android:padding="32dp"
android:gravity="center">
<!-- Generate QR Title -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Generate QR"
android:textColor="@android:color/black"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginBottom="24dp" />
<!-- QRIS Logo Text -->
<!-- QRIS Logo -->
<TextView
android:id="@+id/qris_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QRIS"
android:textColor="@android:color/black"
android:textSize="32sp"
android:textStyle="bold"
android:fontFamily="monospace"
android:layout_marginBottom="24dp" />
android:textColor="#000000"
android:letterSpacing="0.1"
android:layout_marginBottom="24dp"
android:fontFamily="@font/inter" />
<!-- QR Code -->
<ImageView
android:id="@+id/qrImageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:contentDescription="QRIS QR Code"
android:scaleType="fitCenter"
android:background="#F0F0F0"
android:layout_marginBottom="24dp" />
android:layout_width="240dp"
android:layout_height="240dp"
android:layout_marginBottom="24dp"
android:scaleType="centerInside"
android:background="#FFFFFF"
android:padding="8dp" />
<!-- Amount Display -->
<!-- Amount -->
<TextView
android:id="@+id/amountTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RP.200.000"
android:textColor="@android:color/black"
android:textSize="20sp"
android:textSize="24sp"
android:textStyle="bold"
android:layout_marginBottom="16dp" />
android:textColor="#333333"
android:layout_marginBottom="16dp"
android:fontFamily="@font/inter" />
<!-- Timer/Counter -->
<!-- Timer -->
<TextView
android:id="@+id/timerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_width="48dp"
android:layout_height="48dp"
android:text="60"
android:textColor="#E31937"
android:textSize="18sp"
android:textStyle="bold"
android:layout_marginBottom="24dp" />
<!-- QR Refresh Status -->
<TextView
android:id="@+id/qrStatusTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QR Code akan refresh dalam"
android:textColor="#666666"
android:textSize="12sp"
android:layout_marginBottom="16dp"
android:visibility="visible" />
android:gravity="center"
android:background="@drawable/timer_circle_background"
android:fontFamily="@font/inter" />
<!-- Action Buttons Section -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="16dp">
<!-- Download QRIS Button -->
<Button
android:id="@+id/downloadQrisButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginBottom="8dp"
android:text="Download QRIS"
android:textColor="@android:color/white"
android:textSize="14sp"
android:background="#4CAF50"
android:visibility="visible" />
<!-- Check Payment Status Button -->
<Button
android:id="@+id/checkStatusButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginBottom="8dp"
android:text="Check Payment Status"
android:textColor="@android:color/white"
android:textSize="14sp"
android:background="#2196F3"
android:visibility="visible" />
<!-- Return to Main Button -->
<Button
android:id="@+id/returnMainButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="Return to Main"
android:textColor="@android:color/white"
android:textSize="14sp"
android:background="#FF9800"
android:visibility="visible" />
</LinearLayout>
<!-- Hidden views for compatibility -->
<TextView
android:id="@+id/referenceTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reference ID: ref-12345"
android:textColor="@android:color/black"
android:textSize="14sp"
android:visibility="gone" />
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<TextView
android:id="@+id/statusTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Payment Status Success"
android:textColor="@android:color/black"
android:textSize="18sp"
android:visibility="gone" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Spacer to push button to bottom -->
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- Bottom Cancel Button -->
<!-- Cancel Button -->
<Button
android:id="@+id/cancelButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_margin="16dp"
android:id="@+id/cancel_button"
android:layout_width="0dp"
android:layout_height="52dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="32dp"
android:text="Batalkan"
android:textColor="#E31937"
android:textSize="16sp"
android:textStyle="normal"
android:background="@android:color/transparent"
style="?android:attr/borderlessButtonStyle" />
android:textStyle="bold"
android:background="@drawable/button_cancel_background"
android:fontFamily="@font/inter"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</LinearLayout>
<!-- Hidden Elements for Functionality -->
<TextView
android:id="@+id/referenceTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/statusTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/qrStatusTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/downloadQrisButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/checkStatusButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/returnMainButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<!-- Success Screen (Full Screen Overlay) -->
<LinearLayout
android:id="@+id/success_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#E31937"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!-- Success Icon -->
<ImageView
android:id="@+id/success_icon"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_success_payment"
android:layout_marginBottom="32dp"
android:scaleType="centerInside"/>
<!-- Success Message -->
<TextView
android:id="@+id/success_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pembayaran Berhasil"
android:textColor="@android:color/white"
android:textSize="24sp"
android:textStyle="bold"
android:fontFamily="@font/inter"
android:gravity="center"
android:letterSpacing="0.02"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>