πππ ππππππππππ’ ππππππππ πππππππππππππ πππππππππππ ππ πππ ππ πππππππππππ’ ππππππ£π πΌπππππππ-πΉ π πππππ πππ πΉππππππ π²ππππππ ππππππ πππ. πΈπ ππππππ π π πππππ ππ ππππ πππππ πππ πππππππππ ππππ πππππππ ππππ ππππππππππ πππ ππππππππππ ππ πππ πΌπππππππ-πΉ ππππππ, ππππππππ’ ππππππππππ ππ’ πΆπππππ. π±π’ ππ‘πππππππ ππππ ππππππππππ’, ππππππππππ πππ ππππ π ππππ πππππππππππππ ππ πππ πππππππππππ ππ πππππππππππππ πΌπππππππ-πΉ ππππ πππππ ππππππππ πππ πππππππ πππππ πππππππ’ ππ ππππππ ππππππππ’ πππππππππ πππ ππππππππ ππππ ππππππππππ.
πΌππππππππΉ π°ππππππ ππππππ π²πππππππππ
Light Theme Demo |
Dark Theme Demo |
|---|---|
 |
 |
- It is the new standard way of building the UI that Google recommends.
- In the past till now we used to use material-2 and the material-3 comes with new features
- A good feature that comes with material-3 is dynamic colors
- In android-12, we will know about these dynamic colors
- Android takes wallpaper or the color that you define as your wallpaper and generates a color theme around that. So all the apps that use material themes will generate your own theme based on the color of the wallpaper for your app
π²ππ π π πππππππ πππππ ππ’πππππ ππππππ
- Yes this is optional, we can disable our application if this doesn't suit our design.
π³ππππππππππ ππππππππ ππππ πΌππππππππΈ ππ πΌππππππππΉ
πΌππππππππΈ |
πΌππππππππΉ |
|---|---|
In the theme file we refer function blocks as lightColors and darkColors |
In the theme file we refer function blocks as lightColorScheme and darkColorScheme |
There is a primary variant color |
primary variant color is not there but primary,secondary,tertiary color is present |
| Dynamic colors are not present | Dynamic colors are present |
πΊππ’ π²ππππ π½πππ |
π³ππππππππππ ππ π ππππ ππ πππ |
|---|---|
| Primary Key Color | This is something bright and something that stands out, Say action button etc that enables user to click on it |
| Secodary Key Color | This is usually based on primary key color that need to stand out but not as much as primary color |
| Tertiary Key Color | This is same as primary and secondary but next lighter action |
π°πππππ π²ππππ π½πππ |
π³ππππππππππ ππ π ππππ ππ πππ |
|---|---|
| On Primary | This is a color that is on top of primary color. Say if a action button is there with primary color, the plus symbol on it will be on primary |
| Primary Container | This is a color similar to primary color, Now we use this say a background for the floating action button. |
| On Primary Container | This will the plus symbol color on the primary container color |
π½ππππππ π²ππππ π½πππ |
π³ππππππππππ ππ π ππππ ππ πππ |
|---|---|
| Background | This will the color of the background, In case of list the padding area part that seperates list item from screen |
| OnBackground | This will be if any color needs to be added on top of the background but out side the surface |
| Surface | This will be the background color of the card view in a list |
| OnSurface | This will be the color, if any view is added that has a background on top of the surface |
π΄ππππ π²ππππ π½πππ |
π³ππππππππππ ππ π ππππ ππ πππ |
|---|---|
| Error | Usually we show error in this color, Say Snackbar indicating background color |
| On Error | This color will be the text or icon color on top of error background color |
| Error Container | This will be the background of say dialog that is displayed as error |
| On Error Container | Again this will be the content that is displayed on top of error container color |
πΏππππππ-ππππππππ ππππππ ππππππ
- This is basically the branding colors that we use are specifc to app, In Such a scenario, we use these custom specific colors
- This is used for some elements that is displayed on top of other surfaces.
- Used on top of the widgets such as snackbar
- Used on the borders of widgets and the content of it
π·ππ ππ πππ ππππππ πππππ ππππππππ πππ πΌπππππππ-πΉ
- There are 2 types
DynamicandCustom. Dynamicis used to get the colors based on a image.Customis used to define colors based on a specific color.- In the custom colors option we choose a primary color and based on the primary color the algorithm selects other colors, We can even give a specific touches for it.
@Composable
fun MaterialAppTheme(
// Flag to determine the dark/light theme
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
// Parent most top level composable
content: @Composable () -> Unit
) {
// We need context here because the support for dynamic colors comes from android system
val context = LocalContext.current
val view = LocalView.current
// We can apply one of four different color scheme's depending on what type of device the user has.
// CONDITION-1:-> If the user is running on android-12 and above, We need to use dynamic colors.
// CONDITION-2:-> If the user is running on device prior to android-12, We will use normal material-2 theme.
// CONDITION-3:-> If the user again is using light theme, then we use light colors else use dark colors.
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
// CONDITION-1:-> If the user is running on android-12 and above, We need to use dynamic colors.
if (darkTheme){
// CONDITION-3:-> If the user again is using dark theme, then we use dark colors.
dynamicDarkColorScheme(context)
} else {
// CONDITION-3:-> If the user again is using light theme, then we use light colors.
dynamicLightColorScheme(context)
}
}
darkTheme -> {
// CONDITION-1:-> If the user is running on below android-12, We need to use material-2 colors.
// CONDITION-3:-> If the user again is using dark theme, then we use dark colors.
DarkColors
}
else -> {
// CONDITION-1:-> If the user is running on below android-12, We need to use material-2 colors.
// CONDITION-3:-> If the user again is using light theme, then we use light colors.
LightColors
}
}
// Set the color for the status bar
if (!view.isInEditMode) {
/* getting the current window by tapping into the Activity */
val currentWindow = (view.context as? Activity)?.window
?: throw Exception("Not in an activity - unable to get Window reference")
SideEffect {
/* the default code did the same cast here - might as well use our new variable! */
currentWindow.statusBarColor = colorScheme.primary.toArgb()
/* accessing the insets controller to change appearance of the status bar, with 100% less deprecation warnings */
WindowCompat.getInsetsController(currentWindow, view).isAppearanceLightStatusBars =
darkTheme
}
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content
)
}- Before
Material 3, there were6 Headline variations,2 Subtitle variations,2 Body variations,Button,Caption, andOverline styles. - How to use
headline,title,body,label, etc. More details on android documentation. - In
Material 3, there is a more regular and smaller number of variants for each classification, namelySmall,Medium, andLarge.
π²πππππππππ ππ πΌππππππππΈ πππ πΌππππππππΉ πππ£ππ πππ πππππ ππππππππππ |
|---|
 |
If you feel like support me a coffee for my efforts, I would greatly appreciate it.
Read contribution guidelines for more information regarding contribution.
Feature requests are always welcome, File an issue here.
Support it by clicking the β button on the upper right of this page. βοΈ
This project is licensed under the Apache License 2.0 - see the LICENSE file for details
