Rounded and larger button treatment
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
# Goal: Redesign all buttons into bold, square, visually striking interactive elements
|
||||
|
||||
## Objective
|
||||
Replace every basic/rectangular button in the app with larger, square-aspect-ratio buttons that have eye-catching visual design. The goal is to transform the UI from a generic Material 3 look into a distinctive, personality-rich interface that matches the playful "BONG HIT TIMER" brand.
|
||||
|
||||
## Current State
|
||||
The app uses 4 visible buttons across 2 screens:
|
||||
|
||||
**MainActivity (home screen):**
|
||||
- `btnDurationLabel` — outlined button showing selected duration (e.g. "10s") with a dropdown arrow. Uses `Widget.Material3.Button.OutlinedButton` with 20dp corners.
|
||||
- `btnStart` — filled button labeled "Start Timer" with a play icon. Uses `Widget.Material3.Button` with 20dp corners.
|
||||
|
||||
**CountdownDialog (timer screen):**
|
||||
- `btnStop` — plain Android `Button` labeled "Stop" (default styling, small)
|
||||
- `btnRestart` — plain Android `Button` labeled "Restart" (default styling, small)
|
||||
- `btnDismiss` — plain Android `Button` labeled "Dismiss" (currently gone, shows after timer completes)
|
||||
|
||||
## Design Requirements
|
||||
|
||||
### 1. Square Aspect Ratio
|
||||
- Change all buttons from `wrap_content` rectangles to a fixed square size (e.g., `120dp` x `120dp` or `100dp` x `100dp`)
|
||||
- Use `app:layout_constraintDimensionRatio="1:1"` where dynamic sizing is needed
|
||||
- Buttons should feel substantial and tappable, not compact
|
||||
|
||||
### 2. Visual Interest — Each button should have its own personality
|
||||
Create custom drawable backgrounds for each button type. Design ideas (pick the best approach):
|
||||
|
||||
- **Circular/spherical buttons** — Buttons that look like physical 3D balls or pucks. Use gradient fills with highlights/shadows to create a convex "pressable" look.
|
||||
- **Neon/glow effect** — Since the app is a bong hit timer, a subtle neon glow that pulses or intensifies during countdown would be thematically appropriate.
|
||||
- **Retro/gaming arcade style** — Bold colors, thick borders, pressed/active states that simulate physical button depression.
|
||||
- **Gradient + icon centering** — For the timer screen, center the stop/restart icons prominently in the square buttons with bold gradient backgrounds.
|
||||
|
||||
### 3. Interactive States
|
||||
Every button must have rich feedback:
|
||||
- **Pressed/active state** — noticeable visual change (shrink, darker shade, or inner glow)
|
||||
- **Default state** — visually engaging with gradients, shadows, or subtle animations
|
||||
- **Disabled state** — reduced opacity but still recognizable
|
||||
|
||||
### 4. Icon Integration
|
||||
Square buttons are perfect for icon-first design:
|
||||
- **Stop button** — large centered pause/stop icon
|
||||
- **Restart button** — large centered refresh/replay icon
|
||||
- **Start button** — center the play icon, consider removing the text label since the icon is universal
|
||||
- **Duration label** — consider a pill-shaped or circular chip that pulses when tapped
|
||||
|
||||
### 5. Color Palette
|
||||
Stay within the existing green theme (`#2E7D32` primary, `#4C6842` secondary, `#E8F5E9`/`#C8E6C9` gradient) but push it further:
|
||||
- Use the primary green for the start/positive actions
|
||||
- A red/coral accent for stop
|
||||
- A neutral or blue for restart/duration selection
|
||||
- Consider gradient transitions within each button (e.g., green to darker green top-to-bottom for a 3D effect)
|
||||
|
||||
### 6. Shadow & Elevation
|
||||
- Add drop shadows to all buttons for depth (use `app:strokeWidth="0dp"` and custom `rippleColor` for Material buttons)
|
||||
- Create a `btn_square_default.xml` and `btn_square_pressed.xml` in `res/drawable/` for each button type
|
||||
- The pressed state should visually simulate "pressing in" (reduced shadow, lighter/darker fill)
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
### New drawable files to create (in `res/drawable/`):
|
||||
- `btn_start_square.xml` — gradient + shadow drawable for start button
|
||||
- `btn_start_square_pressed.xml` — pressed state variant
|
||||
- `btn_stop_square.xml` — gradient + shadow drawable for stop button
|
||||
- `btn_stop_square_pressed.xml` — pressed state variant
|
||||
- `btn_restart_square.xml` — gradient + shadow drawable for restart button
|
||||
- `btn_restart_square_pressed.xml` — pressed state variant
|
||||
- `btn_duration_chip.xml` — drawable for duration selector
|
||||
|
||||
### Layout changes needed:
|
||||
- `activity_main.xml`:
|
||||
- `btnDurationLabel`: change to square dimensions, wrap text/icon in center, apply new drawable
|
||||
- `btnStart`: change to square, center play icon, apply new drawable
|
||||
- `dialog_countdown.xml`:
|
||||
- `btnStop`: change from `Button` to `com.google.android.material.button.MaterialButton`, set square dimensions, apply drawable
|
||||
- `btnRestart`: same treatment
|
||||
- `btnDismiss`: same treatment, keep as gone by default
|
||||
- Adjust the ConstraintLayout chain to accommodate square buttons (may need a horizontal chain with proper spacing)
|
||||
|
||||
### Code changes needed:
|
||||
- `CountdownDialog.kt`: Set button backgrounds programmatically if needed, ensure clickable/pressable states work
|
||||
- No changes to button click logic — only visual overhaul
|
||||
|
||||
## Constraints
|
||||
- Use only Material 3 components already in the dependency (`com.google.android.material:material:1.11.0`)
|
||||
- Traditional XML layouts — no Compose
|
||||
- Minimum SDK 24 — no API 30+ features
|
||||
- Keep the app's existing green aesthetic but make it bolder
|
||||
- Maintain accessibility (minimum 48dp touch target, sufficient contrast)
|
||||
Reference in New Issue
Block a user