Awesome
Slack Android Clone with Compose is now in Kotlin Multiplatform!
Status: Active Development happening here https://github.com/oianmol/SlackComposeMultiplatform
This is a jetpack compose sample app written in Kotlin following clean architecture principles.
The purpose of this app to showcase:
- Implementation of Jetpack Android Architecture components with Dagger Android and jetpack compose
- Creation of proper components and Subcomponents using Dagger Android and their injection into Activity, Compose Views, View Models and Helper Classes
- Performing background task with Kotlin Coroutines
Screenshots
| Screenshots | In Progress |
|---|---|
| <img src="art/art1.png" alt="drawing" style="width:300px;"/> | <img src="art/art2.png" alt="drawing" style="width:300px;"/> |
| <img src="art/art3.png" alt="drawing" style="width:300px;"/> | <img src="art/art4.png" alt="drawing" style="width:300px;"/> |
| <img src="art/art5.png" alt="drawing" style="width:300px;"/> | <img src="art/art6.png" alt="drawing" style="width:300px;"/> |
| <img src="art/art10.png" alt="drawing" style="width:300px;"/> | <img src="art/art11.png" alt="drawing" style="width:300px;"/> |
| <img src="art/art_pref1.png" alt="drawing" style="width:300px;"/> | <img src="art/art_pref2.png" alt="drawing" style="width:300px;"/> |
| <img src="art/art_pref3.png" alt="drawing" style="width:300px;"/> | <img src="art/art_pref4.png" alt="drawing" style="width:300px;"/> |
| <img src="art/animated_start.gif" alt="drawing" style="width:300px;"/> | <img src="art/gesture_vertical_drag_chatbox.gif" style="width:300px;"/> |
| <img src="art/art8.gif" alt="drawing" style="width:300px;"/> | <img src="art/art9.png" alt="drawing" style="width:300px;"/> |
TODOs and questions to self
- Rewrite the Colors and light/dark mode compatibility!
- Should we have separate theme for each UI module ?
- How to handle dynamic theme colors ?
🏗️️ Built with ❤️ using Jetpack Compose 😁
| What | How |
|---|---|
| 🎭 User Interface (Android) | Jetpack Compose |
| 🏗 Architecture | Clean |
| 💉 DI (Android) | Hilt |
| 🌊 Async | Coroutines + Flow |
| 🌐 Networking | Retrofit |
| 📄 Parsing | KotlinX |
Languages, libraries and tools used
- Kotlin
- AndroidX libraries
- Android Architecture Components
- Android Data Binding
- Dagger 2
- Retrofit
- Kotlin Coroutines
Architecture
SlackClone follows the principles of Clean Architecture with Android Architecture Components.
Architecture's layers & boundaries:
<img src="art/architecture.jpeg" />UI Layer contains UI (Activities, Composables, Fragments) that are coordinated by _ ViewModels which execute 1 or multiple UseCases._ Presentation Layer depends on Domain Layer.
Domain Layer is the most INNER part of the circle (no dependencies with other layers) and it contains Entities, Use cases & Repository Interfaces. Use cases combine data from 1 or multiple Repository Interfaces.
Data Layer contains Repository Implementations and 1 or multiple Data Sources. Repositories are responsible to coordinate data from the different Data Sources. Data Layer depends on Domain Layer.
Notes: Mapping between response models and transformed models will happen via extension functions defined in transformed model file
When writing a new ui module
- First, Create a new android library module
- Make sure to copy build.gradle.kts from other ui module and paste it in your ui-module
- We need one fragment to host the composables, this fragment will be added to main nav graph.
- the routing within compose world is handled with Compose Navigator
- and to move out of one ui module you need to use the fragment navigator!
Conventions:
Files are suffixed with be defined Class types.
- ViewModels are suffixed with VM. Ex:
LoginVM - UseCases are suffixed with UseCase. Ex:
LoginUseCase - Sources are suffixed with Source. Ex:
LoginRemoteSource,LoginLocalSource - Repositories are suffixed with Repo. Ex:
LoginRepo
Conclusion
This project can be used as a template for new apps. This project is continually evolving to integrate other libraries and techniques to keep it up to date.