πππ ππππππππππ’ ππππππππ πππππππππππππ πππππππππππ ππ πππ ππ πππππππππππ’ ππππππ£π πΌπππππππ-πΉ π πππππ πππ πΉππππππ π²ππππππ ππππππ πππ. πΈπ ππππππ π π πππππ ππ ππππ πππππ πππ πππππππππ ππππ πππππππ ππππ ππππππππππ πππ ππππππππππ ππ πππ πΌπππππππ-πΉ ππππππ, ππππππππ’ ππππππππππ ππ’ πΆπππππ. π±π’ ππ‘πππππππ ππππ ππππππππππ’, ππππππππππ πππ ππππ π ππππ πππππππππππππ ππ πππ πππππππππππ ππ πππππππππππππ πΌπππππππ-πΉ ππππ πππππ ππππππππ πππ πππππππ πππππ πππππππ’ ππ ππππππ ππππππππ’ πππππππππ πππ ππππππππ ππππ ππππππππππ.
πΌππππππππΉ π°ππππππ ππππππ π²πππππππππ
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
