Mobile Multibody Dynamics Android Update: Material 3 Theming

A Note on My Approach to UI Design

I have a bit of a simple design philosophy, which is, when in doubt, use the defaults.

Part of this goes back to my last job, where the organization had hired a design firm to update its Powerpoint template. The end result was simplistic, and a lot of my coworkers thought too much so, like “why hire an expensive design firm to create a template with very simple shapes, basic fonts, and limited color palette?” Before long, half the office was using some variation of their own template because they felt they needed something different.

In fact, the template we received was professional, modern, and conveyed the brand appropriately via an easily readable and non-distracting theme. At least, that was my opinion, and as sort of a rebel against those who thought the design needed more widgets, I opted to use what was delivered to us, (almost*) as-is. After all, we are engineers and analysts, not graphic designers, why not let the professionals do their job, while we do ours?

As I began learning mobile development on iOS and Android, one thing that stuck out to was the extent that both Apple and Google have crafted very specific design guidelines for their respective operating systems. The native development tools they provide, lately being SwiftUI and Jetpack Compose, are constructed such that if you just use the tools that you are given and don’t add too many additional widgets, your app will be basically compliant with those design guidelines. Developers are given the freedom to change things, particularly the colors and fonts associated with certain displays, interfaces, and intents. However, you are politely recommended not to do too much unless you *really* know what you are doing (meaning, you are a graphic designer, or work with a team of them).

Material Design as Applied to Mobile Multibody Dynamics

Which brings me to my main app, Mobile Multibody Dynamics, for which I’d be remiss if I didn’t share the download links right up front.

I had let MOMDYN for Android sit on the table for a while, as I had started upgrading the iOS project to native SwiftUI, as well as other projects like YouKon. Even still, having built up the Android version using Jetpack Compose and Material Design 2, I felt that the look of the app still held up, as you can see from the screenshots of the previous version 2.0.

Well, it had gone long enough where the Android developer console was informing me that the app would be taken down unless I built it using a more recent SDK. Along with the SDK upgrades, there is a relatively new Material Design 3, which I also updated the app to use. Below is version 2.1, which shows some of the subtle changes associated with the Material Design 2 to 3 upgrade, alongside a couple of other visual improvements I made.

A design philosophy that exists in both iOS and Android has to do with colors and fonts, and the fact that it is better not to say “I want this thing to be green with 16 point font,” but to say “I want this to serve a primary purpose, with a font suitable for a title line.” In other words, design around the role that a given graphical element plays on the screen, rather trying to think of the exact color and size you want that element will be. Both SwiftUI and Jetpack Compose have been integrated such that if you provide a well-selected role, they will make the adjustments to the appearance of that item for you, including color and font, and even making adjustments for device type, screen dimensions, accessibility, etc.

Dynamic Color Theming

The interesting change with the upgrade to Material 3 is dynamic color theming. Where in the past, you as the app designer would typically select a palette of your primary and secondary “brand” colors, or select from palettes provided by the creators of Material Design, dynamic color makes adjustments to the appearance of your app based upon how the user themself prefer the look of their device. For example, the theme colors will change when the user selects a new wallpaper, as you can see below for a couple of examples of how the MOMDYN welcome screen dynamically updates for different wallpaper selections.

Back to where I started about using defaults, this dynamic theming approach is one that I like on the basis that rather than having to choose a color scheme that *I* (a mechanical engineer) think looks good, I can reliably rely on the OS and design system to provide one for me that will be consistent with its own internal theming.

Other Upgrades

Other than dynamic theming, there aren’t yet many structural changes to how the app functions, but a couple there are a couple other slight visual changes I made to improve the app’s appearance:

• Removed the top app bar when on the welcome screen, as you need not be editing the model from there, and to make the header appearance more consistent with how it shows up on iOS and the website.
• Used the new horizontal pager thats part of the core Jetpack Compose, instead of the prior accompanist pager, and added title annotation inside the pager, rather than in the page below it.

These are visible in the screenshots near the top of this post, and while fairly minor, I think should mark an improvement in the overall experience.

In summary, the latest update to Mobile Multibody Dynamics allows it to stay on the Google Play store, while upgrading the user experience using new Material 3 components. Dynamic theming (colors consistent with the user’s preference not that of the developer) is the most significant change, but a couple component design changes were made as well.

Closing Thoughts, and Aste Nagusia!

This is my first post in something like a month, as I’ve been busy with a couple side projects, and generally just enjoying my time here in Bilbao. On the latter note, I’m writing this on the second Saturday of Aste Nagusia, the largest yearly festival in Bilbao. Expect Rachel will follow-up with more post, but suffice to say, we’ve been partying in the street for the past week, and probably will need to rest for a few weeks after its done. We actually were here exactly 5 years ago, during our first six month sabbatical, and just a few months before the world shut down for the pandemic. This year its been cool to see some of the posters displayed from each year where the festival has taken place, as you see below, 2020 and 2021 are conspicuously missing.

This year’s poster, on the lower right, depicts Teatro Arriaga, on the edges of Casco Viejo where much of the festivities take place. That happens to be about a 5 minute walk from our apartment, and we’ve been hearing the celebration at all hours of the madrugada (the hours after midnight and before you wake up), for better or for worse.

So, two more nights of partying, then back to committing more time to my projects, this site, and likely more Spanish language classes. Cheers, and if you’ve made it this far, thank you for reading!