Enhance your app’s design system
Jetpack Compose is the brand new UI Toolkit for Android the place we will create elements via code and keep away from the creation of XML information, on account of this Compose is extra intuitive, quickens the event course of, and is a really highly effective software for creating complicated designs with little effort.
One of the vital necessary issues whereas creating UI is the creation of our Theme, by default Android makes use of Material Design (the newest model is Materials You). Once we create an Android mission with Jetpack Compose we now have a folder named ui with a theme, colours, shapes and typography that internally makes use of the MaterialTheme composable.
Based mostly by myself expertise working with a Design System inside a big mission, we took the next steps to create our personal Theme and supply help for customized elements.
Colours
The very first thing is to create our colours, we will get colours from the UI/UX workforce, but when we don’t have a selected workforce to outline this colours we will outline our personal colours in a file. When we now have prepared the colours we have to create a category that handles our colours and materials colours, so we’ll create the category CustomColors.
Fonts
Fonts are simple to configure, we solely must create a Typography class, nevertheless it’s at all times good that we will create further lessons to reuse code in the primary class of our font. An important factor to recollect is that we have to have the definition of all our variations when it comes to textual content sizes comparable to h1, h2, physique, and so on; as a result of we’ll reuse it contained in the Typography class.
Shapes
Right here we don’t have an excessive amount of to configure, we simply must create our Shapes class and that’s all.
Most likely that is a very powerful factor to create a customized theme as a result of we’ll use CompositionLocal which is an choice the place we will go information down via the composition implicitly.
Generally, all the info flows from prime to backside traversing the UI tree as a type of world configuration. In our case will probably be helpful to ship our personal colours implicitly and use them in our customized theme for the entire software.
Final however not least, we have to assemble all of the items of our code to have our CustomTheme composable working in all our customized elements, so we’ll create colours for gentle and darkish modes that may change relying on the cellphone’s configuration.
