Skip to content

maurozelenka/Android-Offline-First-TaskManager

Repository files navigation

📱 Mobile Task Manager – Assignment 13: Material Design 3 & UI Polish

This repository contains the implementation for Assignment 13 (Final Polish) of the Task Manager App project. Building upon the Offline-First architecture from the previous assignment, this update focuses on UI Modernization using Material Design 3, improving user interaction, and adding visual polish.

🎯 Assignment Goal

The primary objective is to elevate the look, feel, and usability of the application. We have transitioned from legacy widgets to modern Material 3 Components, implemented a consistent theming system, and introduced advanced interaction patterns like Modal Bottom Sheets and Staggered Animations to create a production-ready user experience.

🚀 Key Features & UI Modernization

🎨 Material Design 3 Theming

  • Consistent Theme: Applied Theme.Material3.DayNight.NoActionBar across the entire app.
  • Custom Color Scheme: Defined semantic colors (Primary, Secondary, Error, Surface) in colors.xml, fully compatible with Light and Dark modes.
  • Typography: Custom text styles (Headline, Body) used consistently to avoid hardcoded text sizes.

📱 Modern Interaction Patterns

  • Dynamic Modal Bottom Sheet: The Task Detail/Edit screen is now a flexible Bottom Sheet with advanced behavior:
    • Half-Screen: Opens initially at 60% height for quick viewing.
    • Full-Screen: Automatically expands when entering "Edit Mode" or scrolling.
    • Gestures: Supports standard "swipe-down-to-dismiss" for seamless navigation.
  • Floating Action Button (FAB): Replaced the toolbar "Add" button with a standard FAB for creating tasks.
  • Material Toolbar: Implemented a customizable toolbar that handles app-level actions and navigation.

🌍 Internationalization

  • Multi-language Support: The app is fully localized for English (default) and Spanish.
  • All UI text (labels, buttons, messages) automatically adapts to the device's language settings.

✨ "Extra Polish" Features (Bonus)

  • Staggered List Animations: Tasks slide in smoothly from the bottom when the list loads (Alpha + Translate animations).
  • Smart Chips: Category tags change color and icon dynamically based on the category (e.g., 🔴 Red/Alert for "Urgent", 🔵 Blue/Briefcase for "Work").
  • Snackbars: Replaced intrusive Toasts with Snackbars for non-blocking feedback (e.g., "Task saved"). Full-Screen: Automatically expands to full-screen when entering "Edit Mode" or scrolling.

🛠 Technical Implementation Details

TaskDetailFragment.kt:

  • Refactored to inherit from BottomSheetDialogFragment.
  • Manages internal state to switch between "View Mode" and "Edit Mode" without changing fragments.
  • Configures BottomSheetBehavior to handle half-expanded and fully-expanded states.

BindingAdapters.kt:

  • Contains custom logic to dynamically style Chip views (colors/icons) directly from XML.

TaskAdapter.kt:

  • Implements AnimationSet in onBindViewHolder to trigger entry animations for new list items.

TaskFormFragment.kt & XMLs:

  • Migrated all input fields to TextInputLayout + TextInputEditText.
  • Replaced standard Spinner with ExposedDropdownMenu (AutoTextView).
  • Implemented MaterialDatePicker for date selection.

🧪 How to Test (UI & Polish)

  1. Language Test: Change your device language to English or Spanish and verify all texts update instantly.
  2. Bottom Sheet Gestures:
    • Tap a task to open the sheet (Half-height).
    • Swipe down to close it.
    • Tap "Edit" to expand it to Full-height.
  3. Visual Experience: Open the app and observe the tasks sliding in.
  4. Theme Toggle: Use the menu option to switch between Light and Dark themes.
  5. Category Logic: Create an "Urgent" task and verify the chip appears red with an alert icon.

🚧 Limitations

  • Tablet Layout: The Bottom Sheet is optimized for mobile devices. On larger screens, a Side Sheet might be a better alternative (future improvement).
  • Conflict Resolution: The offline-first logic (from Assignment 12) remains active; UI updates reflect the local database state immediately.

📦 Libraries Used

  • Google Material Components: For MD3 widgets (MaterialCardView, BottomSheet, FloatingActionButton).

This assignment is part of the Mobile Development course at Universidad de Vigo. See the course syllabus and lab instructions for more details.

Assignment 13 released

About

Robust Native Android App (Kotlin/XML). Built with Offline-First architecture using MVVM, Room, WorkManager, Retrofit, and Data Binding with Material Design 3.

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages