Skip to main content

​
Visual Overview

The Feedback module provides a playful, emotionally resonant way for users to share their experience. Instead of a standard star rating, it uses a dynamic “Face” that morphs its eyes and mouth based on the selected sentiment. The entire screen’s color palette shifts smoothly to match the mood (e.g., red for “Bad”, green for “Good”). The layout uses a with a scrollable to ensure usability on smaller devices.

​
UI Structure

The UI is organized into a vertical hierarchy where the sentiment selection drives the visual properties of all other components.
  • Root: FeedbackSlider (Wrapped by FeedbackScreen)
    • Header: A simple Box acting as a Top Bar with a back navigation button.
    • Face Area:
      • Eyes: Two Eye components that animate between circular and flat rectangular shapes.
      • Mouth: A HandDrawnSmileIcon that rotates to represent a smile or a frown.
    • Sentiment Label: A large, bold Text display (e.g., “BAD”, “GOOD”) that changes with the selection.
    • Custom Slider:
      • Track: A horizontal line with three anchor points.
      • Indicator: A floating, animated circle that slides between positions and contains a mini-version of the mouth.
    • Input Field: An OutlinedTextField for optional text-based feedback.
    • Action: A “Send” Button to submit the data.

​
State & Interaction

The screen relies heavily on and Compose’s animation APIs to create a fluid experience.
  • Internal State:
    • selectedIndex: An integer (0-2) tracking the current sentiment.
    • feedbackText: A string capturing the user’s written comments.
  • Reactive Animations:
    • When selectedIndex changes, the currentAnim (a FeedbackState object) updates.
    • Properties like bgColor, eyeWidth, and smileRotate are wrapped in animate*AsState functions. This ensures that when the user clicks a different sentiment, the UI doesn’t “snap”—it transitions smoothly.
  • Event Bubbling:
    • Clicks on the slider dots update the selectedIndex.
    • The “Back” and “Send” actions trigger the onBackClick lambda, the interaction up to the navigation controller.

​
Design System Usage

This module utilizes a specialized AppColors.Feedback palette, which is not part of the standard Material color roles. This allows for the specific “vibe” shifts required for the feedback experience.
  • Typography: Uses MaterialTheme.typography.displayMedium for the sentiment labels to provide high visual impact.
  • Shapes: Uses RoundedCornerShape with animated corner radii to morph the “Eyes” from circles to rounded rectangles.
  • Custom Drawing: The HandDrawnSmileIcon uses a to draw a Quadratic Bezier curve, giving the mouth a more organic, “hand-drawn” feel compared to standard vector icons.

​
Preview & Testing

The component is designed to be stateless at the FeedbackSlider level, making it easy to preview.
  • Animations: To test transitions, developers should toggle the selectedIndex in a Compose Preview.
  • Accessibility: The back button and input fields include contentDescription and labels to ensure the screen is navigable via screen readers. The large text labels also provide high contrast for the selected state.
Last modified on January 22, 2026