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
LinearGradientshaders on header text. - Error Handling: Integrates
TextInputLayouterror 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
AutoCompleteTextViewwith anArrayAdapterto 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
CountDownTimeron 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()andhideLoading()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_LIMITSto 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.