Appearance
The UI is designed using Material Design 3.
We built the color scheme via Material Theme Builder
Theme Configuration
The theme can be customized by tweaking the following files:
- Color.kt
- Theme.kt
- Typography.kt
Color palette
If you wish to change the color palette, update those in Color.kt
Typography
We’ve overriden the default font by using “Urbanist”, and rest are the defaults that ships with Material theme
The one we’re using is a variable font.
Icons
We were planning to use the Material Icons Extended library for the app. But then we found out that some icons we see in their web portal are not available in that library. Besides, they’re also recommending to download individual icons and import it as vector asset for the Android implementation.
So that’s what we’re following.
How do I use an icon / symbol?
Under presentation.components, there’s a re-usable MaterialSymbol composable function which accepts an enum called MaterialSymbolType and returns an Icon (from Material 3)
@Composable
fun App() {
MaterialSymbol(MaterialSymbolType.Subject)
}How to add new icon?
Head to Material Symbols page. Search for your icon, and download the XML and import it via Android Studio.
Alternatively, from Android Studio, when you try to “Add” new Vector Asset, choose “Clip Art”, and click on the clip art icon, which will open a new window which you can do the same search you did on the website. Just make sure you’ve selected the Material Symbols in the filter. We’re using Rounded variant for the app.
And then update the MaterialSymbolType to add the newly added resource