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) { if (cardView != null) {
cardView.setOnClickListener(v -> { cardView.setOnClickListener(v -> {
if (cardId == R.id.card_kartu_kredit) { 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) { } else if (cardId == R.id.card_kartu_debit) {
startActivity(new Intent(MainActivity.this, PaymentActivity.class)); startActivity(new Intent(MainActivity.this, PaymentActivity.class));
} else if (cardId == R.id.card_qris) { } 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"?> <?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:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_height="match_parent"
android:orientation="vertical" android:background="#F5F5F5"
android:background="#FFFFFF"> tools:context=".QrisResultActivity">
<!-- Red Status Bar --> <!-- Header Background -->
<View <View
android:id="@+id/header_background"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="44dp" android:layout_height="100dp"
android:background="#E31937" />
<!-- Header with Back Navigation -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#E31937" android:background="#E31937"
android:paddingBottom="16dp"> app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<LinearLayout <!-- Back Navigation -->
android:id="@+id/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_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal" android:text="Generate QR"
android:gravity="center_vertical" android:textColor="@android:color/white"
android:layout_marginStart="16dp" android:textSize="18sp"
android:background="?attr/selectableItemBackgroundBorderless" android:textStyle="bold"
android:padding="8dp" android:fontFamily="@font/inter" />
android:clickable="true"
android:focusable="true">
<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> </LinearLayout>
<!-- White Card Container --> <!-- Main Content Card -->
<androidx.cardview.widget.CardView <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_height="wrap_content"
android:layout_margin="16dp" android:layout_marginStart="16dp"
android:layout_marginTop="0dp" android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
app:cardCornerRadius="16dp" app:cardCornerRadius="16dp"
app:cardElevation="8dp" 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 <LinearLayout
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical" android:orientation="vertical"
android:padding="24dp" android:padding="32dp"
android:gravity="center_horizontal"> android:gravity="center">
<!-- Generate QR Title --> <!-- QRIS Logo -->
<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 -->
<TextView <TextView
android:id="@+id/qris_logo"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="QRIS" android:text="QRIS"
android:textColor="@android:color/black"
android:textSize="32sp" android:textSize="32sp"
android:textStyle="bold" android:textStyle="bold"
android:fontFamily="monospace" android:textColor="#000000"
android:layout_marginBottom="24dp" /> android:letterSpacing="0.1"
android:layout_marginBottom="24dp"
android:fontFamily="@font/inter" />
<!-- QR Code --> <!-- QR Code -->
<ImageView <ImageView
android:id="@+id/qrImageView" android:id="@+id/qrImageView"
android:layout_width="200dp" android:layout_width="240dp"
android:layout_height="200dp" android:layout_height="240dp"
android:layout_gravity="center_horizontal" android:layout_marginBottom="24dp"
android:contentDescription="QRIS QR Code" android:scaleType="centerInside"
android:scaleType="fitCenter" android:background="#FFFFFF"
android:background="#F0F0F0" android:padding="8dp" />
android:layout_marginBottom="24dp" />
<!-- Amount Display --> <!-- Amount -->
<TextView <TextView
android:id="@+id/amountTextView" android:id="@+id/amountTextView"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="RP.200.000" android:text="RP.200.000"
android:textColor="@android:color/black" android:textSize="24sp"
android:textSize="20sp"
android:textStyle="bold" android:textStyle="bold"
android:layout_marginBottom="16dp" /> android:textColor="#333333"
android:layout_marginBottom="16dp"
android:fontFamily="@font/inter" />
<!-- Timer/Counter --> <!-- Timer -->
<TextView <TextView
android:id="@+id/timerTextView" android:id="@+id/timerTextView"
android:layout_width="wrap_content" android:layout_width="48dp"
android:layout_height="wrap_content" android:layout_height="48dp"
android:text="60" android:text="60"
android:textColor="#E31937"
android:textSize="18sp" android:textSize="18sp"
android:textStyle="bold" 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:textColor="#666666"
android:textSize="12sp" android:gravity="center"
android:layout_marginBottom="16dp" android:background="@drawable/timer_circle_background"
android:visibility="visible" /> 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> </LinearLayout>
</androidx.cardview.widget.CardView> </androidx.cardview.widget.CardView>
<!-- Spacer to push button to bottom --> <!-- Cancel Button -->
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<!-- Bottom Cancel Button -->
<Button <Button
android:id="@+id/cancelButton" android:id="@+id/cancel_button"
android:layout_width="match_parent" android:layout_width="0dp"
android:layout_height="48dp" android:layout_height="52dp"
android:layout_margin="16dp" android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="32dp"
android:text="Batalkan" android:text="Batalkan"
android:textColor="#E31937" android:textColor="#E31937"
android:textSize="16sp" android:textSize="16sp"
android:textStyle="normal" android:textStyle="bold"
android:background="@android:color/transparent" android:background="@drawable/button_cancel_background"
style="?android:attr/borderlessButtonStyle" /> 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>