Reusable and customizable Android UI components built with View-based architecture for XML layouts and classic UI development.
Android UI Components is a modular library of reusable and customizable UI components for Android apps. Built with the classic View system and XML layouts, it provides visually appealing shimmer effects and smooth placeholders for loading states. The project emphasizes performance with GPU-accelerated animations and includes benchmarking tools for measuring efficiency.
| Component | Details | |
|---|---|---|
| ⚙️ | Architecture | Modular Gradle setup with separate modules for library, benchmarking, and sample app. Components use XML layouts combined with Kotlin source files and Android resource files for themes, colors, and assets. Supports separation of placeholder and real content layouts. |
| 🔩 | Code Quality | Kotlin DSL for Gradle build scripts, ProGuard and consumer rules for code shrinking and obfuscation, consistent naming conventions, and benchmarking focus for performance improvements. |
| 📄 | Documentation | Technical specifications and design details are documented in docs/tech-spec.md. Resource files use descriptive naming to aid understanding and maintainability. |
| 🔌 | Integrations | Integration with Gradle for CI/CD, Android resource system for layouts and drawables, ProGuard configurations, and benchmarking infrastructure as a separate module. |
| 🧩 | Modularity | Multi-module project: library, benchmark, sample, and buildSrc. Resources are organized by function for easy management and reuse. |
| 🧪 | Testing | Benchmark module included for performance tests. Instrumentation tests validate UI components' behavior and correctness. |
| ⚡️ | Performance | GPU-accelerated shimmer views, dedicated benchmarking to compare CPU vs GPU shimmer implementations, and ProGuard optimizations help keep runtime efficient and APK size small. |
| 🛡️ | Security | ProGuard rules and backup/data extraction policies configured to protect app data and code integrity. |
android-ui-components/
├── LICENSE
├── README.md
├── benchmark/ # Performance benchmarking module
├── build.gradle.kts # Root build configuration with Kotlin DSL
├── buildSrc/ # Shared build logic and configuration
├── commit_info.sh # Script to collect git commit info
├── docs/ # Documentation and technical specs
├── gradle/ # Gradle wrapper and version catalogs
├── library/ # Main UI components library module
├── sample/ # Sample app demonstrating components
└── settings.gradle.kts # Module inclusion and repository settings
For a detailed file overview, see the Project Index section above or the repository tree.
- Android Studio (latest stable recommended)
- JDK 11 or higher
- Gradle (wrapper included)
- Android SDK with minimum API level configured (check
library/build.gradle.ktsfor details)
-
Clone the repository:
git clone https://github.com/nikkiw/android-ui-components.git
-
Navigate into the project directory:
cd android-ui-components -
Build the project and download dependencies:
./gradlew build
To run the sample application on an emulator or connected device:
./gradlew :sample:installDebug :sample:assembleDebugOr open the project in Android Studio and run the sample module.
You can then integrate the UI components library in your own projects by adding the library module
as a dependency or publishing and including it via Maven.
Run the benchmark and unit tests with:
./gradlew :benchmark:connectedAndroidTest
./gradlew :library:test
./gradlew :sample:connectedAndroidTestNote: Instrumented UI tests require an emulator or device.
- Implement base shimmer UI components (CPU-based)
- Add GPU-accelerated shimmer implementation
- Setup benchmarking infrastructure to compare shimmer performance
- Add ProgressGridLayout component with animated grid reveal and light wave effect
- Expand with more customizable UI placeholders and loaders
- Add comprehensive unit and UI tests coverage
- Publish library to Maven Central / JCenter for easy integration
- Extend documentation and usage samples
This project is licensed under the Apache License 2.0. See the LICENSE file for details.
- Thanks to all contributors and users inspiring the project.
- Inspired by popular Android UI libraries and Google’s Material Design guidelines.
- Special mention to the Android community for sharing knowledge on UI performance optimization.
A new component, ProgressGridLayout, is now available in the library. It provides a grid-based progress reveal effect with an optional animated light wave overlay. This is useful for visually indicating loading or progress states in a grid layout, such as image galleries or dashboards.
- Customizable grid size (rows and columns)
- Smooth reveal animation for grid cells
- Optional animated light wave overlay for enhanced visual feedback
- Configurable overlay color and animation duration
- Easy integration via XML or programmatically
XML:
<com.ndev.android.ui.progress_grid.ProgressGridLayout
android:id="@+id/progress_grid"
android:layout_width="match_parent"
android:layout_height="200dp"
app:animationDuration="2000"
app:gridRows="8"
app:gridCols="8"
app:overlayColor="#AAFFFFFF">
<!-- Your content here -->
</com.ndev.android.ui.progress_grid.ProgressGridLayout>Kotlin:
val progressGrid = findViewById<ProgressGridLayout>(R.id.progress_grid)
progressGrid.start() // Starts the reveal animation
progressGrid.stop() // Stops and resets the animationstart(): Starts the progress reveal animation. When finished, triggers the light wave effect.stop(): Stops all animations and resets the overlay.animationDuration: Duration of the reveal animation (ms).overlayColor: Color of the overlay (ARGB).gridRows,gridCols: Number of rows and columns in the grid.
See the sample app for a live demonstration and integration patterns.
