🎨 UI Prompt for V0 – Switch App (Neumorphic Smart Home Controller) App Name: Switch Theme: Minimal, elegant neumorphism (soft shadows, rounded edges, light/flat backgrounds) Color Scheme:
Background: #E0E5EC
Primary Accent: #A3B1C6 or #C1C8D6
Button Shadows: soft inner/outer white/gray
📱 Screens to Design (All XML-based layout)
App logo (lightbulb or plug icon) – center top
Neumorphic EditText (Username)
Neumorphic EditText (Password)
Login Button (rounded, raised soft shadow)
Subtle background blur/light pattern (not flat white)
Style:
Inputs are inset (pressed look)
Button is convex (pops out)
Everything centered with clean spacing
Layout:
HeaderFragment at top
ApplianceGridFragment in middle (main interactive area)
FooterFragment at bottom
Left: Small icon (💡 bulb)
Center: App Title – "Switch"
Right: Profile icon
Style:
Fixed height
Neumorphic card-style container
Light text/icons
2-column grid layout
Each item = appliance widget
Each Widget Includes:
Icon (e.g., light/fan/plug)
Appliance Name (e.g., Bedroom Light)
ON/OFF Toggle Button (styled in neumorphism)
Start Time & End Time display (small text or clock icons)
Interaction:
Tapping ON → lights up, sends signal
Long press or edit icon → opens time setting dialog
Style:
Neumorphic CardView per appliance
Slight shadow depth
Toggle switch with soft animation
Bottom nav bar or icon row
Icons: Add device ➕, Refresh 🔄, Settings ⚙️
Style:
Sticky bottom container with inset buttons
Same neumorphic theme
⏱️ Time Picker Dialog (Optional popup) Light neumorphic style clock selector
Save/Cancel buttons with soft shadows
Popup from bottom or modal card style
📱 Device Sizes to Consider Android phones (6"–6.7")
Must look clean in both portrait & landscape (landscape optional for v0)
🌟 Key Visual Goals Soft, breathable UI
Neumorphic consistency (buttons, cards, inputs)
Intuitive ON/OFF toggle feel
Timings feel integrated, not clunky
I'll create a neumorphic smart home controller app called "Switch" with the design elements you've specified. Let me design the UI components for you.
I've created a neumorphic smart home controller app called "Switch" with all the elements you specified. The design follows neumorphic principles with soft shadows, rounded edges, and the light background color scheme you requested (#E0E5EC with #A3B1C6 accents).
Login Screen
Home Page
Appliance Grid
Time Picker Dialog
The UI is fully responsive and maintains the neumorphic style consistently across all components. The toggle switches have a satisfying pressed/raised effect when switched on/off, and all interactive elements have subtle hover/active states.
🚨 FINAL PEAK V0 UI PROMPT – Android Mobile App – “SWITCH” ⚡ 📱 Platform: Android Mobile App
Built with Kotlin + XML only
All designs optimized for portrait mobile layout (6"–6.8")
Focus on native Android Views, not Compose
🧠 Project Purpose: Control smart home appliances via ESP32 Wi-Fi relays. Users can:
Toggle ON/OFF
Set start & end timers
Add new appliances
Rename them anytime
All within a sexy, mobile-first, neumorphic UI
📲 SCREENS TO DESIGN (MOBILE FIRST ONLY) 🧾 1. Login Screen 📐 Layout (Portrait Only): Centered vertical stack
Top: Neumorphic app icon (bulb / plug)
Two EditText fields: Username, Password
One big, pill-shaped Login button
Optional: “Switch it on…” subtitle 👀
💅 Styling:
Background: #E0E5EC
Inputs: Inset neumorphic (pressed in)
Button: Raised neumorphic (soft outer shadows)
Padding for fingers (min 16dp), responsive to all screen sizes
ConstraintLayout strongly recommended
🏠 2. Home Page (Post-Login) 🔲 Layout Structure: HeaderFragment (Top 10–12% of screen)
RecyclerView with bold appliance widgets (central)
FooterFragment (Bottom 10–12%)
🧩 Appliance Cards (Prominent, Sexy, Functional) Each Card includes: 💡 Icon of the appliance (large, top center)
🏷️ Customizable Name (TextView, editable later)
🔘 Override ON/OFF Switch (prominent toggle)
🕒 Start Time / End Time Display (2 text views)
✏️ Edit Icon (to open the edit pop-up)
💅 Styling: Neumorphic CardView or styled ConstraintLayout
Minimum padding: 16dp
Rounded corners: 24dp
Shadows: DEEP for prominence
Font size: readable (16–18sp)
Layout: fits 2 per row (portrait)
💥 This is the CORE of the UI. Make sure these cards look like THE MAIN ELEMENT. Users will tap these the most.
➕ 3. FooterFragment (Bottom) Element: One big neumorphic button with text: → “+ Add Appliance”
Full-width, center-aligned
Tap opens Add Appliance Pop-Up
Styling: Raised neumorphic style
Fill 90% of horizontal space
Font: bold, clear (16sp+)
🆕 4. Add Appliance Pop-Up (DialogFragment) Elements: Title: Add New Appliance
EditText: Appliance name
“Add” & “Cancel” buttons
UX: Modal pop-up
Blocks background
Pops from bottom or center
Use DialogFragment with MaterialShapeDrawable for styling
Style: Raised neumorphic dialog
24dp padding minimum
Finger-friendly spacing
✏️ 5. Edit Appliance Pop-Up Triggered when user taps ✏️ on appliance card.
Elements: Rename appliance (EditText)
Set/change Start Time
Set/change End Time
ON/OFF Toggle (manual override)
“Save” and “Cancel”
Style: Same neumorphic dialog style
Responsive to keyboard
Large tap targets
🔧 TECH STUFF Use RecyclerView for Appliance Grid
Use DialogFragment for popups
Use SharedPreferences or SQLite to store appliance data
Use SwitchCompat or custom toggle for ON/OFF
ConstraintLayout everywhere for perfect mobile responsiveness
Set minWidth/minHeight and padding for touch areas (48dp rule)
🪄 VISUAL VIBES Neumorphic UI Only — soft light, elevated cards, inset inputs
No harsh contrast, everything is breathable
Icons are key — use Material Icons or custom SVGs
Use spacing and sizing to create hierarchy (name > toggle > time)
Colors:
BG: #E0E5EC
Text: #4A4A4A
Accent: #A3B1C6
I'll create a neumorphic Android mobile app UI design for "SWITCH" that follows your specifications. Let me design the screens and components for this smart home control app.
I've designed a neumorphic Android mobile app UI for "SWITCH" that follows your specifications. The design features soft shadows, rounded edges, and the light background color scheme (#E0E5EC) with text in #4A4A4A and accent colors in #A3B1C6.
All UI elements follow neumorphic design principles with soft shadows, inset fields, and raised buttons. The design is optimized for portrait mobile layout with proper padding and touch targets following the 48dp rule for better usability.