Maps Explorer Android App

Overview

Maps Explorer is an Android application built with Kotlin that lets users explore, add, and manage locations using Google Maps. The app includes a map view with markers, a list view of added locations, and a settings screen with dark mode support.

Features

• Google Maps Integration: Displays interactive map with default and user-added location markers.
• Add Locations: Search for locations using Google Places Autocomplete and add them to the map and list.
• List View: Scrollable list of added locations shown in a CardView layout.
• Dark Mode Support: Toggle between light and dark themes via the Settings screen.
• Bottom Navigation: Seamless switching between Map, List, and Settings screens.
• Toolbar: Displays app title and menu, including a link to the Settings screen.

Tech Stack

• Language: Kotlin
• Platform: Android
• APIs: Google Maps & Places API
• Tools: Android Studio

Material Design Elements Used

• Toolbar at the top for app title and menu options.
• Floating Action Button (FAB) to add new locations interactively.
• RecyclerView / CardView for an elegant scrollable list of locations.
• Bottom Navigation View for smooth navigation across main sections.
• Google Maps Fragment to embed interactive maps with markers.

Project Structure

app/
├── src/main/java/.../activities/
│ ├── MainActivity.kt
│ └── (other entry points)
│
├── src/main/java/.../fragments/
│ ├── MapFragment.kt
│ ├── ListFragment.kt
│ └── SettingsFragment.kt
│
├── src/main/java/.../adapters/
│ └── LocationAdapter.kt
│
├── res/layout/
│ ├── activity_main.xml
│ ├── fragment_map.xml
│ ├── fragment_list.xml
│ └── list_item_location.xml
│
├── res/values/
│ ├── colors.xml
│ ├── themes.xml
│ └── strings.xml
│
└── res/drawable/
└── UI assets and icons

Design Decisions & Challenges

• Google Places Autocomplete was used for intuitive location search and address-to-coordinate conversion, improving UX over manual input.
• Theme colors were customized to match the desired baby blue and dark blue palettes, requiring careful color resource management and night mode support.
• Managing state and dynamic UI updates when locations are added, ensuring markers appear both on the map and in the list without data inconsistency.
• Handling the Floating Action Button’s positioning to avoid obstructing map controls such as zoom buttons.
• Ensuring toolbar titles and menu options update contextually when navigating between fragments.
• Implementing persistent dark mode setting with SharedPreferences, applied at app launch and dynamically during runtime.

How to Run

1. Clone this repository:

   git clone https://github.com/chazdj/MapsExplorer.git

2. Open in Android Studio.
3. Obtain a Google Maps API key and add it to local.properties or strings.xml as google_maps_key.
4. Build and run the app on an Android device or emulator with Google Play Services.
5. Use the FAB to search for and add locations.
6. Toggle dark mode in the Settings tab.

Future Enhancements

• Add ability to edit or delete locations.
• Save location data persistently (e.g., local database or cloud).
• Provide routing between markers.
• Add user authentication for personalized experience.

Video Demo

Watch the demo video here

What I Learned

• Integrating Google Maps and Places APIs into an Android project.
• Building UI with Fragments, Bottom Navigation, and CardViews.
• Implementing theme switching and persistent settings.
• Managing map markers and location data in the app.

Contact

Developed by Chastidy Joanem
GitHub: chazdj