[PAID] M³Colors Extension - Material Design 3 Color Palette

[Kanishka_Developer]

M³Colors

---

y tho

Google introduced Material Design 3 / Material You in Android 12, with one of the most interesting features being the dynamic system colors, adapting to the wallpaper for a cohesive look and feel.

App Inventor apps now target API 33 (Android 13), which is the most widespread Android version currently, and Material You has established itself since its initial release. Thus one might want to make use of it in their App Inventor projects as well, so as to not be left behind in the trend.

Blocks

Instructions

1. Import M3Colors.
2. Set BackgroundColor, TextColor, etc. properties of components to the colors returned by M3Colors as required.
3. Ta-da! Your app now looks more integrated with Material Design 3.

Link

Sample APK: here

Screenshots and other stuff over at Kaffeine :

https://kaffeine.tech/m3colors

Pricing

The extension took way more debugging than I expected and I'm now a broke college student so I need money.
At least for now, the extension costs Rs. 500 or 7 USD, which I feel is a fairly low price? The price is negotiable if you need the extension but unable to pay that much. Similarly, if you want to support my work, a donation is appreciated! Feel free to buy me a coffee.

Kanishka Chakraborty is creating software, YouTube videos and more.

Can't wait to see what you guys come up with. As always, I'm open to feedback.

[Patryk_F]

Thank you for your contribution. Everything looks good. The only thing missing is a description of individual blocks, what they do, what they return, etc. You wrote something about Material, but we don't know exactly what colors these blocks return?

What is the minimum Android API level for your extension? Because I can't install your sample App on Android9 phone.

[ShanmugaNathan2023]

Thanks for this extension, i don’t think it’s possible in MIT AI2,
works fine, keep up the good work.

[Kanishka_Developer]

Alright, I'll do my best at explaining what the blocks are doing.

All the blocks return a color, which in App Inventor is the grey family of blocks. Where you would do this:

...you can do this:

Primary, PrimaryVariant and Secondary return speciifc shades meant to be used in the bulk of your app.

Accent1, Accent2, Accent3, Neutral1 and Neutral2 are all the different color types defined under Material. The respective blocks take in the shade argument (a number out of 0, 10, 50, 100, 200, ..., 1000) for 13 shades per color type for a total of 65 colors.

The extension requires Android 12 (API 31) or greater to work properly because that's where Material Design 3 was introduced.

The sample app on my site specifically has a minAPI of API 29, which is uncorrelated with the extension itself.

[ShanmugaNathan2023]

@Patryk_F

what colors these blocks return?

this give you an idea about colors,
https://developer.android.com/jetpack/compose/designsystems/material3

@Patryk_F

Android9 phone.

Works / these features available in Android 12 & above

[Kanishka_Developer]

You can see how much of a mess the colors are without Material 3 on the system:

Left: Android 7.1.1, Right: Android 14