Sample project to showcase Material & Custom theming using Jetpack Compose. Goal is to design reusable feature modules which can be used in multiple apps and each app is to provide the theme which that feature module requires.
For this project we have following modules:
- :components - contains reusable UI components
- :feature:registration - customizable registration screen
- :applications:facebook - module which provides its own theme for registration screen
- :applications:linkedin - module which provides its own theme for registration screen
How things work:
Registration feature module exposes all of its custom theming classes using
CompositionLocal with default values. For example:
Theming class ExtendedColors is exposed using LocalExtendedColors composition &
Theming class ExtendedTypography is exposed using LocalExtendedTypography composition
These classes will be used for customizing UI in Registration feature. Both
Applications modules i.e linkedin & facebook will create instances for these custom theming
classes and provide these instances to Registration
feature module by using CompositionLocalProvider.
For example:
LinkedIn will create an instance of ExtendedTypography named
LinkedInExtendedTypography and an instance of ExtendedColors named
LinkedInExtendedColors and will provide to Registration module using
CompositionLocalProvider(
LocalExtendedTypography provides LinkedInExtendedTypography,
LocalExtendedColors provides LinkedInExtendedColors
) {
RegistrationScreen()
}
Now use LocalExtendedTypography.current & LocalExtendedColors.current to
access ExtendedTypography
and ExtendedColors objects provided by any of the applications modules.
Note:
Use either FacebookApp() or LinkedInApp() in MainActivity to try out themes provided by these
2 applications modules.
- Add components, features & applications modules
- Add dependencies.gradle to sync dependency versions across modules
- Add registration screen in feature module with MaterialTypography, CustomTypography & Colors support
- Provide themes from applications module to Registration feature module
- Add support for multiple input types i.e OUTLINED or FILLED
- Add support for button shape
- Add component spacing support in Registration module as each app can have different spacing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Daniyal Javaid - LinkedIn - daniyaljavaid95@gmail.com