Layouts & UI Components

The RideEase UI is built using Material Design components, focusing on a clean, modern aesthetic with dynamic visual elements like gradients and Lottie animations. This section details the primary layouts and the reusable UI patterns implemented across the application.

Activity Layouts

The application follows a structured navigation flow from onboarding to the main dashboard. Each activity uses View Binding for safe and efficient view access.

1. Splash & Onboarding (SplashActivity)

The entry point of the app. It handles both the Android 12+ Splash Screen API and a custom onboarding UI for new users.

• Key Components:
  • SplashScreen (API 31+): Handles the initial cold start.
  • LottieAnimationView: Displays high-quality vector animations for onboarding.
  • Conditional UI: Uses a "Keep on Screen" condition to check authentication state before transitioning.

2. Authentication Screens (LoginActivity, SignupActivity)

Standardized forms for user access, featuring role-based selection.

• User Type Selector: Dual-button toggle for "Rider" and "Driver" modes.
• Gradient Accents: Uses programmatic LinearGradient shaders on header text.
• Error Handling: Integrates TextInputLayout error states to provide real-time validation feedback.

3. User Details Profile (UserDetailsActivity)

A profile completion screen required for first-time users.

• Country Code Dropdown: Uses an AutoCompleteTextView with an ArrayAdapter to provide a searchable list of international dialing codes.
• Phone Input: Formatted specifically for 10-digit number validation alongside the country code selector.

4. Password Recovery (ResetPasswordActivity)

A dedicated interface for email-based password resets.

• Resend Timer: Implements a CountDownTimer on the submit button to prevent API spamming (30-second cooldown).

Reusable UI Patterns

Dynamic Text Gradients

RideEase uses a signature Blue-to-Purple gradient for primary headings. This is applied programmatically to TextView components.

Usage Example:

// Measuring text width for correct gradient scaling
float width = binding.titleText.getPaint().measureText("Get Started");

Shader textShader = new LinearGradient(0, 0, width, 0,
    new int[]{
        ContextCompat.getColor(this, R.color.blue), 
        ContextCompat.getColor(this, R.color.purple)
    },
    null, Shader.TileMode.CLAMP);

binding.titleText.getPaint().setShader(textShader);

Loading States & Animations

Instead of standard progress bars, the app utilizes Lottie for a more engaging user experience during network operations.

• Implementation: Centralized showLoading() and hideLoading() methods within activities.
• Component: loadingAnimation (Lottie) usually positioned as an overlay.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/loadingAnimation"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:visibility="gone"
    app:lottie_autoPlay="false"
    app:lottie_loop="true"
    app:lottie_rawRes="@raw/loading_spinner" />

Selector Buttons (Role Selection)

Buttons used for choosing between Rider and Driver roles utilize Android's isSelected state to toggle visual styles defined in XML selectors.

// Example of toggling UI states
binding.riderButton.setOnClickListener(v -> {
    selectedUserType = "rider";
    binding.riderButton.setSelected(true);
    binding.driverButton.setSelected(false);
});

UI Components Reference

| Component | Description | Usage | | :--- | :--- | :--- | | TextInputLayout | Material container for text inputs. | Used for all forms to handle hints and error messages. | | AutoCompleteTextView | Material dropdown menu. | Used in UserDetailsActivity for the country code picker. | | LottieAnimationView | Vector animation player. | Used for splash branding and global loading overlays. | | LinearGradient | Programmatic shader. | Applied to TextView objects for theme-consistent headers. |

Layout Configurations

• Status Bar: Most authentication screens use FLAG_LAYOUT_NO_LIMITS to achieve a full-screen, immersive look with transparent status and navigation bars.
• Input Validation: Patterns for Email and Phone numbers are strictly enforced at the UI layer before being passed to ViewModels to ensure a smooth UX.