Material & Custom theming using Jetpack Compose

#android #jetpack #compose #kotlin

About The Project

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.

Results