Adopting Material3 in The Noise App
One of the benefits of an application rebuild is the ability to adopt new technologies; giving our development team efficient and future-proof tooling, as well as giving an enhanced experience for citizens using the app. Through this process, I’ve had the joy of learning and implementing Compose when working on The Noise App.
The Noise App is a noise nuisance reporting triage tool that allows citizens to report noise to their local reporting organisation. We serve councils and housing associations that cover a large proportion of the UK population. Now we are moving technologies forward to resolve existing technical debt, provide new value for our customers, and improve the lives of the citizens who use the app.
In July of this year, I joined the company to work on a rebuild of the app with modern technologies. The development process will focus on delivering updated architecture and automated testing to ensure code quality and maintainability into the future as the team grows.
As the Android Developer Summit approached I waited with bated breath to see the changes Google brings this year. We were happy to see that there were several updates that affect us directly in a positive way. While we hope to tackle AndroidX Media and others in the near future, an upgrade to the Material3 design language library was the first plan of action and a quick win for the project.
Adding Dependencies
The first step is to replace the old Compose Material dependency with the new Material3 library. If you haven’t already, you may find you need to bump your compileSdk version to 31 and your kotlin-gradle-plugin to 1.5.31 in order to build with this new library. Note that these changes are also a requirement of the latest version of Compose, so please be aware you may have to perform these changes even if you decide against a move to Material3.
API 31 brings with it a host of new IDE checks on your codebase, so you may also need to fix some issues that have not been flagged up before.
Material3 Components
The list of currently supported components can be found here: Compose Material 3
Below we have documented our transition from Material2 to Material3. The designs of The Noise App Rebuild are ever-evolving throughout the project. Designs are not final.
Text, Icon, IconButton, Button & Surface
To upgrade these components was as simple as replacing the Material portion of the import with Material3. Below is an example of an updated import for the Text component.
There are several new button types available with Material3. The default Button will use FilledButton, but there is also the option of using ElevatedButton, FilledTonalButton, OutlinedButton and TextButton.
You can visit Material 3 Buttons to learn when to use each type.
AlertDialog
In the rebuild, we wanted to add more friction when deleting audio recorded by the user. We decided to follow the suit of the many applications that display an AlertDialog to confirm the selection before completing a delete action. The new AlertDialog appeared at the perfect time, as we had just implemented two in our most recent sprint. To avoid duplicate code we use a reusable Alert Composable with the parameters title, question, positiveButton, negativeButton, positiveAction and negativeAction.
In Material3 the design of the AlertDialog was standardised. Instead of a generic buttons section, it is instead split into two explicit parameters. ConfirmButton and DismissButton, which heavily implies the intended pattern of design from Google.
NavigationBar
While this component was previously called BottomNavigation, its rename to NavigationBar implies this is the primary pattern for navigation in an application going forward. Bottom navigation has been encouraged in recent years due to its accessibility for those with smaller hands as phones continue to grow in size. It is much easier to reach the bottom of a phone screen than the top.
Below is our old implementation of BottomNavigation, which displays several BottomNavigationItems based on the elements in a list.
The new version simply requires replacing BottomNavigation with NavigationBar, and BottomNavigationItem with NavigationBarItem. Another simple swap.
SmallTopAppBar / CenterAlignedTopAppBar
Interestingly, the previously singular TopAppBar has now been replaced with four possible variants.
For implementation purposes, the Center aligned & Small types can be grouped into Regular top app bars, while the Medium & Large types can be grouped into Collapsing top app bars.
For our purposes, pending further design investigation, SmallTopAppBar will be used when the back button is enabled, and CenterAlignedTopAppBar will be used when the back button is disabled.
Below is our previous implementation of a TopAppBar that varies depending on a hideBackButton Boolean value.
The new implementation replaces the backgroundColor parameter with a new colors parameter that takes a TopAppBarColors Composable. This value is defaulted to TopAppBarDefaults.centerAlignedTopAppBarColors() which draws its values from tokens that are extracted from the colours scheme (which we discuss below). It is advised that you update the colour scheme as opposed to overwriting the values here.
Material3 Styling
Colour Scheme
Colour has undergone another overhaul with Material3 with a new focus on dynamic colours and colour relationships. It replaces the previous 12 colour types with a new set of 26 colours in each of your light and dark themes. Google would like us to build off the dynamic colours provided by their wallpaper extraction systems, and identify custom colours to preserve brand and other necessary colour application.
Design tokens enable flexibility and consistency across a product by allowing designers to assign an element’s color role in a UI, rather than a set value.
Tokens act as a bridge between an element’s assigned role and the chosen color value for a role. With the addition of tokens, designing for relationships of elements is more fundamental than selecting specific colors.
At first glance, the changes looked very intimidating. Coordinating with a designer to create a new palette of 26 different colours specific to the Android app sounded completely unrealistic.
Thankfully Google has provided developers with an interesting tool that will generate a colour palette from a primary, secondary, tertiary, and neutral colour set. While this is not a perfect solution or alternative to a carefully considered palette from a designer, it does greatly aid in transitioning from the old to the new. Since the tool allows you to export the colour palette into a colors.kt file which can be imported to an existing project, it also saves time writing an awful lot of boilerplate,
You can find the material theme builder here Material Theme Builder
Beginning with Android 12, users can generate individualized schemes through wallpaper selection and other customization settings. With M3 as a foundation, user-generated colors can coexist with app colors, putting a range of customizable visual experiences in the hands of users.
Dynamic color — Material Design 3
We will explore dynamic colour further in the future, but there are some concerns around how it will impact the branding of The Noise App. We would like design consistency across all the platforms we serve, Website, iOS, and Android. With these changes, we could find ourselves with the Android application looking entirely different from other platforms.
Typography
With Material3 also comes a Typography overhaul that uses adaptive type scaling rather than fixed sizes so that text scales nicely across varying device sizes. Gone with the old H1, and in with the new and improved headlineLarge.
You can find all the details surrounding the typography changes here.
Typography — Material Design 3
Again, the material theme builder linked above also exports a generic typography class, saving us from typing a new page of boilerplate.
Epilogue
Material3 adds new ways for individuals to further customise their experiences on their mobile phones. Dynamic colours put personal colour preferences and individual needs to the forefront of the application experience, while the new typography systems ensure that text is readable and beautiful across all of the user’s devices.
Material3 will become the primary supported design language in 2022, so implementing it at this early stage saves refactoring time down the line.
Throughout development, we will continue to monitor library changes and design and architecture trends. The library is still in alpha, meaning that it is liable to change in parts. Part of working with bleeding-edge technology is an ever-evolving list of best practices we must adhere to. The tech is exciting to work with, but we must intelligently manage our time to continue to maintain our codebase going forward.
