ComposeCookBook

A comprehensive Jetpack Compose reference application showcasing a wide variety of UI components, animations, Google Maps integrations, Canvas drawing, and modern Android development patterns — all built with Kotlin and Jetpack Compose.

Features

• Animations — State-based animations (animate*AsState), gesture-driven (swipe-to-delete, parallax), infinite transitions, shimmer loading effects, tab bar animations
• Canvas Drawing — Shapes, paths, text, images, blend modes, touch-based drawing, path operations, and the Android 11 Easter Egg recreation
• Google Maps — 20+ examples covering markers, polylines, polygons, circles, ground/tile/KML/GeoJSON overlays, heatmaps, clustering, indoor levels, place picker, route navigation, projection, snapshots, and Compose-in-XML interop
• ViewPager — Horizontal and vertical pagers with tabs, indicators, swipe animations, fling behavior, and dynamic add/remove pages (Accompanist Pager)
• Lists & Grids — LazyColumn, LazyRow, LazyVerticalGrid, LazyHorizontalGrid, paginated lists with Paging 3 + Retrofit
• ConstraintLayout — Guidelines, barriers, chains
• Navigation Drawer — Modal, dismissible, and bottom drawers
• Bottom Navigation — Multi-tab bottom navigation bar
• Pull to Refresh — Default, custom background, fully custom indicator
• Swipe to Delete — Dismissible list items with configurable directions
• Form Controls — Button, checkbox, radio button, switch, slider, text field, dropdown menu, date picker, time picker
• Dialogs & Snackbars — Alert dialogs, custom dialogs, snackbar host
• App Bar — Top app bar configurations
• Floating Action Button — Normal, extended, mini FABs
• Image Picker — Gallery and camera image selection
• Magnifier View — Android Magnifier API in Compose
• Zoom View — Pinch-to-zoom, double-tap-to-zoom
• Text Styling — Font size, color, weight, alignment, max lines, overflow
• Theme System — Light/dark mode, 9 color palettes (pink, purple, green, orange, blue, red, indigo, brown, grey), dynamic theme switching
• Sample UIs — Instagram clone (splash, login, home feed with stories + posts)
• Android View Interop — Embedding traditional Android Views in Compose and Compose in XML layouts
• Edge-to-Edge — Proper enableEdgeToEdge() with system bar padding via WindowInsetsControllerCompat

Project Structure

app/src/main/java/com/coderkube/composeuicomponents/
├── animation/          # Animation examples (6 sub-categories)
├── canvas/             # Canvas drawing (10 examples)
├── maps/               # Google Maps (20+ examples)
├── viewpager/          # Accompanist Pager (8 examples)
├── list/               # LazyColumn, LazyGrid, Paging lists
├── constraintlayout/   # ConstraintLayout, guidelines, barriers, chains
├── navigationdrawer/   # Modal, dismissible, bottom drawers
├── bottomnav/          # Bottom navigation
├── pulltorefresh/      # SwipeRefresh variants
├── swipetodelete/      # Swipe-to-dismiss items
├── button/             # Button variants
├── checkbox/           # Checkbox & tri-state
├── radiobutton/        # Radio button groups
├── switch/             # Material Switch
├── slider/             # Continuous, discrete, range
├── textfield/          # Outlined, basic, password fields
├── textstyle/          # Text styling
├── dropdownmenu/       # Dropdown menus
├── datepicker/         # Date picker
├── timepicker/         # Time picker
├── dialog/             # Alert & custom dialogs
├── snackbar/           # Snackbar host
├── appbar/             # Top app bar
├── floatingactionbutton/ # FAB variants
├── imagepicker/        # Gallery/camera picker
├── magnifierview/      # Magnifier API
├── zoomview/           # Pinch-to-zoom
├── parallaxeffect/     # Parallax scrolling
├── tabarlayout/        # Tab row & scrollable tabs
├── androidviews/       # Android View interop
├── xmls/               # Compose in XML layouts
├── demosamples/        # Instagram clone demo
├── theme/              # Theme, colors, typography, system UI
├── App.kt              # Application class
└── MainActivity.kt     # Main menu activity

Key Setup

1. Clone the repository

   git clone https://github.com/Coderkube-App/Compose-UI-Components.git

2. Add API keys in local.properties at the project root:

   MAPS_API_KEY=your_google_maps_api_key
   BASE_URL_MOVIEDB=https://api.themoviedb.org/3/
   IMAGE_URL_MOVIEDB=https://image.tmdb.org/t/p/w500
   MOVIEDB_API_KEY=your_moviedb_api_key
   BASE_URL_MAPS=https://maps.googleapis.com/maps/api/
   MAP_PHOTOS_END_POINT=place/nearbysearch/json

3. Open in Android Studio — import the project and sync Gradle.

4. Run — select a device or emulator with Google Play Services (for Maps features) and run the app module.

License

Copyright 2026 CoderKube

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Contributors

Contributions are welcome! Please open an issue or submit a pull request. For major changes, please open an issue first to discuss what you'd like to change.