Theming & Visual Identity

Visual Identity Overview

RideEase follows a modern, clean design language characterized by vibrant gradients, clear typography, and an immersive user interface. The visual identity is built around a primary color duo of Blue and Purple, providing a professional yet energetic feel for both riders and drivers.

Color Palette

The application utilizes a specific color palette defined in res/values/colors.xml. The primary branding relies on the interaction between two key colors:

| Color Name | Resource ID | Hex Code (Typical) | Usage | |:---|:---|:---|:---| | RideEase Blue | @color/blue | #2196F3 | Primary branding, buttons, gradients | | RideEase Purple | @color/purple | #9C27B0 | Accents, secondary branding, gradients | | Transparent | android.R.color.transparent | #00000000 | Immersive status and navigation bars |

Typography

RideEase uses the Inter font family to ensure high readability across different screen densities. Typography is typically applied through XML styles, but specific headings often feature dynamic styling.

Gradient Text Implementation

To reinforce brand identity, primary headings in activities (such as "Get Started now" or "Create Account") use a horizontal linear gradient.

Example: Applying Brand Gradient to TextView

// Measure text width to ensure gradient spans the full text length
float width = binding.headerText.getPaint().measureText("Complete Your Profile");

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.headerText.getPaint().setShader(textShader);

UI Components & Interaction

Selection States

Interactive elements like the User Type selection (Rider vs. Driver) use state-based visual feedback. The selected state is managed via the isSelected property, which triggers background and elevation changes defined in the drawable selectors.

// Toggle selection state for user category buttons
binding.riderButton.setSelected(true);
binding.driverButton.setSelected(false);

Loading States

RideEase utilizes Lottie Animations to provide high-quality, fluid visual feedback during asynchronous operations (e.g., Authentication, Profile Updates).

• Resource: loading_animation
• Usage: Controlled via showLoading() and hideLoading() methods within Activities to manage visibility and playback.

private void showLoading() {
    binding.loadingAnimation.setVisibility(View.VISIBLE);
    binding.loadingAnimation.playAnimation();
}

Immersive Experience

To maximize screen real estate and provide a modern look, specific screens (like Splash and Reset Password) implement an immersive UI by extending the layout behind the system bars.

Transparent System Bars

The following configuration is used to achieve a borderless visual flow:

// Set flags for a no-limits layout
getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, 
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);

// Define transparent status and navigation colors
getWindow().setStatusBarColor(ContextCompat.getColor(this, android.R.color.transparent));
getWindow().setNavigationBarColor(ContextCompat.getColor(this, android.R.color.transparent));

Splash Screen (Android 12+)

On devices running Android 12 (API 31) and above, RideEase utilizes the SplashScreen API to provide a seamless transition from the system launcher to the app's onboarding flow.

SplashScreen splashScreen = SplashScreen.installSplashScreen(this);
// Keep splash on screen while authenticating
splashScreen.setKeepOnScreenCondition(() -> keepSplashScreen);