shihaam/thijooree
1
0
Fork 1
Code Issues 14 Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

ui: tokenize card surfaces in dimens.xml and sweep layouts

Browse Source 
Introduces a small set of design tokens for card surfaces so the same
look is enforced everywhere instead of being hand-tuned per layout:

  card_radius_lg / card_radius_md       — 16dp / 12dp two-tier radius
  card_elevation_flat / *_raised        — 0dp outlined / 1dp subtle raise

Sweeps the existing layouts onto these tokens. Two-tier policy:

  lg → hero/standalone cards (account history header, bml loan,
       finance deal, otp card, bank selection tiles, security setup
       options)
  md → repeating row/summary cards (dashboard summary cards,
       credentials inset, foreign limit, add-contact sheet)

Card-visual representations (item_card_dashboard / _stack / _wallet
/ _settings_entry) deliberately keep their bespoke radius/elevation
so they continue to read as credit cards — the tokens are for
content cards only. Tight inset frames inside fragment_bml_qr_pay
and fragment_transfer also remain on 4dp/0dp as form details.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ahusan Mohamed
2026-05-28 17:20:16 +05:00
parent 5cba468781
commit df892ec8d5
11 changed files with 66 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/main/res/layout/fragment_bank_selection.xml
+3 -3
View File
@@ -38,7 +38,7 @@
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="16dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutline">
@@ -81,7 +81,7 @@
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="16dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutline">
@@ -125,7 +125,7 @@
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="16dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutline">
app/src/main/res/layout/fragment_credentials.xml
+2 -2
View File
@@ -117,8 +117,8 @@
android:layout_marginBottom="8dp"
android:visibility="invisible"
app:cardBackgroundColor="?attr/colorSecondaryContainer"
app:cardCornerRadius="12dp"
app:cardElevation="0dp">
app:cardCornerRadius="@dimen/card_radius_md"
app:cardElevation="@dimen/card_elevation_flat">
<LinearLayout
android:layout_width="match_parent"
app/src/main/res/layout/fragment_dashboard.xml
+14 -14
View File
@@ -34,8 +34,8 @@
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp">
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md">
<LinearLayout
android:layout_width="match_parent"
@@ -67,8 +67,8 @@
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="8dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp">
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md">
<LinearLayout
android:layout_width="match_parent"
@@ -112,8 +112,8 @@
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp">
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md">
<LinearLayout
android:layout_width="match_parent"
@@ -146,8 +146,8 @@
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="8dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp">
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md">
<LinearLayout
android:layout_width="match_parent"
@@ -191,8 +191,8 @@
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp"
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md"
app:cardBackgroundColor="?attr/colorErrorContainer"
android:visibility="gone">
@@ -238,8 +238,8 @@
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="8dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp"
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md"
app:cardBackgroundColor="?attr/colorErrorContainer"
android:clickable="true"
android:focusable="true"
@@ -279,8 +279,8 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp"
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md"
android:clickable="true"
android:focusable="true">
app/src/main/res/layout/fragment_security_setup.xml
+2 -2
View File
@@ -52,7 +52,7 @@
android:layout_marginBottom="12dp"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="16dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutline">
<LinearLayout
@@ -94,7 +94,7 @@
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="16dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutline">
<LinearLayout
app/src/main/res/layout/item_account_history_header.xml
+2 -2
View File
@@ -7,8 +7,8 @@
android:layout_marginHorizontal="16dp"
android:layout_marginTop="12dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="16dp"
app:cardElevation="0dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:cardElevation="@dimen/card_elevation_flat"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutlineVariant">
app/src/main/res/layout/item_bml_loan.xml
+2 -2
View File
@@ -5,8 +5,8 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
app:cardCornerRadius="16dp"
app:cardElevation="0dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:cardElevation="@dimen/card_elevation_flat"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutlineVariant">
app/src/main/res/layout/item_finance_deal.xml
+2 -2
View File
@@ -5,8 +5,8 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
app:cardCornerRadius="16dp"
app:cardElevation="0dp"
app:cardCornerRadius="@dimen/card_radius_lg"
app:cardElevation="@dimen/card_elevation_flat"
app:strokeWidth="1dp"
app:strokeColor="?attr/colorOutlineVariant">
app/src/main/res/layout/item_foreign_limit.xml
+2 -2
View File
@@ -5,8 +5,8 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardElevation="1dp"
app:cardCornerRadius="12dp">
app:cardElevation="@dimen/card_elevation_raised"
app:cardCornerRadius="@dimen/card_radius_md">
<LinearLayout
android:layout_width="match_parent"
app/src/main/res/layout/item_otp_card.xml
+2 -2
View File
@@ -6,8 +6,8 @@
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginBottom="12dp"
app:cardCornerRadius="16dp"
app:cardElevation="2dp">
app:cardCornerRadius="@dimen/card_radius_lg"
app:cardElevation="@dimen/card_elevation_raised">
<LinearLayout
android:layout_width="match_parent"
app/src/main/res/layout/sheet_add_contact.xml
+2 -2
View File
@@ -65,8 +65,8 @@
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:visibility="gone"
app:cardCornerRadius="12dp"
app:cardElevation="2dp">
app:cardCornerRadius="@dimen/card_radius_md"
app:cardElevation="@dimen/card_elevation_raised">
<LinearLayout
android:layout_width="match_parent"
app/src/main/res/values/dimens.xml
+33 -1
View File
@@ -5,4 +5,36 @@
<dimen name="nav_header_vertical_spacing">8dp</dimen>
<dimen name="nav_header_height">176dp</dimen>
<dimen name="fab_margin">16dp</dimen>
</resources>
<!-- ====== Design tokens ======================================== -->
<!-- Card surfaces.
Two-tier radius:
lg → hero/standalone cards (bank tiles, history header, finance deals, OTP cards)
md → repeating row/summary cards (dashboard cards, foreign limit, bottom sheets)
Card-visual representations (item_card_*) keep their own larger radius/elevation
to read as real credit cards — they are not tokenized. -->
<dimen name="card_radius_lg">16dp</dimen>
<dimen name="card_radius_md">12dp</dimen>
<!-- Card elevation. Two tiers:
flat → outlined cards (paired with a colorOutlineVariant stroke)
raised → subtle Material 3 default raise
Larger elevations belong to specific card-visual surfaces only. -->
<dimen name="card_elevation_flat">0dp</dimen>
<dimen name="card_elevation_raised">1dp</dimen>
<!-- Screen-level spacing -->
<dimen name="screen_margin">16dp</dimen>
<dimen name="section_gap">16dp</dimen>
<!-- Standard list/row padding -->
<dimen name="list_item_padding_h">16dp</dimen>
<dimen name="list_item_padding_v">14dp</dimen>
<!-- Gutters: small inline spacing units -->
<dimen name="gutter_xs">2dp</dimen>
<dimen name="gutter_sm">4dp</dimen>
<dimen name="gutter_md">8dp</dimen>
<dimen name="gutter_lg">12dp</dimen>
</resources>