Summary This module contains high-level, specialized UI components designed for specific feature flows rather than generic reuse. It includes complex interactive elements like a spotlight tutorial system, swipeable tip cards, chat-style FAQs, and permission management screens. These components often combine animation, state management, and haptic feedback to guide users through complex tasks.
Onboarding & Education : TutorialScaffold.kt, TipsCardStack.kt, FaqChatAccordion.ktPermissions : PermissionsCard.kt, PermissionIconCollage.ktLimits & Usage : SmartLimitCard.ktPremium : PremiumEmptyState.kt, PremiumSelectionContainer.ktGeneral : AppFooter.kt, ShowAllAppsCard.kt, SuggestionCard.kt Tutorial System The app uses a “Spotlight” tutorial system to guide users through the interface. This system darkens the entire screen except for a specific UI element, which is highlighted with a “cutout” hole and a breathing border.
Spotlight Flow Visual Mechanics The TutorialScaffold wraps a screen and manages the overlay.
Feature Description Cutout Effect A dark scrim covers the screen. A “hole” is cut out over the target element using path difference operations. Breathing Glow The border around the cutout pulses in size and opacity (using the primary brand color) to draw attention. Auto-Scroll If a target element is off-screen, the system automatically scrolls to bring it into view before highlighting it. Dynamic Text Explanatory text positions itself above or below the cutout depending on available screen space.
Onboarding Components Tips Card Stack A Tinder-style swipeable stack of cards used to display educational tips.
Interaction : Users can drag the top card left or right.Feedback : Haptic ticks occur when crossing the dismiss threshold. “Useful” (Green) or “Skip” (Red) stamps fade in during the drag.Animation : As the top card is swiped, the cards behind it scale up and move into position.
FAQ Chat Accordion An interactive FAQ section styled like a messaging app.
Question : Appears as a “User” message (aligned right). Tapping it triggers a haptic tick.Answer : Appears as an “App” message (aligned left).Typing Indicator : When a question is expanded, a “typing bubbles” animation plays briefly before the answer reveals, simulating a live support agent.
Permission Management Permissions Card A dashboard card that lists missing system permissions required for the app to function correctly.
Permission Type Icon Description Accessibility Person Required for blocking scrolling. Usage Stats Pie Chart Required for tracking screen time. Notifications Bell Required for intercepting notifications. Battery Battery Required to prevent the app from being killed. Overlay Layers Required to show blocking screens over other apps.
Permission Icon Collage A decorative visual component used on permission request screens. It features a cluster of floating, rotating geometric shapes.
Shapes : Includes custom polygons like 7-sided cookies, flowers, arches, and rounded squares.Animation : The central “Hero” icon rotates continuously, while surrounding icons have static offsets and rotations.
Feature Components Smart Limit Card A complex dashboard widget that displays usage limits for an app or group.
Visual Structure:
Header : Icon and Title.Stats : Key-value pairs (e.g., “Average Usage”).Progress : A linear progress bar showing usage vs. limit.Status : Text indicating time remaining or suggestions.
Interactions:
Tap : Opens details or edit mode.Pause Limit : Triggers a bottom sheet allowing the user to pause the limit for 30 minutes, 2 hours, or the rest of the day.
The standard footer found at the bottom of the main settings or dashboard screen.
Developer Mode : Contains a hidden “Easter Egg.” Tapping the lock icon multiple times (13 taps) unlocks Developer Mode, complete with a confetti celebration overlay.Content : Displays app version, tagline, and attribution (e.g., “Made with Love in India”).
Premium Components Component Usage PremiumSelectionContainer A container with a rotating “rainbow” gradient border (Gold, Pink, Green) to highlight premium subscription options. PremiumEmptyState A placeholder view with a large icon and text, used when a premium feature has no data or is locked.
General Helpers Show All Apps Card An expandable accordion card used to truncate long lists of apps.
Collapsed : Shows “and X more apps”.Expanded : Shows the full list.Animation : The arrow icon rotates 180 degrees during toggle.
Suggestion Card A simple, high-emphasis information card with a lightbulb icon, used to display smart suggestions or insights to the user.
Design Patterns Haptic Feedback These components rely heavily on haptics to convey state:
Tick : When dragging a tip card past a threshold.Pop : When the FAQ “typing” finishes and the answer appears.Success : When Developer Mode is unlocked.
Animation Tokens
Springs : Used for swipe gestures and spotlight movement to feel organic.Linear Loops : Used for the rotating premium borders and permission collage icons to create continuous ambient motion.
Shape Language
Squiggles : The App Footer uses a custom-drawn squiggly line divider that mirrors itself around the central lock icon.Polygons : The Permission Collage uses the androidx.graphics.shapes library to generate complex rounded polygons dynamically. Last modified on January 25, 2026
