Development Recap (2024)

20.09.2024

Today I want to share a quick recap of my development process for Damier. This recap is based on the progress I shared on Discord within a rather small community for a custom ROM. Some information is lost, because other than the records inside this Discord community, no other records were created.

The first time I talked about Damier was on the 20th of September 2024, in a Discord forum about FreshROM, a custom ROM. I started development after asking for permission from the idea-giver Mykola Harmash, who created the iOS app Ripples (formerly Checker), from which I got the idea.

Back then, the app was called "Trackify" and I was initially asking for help with the way cell-colors are displayed.

I'm currently struggling a bit with Trackify. First of all, the name is temporary. I'm open to suggestions on that part too.

But I don't know how to deal with the alpha stuff. Should I divide the check-ins by 2400? Or how should the color intensity be defined? 2400 because the day has 24 hours and 100 check-ins per hour are more than enough to make it alpha = 1 perhaps

Or I'll let the user decide for their own goals, individually for the habit they want to track

The question about how the cell-colors should be calculated was somehow lost, because both parties decided that picking a proper name for the app was more important, and honestly, it was.

Similar to Qwotable, the final name suggestion came quickly from John, aka. TenSeventy7. Damier, French for 'checkerboard', was a pretty neat representation for the waffle-board design Damier was using from the very beginning.

Shortly after the name was chosen, Yanndroid suggested the backbone of today's max-check-ins feature, which was pretty much the only possible way for the cell-color calculation back then.

The first ever shared screenshot of Damier (or Trackify, and somehow also 'Anything Tracker'), was sent on the same day as an attempt to explain how this habit tracking should work. Back then, the app had a pretty basic design, focusing on a rather normal layout:

On the same day, Yanndroid also suggested that the check-in mode "goal" should be an option, so the user could decide how their cells are calculated.

23.09.2024

The last few days, I spent a lot of time dealing with the UI of the app. Even though I never had proper UI/UX training, I always felt like most apps look ... well ... boring. The same feeling quickly caught me when I was working on Damier. In the end, I messed up Damier so much, I basically had to restart the whole design. I also played around with the date-time format for the check-in history.

24.09.2024

On this day, I shared an update and the fixed UI, nothing fancy but definitely necessary. I also added a graph view to the details page.

John suggested going more playful, since it is Material 3 after all. The boxes should use different Material 3 shapes, and the color could be more playful. I eventually experimented with Material 3 shapes, but I had to draw them with Canvas. As a result, the performance was unnecessarily bad, since, combined with a lazy list, it would redraw the shapes whenever the lazy column redrew the item. However, it would make sense to try it again in future updates, given that there is now a library for this (MaterialShapes).

28.09.2024

I wasn't quite confident with the design yet. It looked kind of basic. So I tried something else: The border around the boxes would indicate that there was no check-in yet. Days when a check-in had already happened would instead be filled in as calculated.

02.10.2024

The day finally came. Damier's current design language, that is, the boxed main screen with an optional bottom button part, finally arrived. The check-in button was a button below the main content, kind of separated and lying in the background.

I also added a new animation that would reveal the check-in button if necessary. The idea of using the bolt icon came from Ripples. I liked the idea of not using a plus icon for everything.

Unfortunately, I had to remove this animation to make the responsive design work properly.

That left one more thing to think about: In what way do I let users add activities?

04.10.2024

With John, I discussed the best way to handle this "issue" of finding a good way to let users add activities. It was relatively clear that a Floating Action Button would be the most straightforward way. It's a well-known way to handle adding data to an app, used across all major apps, so why do it differently?

In the end, it looked like this:

As you can see, this version is already pretty close to how Damier looks today.

05.10.2024

There is only one weird bug where the details screen would go away after adding check-ins to the habit while being on the details screen. Tho I know perhaps why this is happening.

But the animations work

This is how I started the day: with a bug in Damier's way of handling check-ins. For anyone wondering what it looked like:

06.10.2024

At 2 AM, I finally released an early-access version inside the channel for anyone who wanted to test the application.

07.10.2024

I released the app icon that I had been working on for some time:

The icon was simple: the boxes inside showed the color progress for different levels of check-ins.

1. Top Left: The goal was 25% completed
2. Top Right: The goal was 75% completed
3. Bottom Left: The goal was 50% completed
4. Bottom Right: The data is from the current day, and 100% of the goal was completed

Even today, Damier uses the same icon format. Only the colors are different. Inside the app, today's data is no longer shown using a different color, it uses a border instead, something that is currently not represented in the icon but might be changed in the future.

I also created a light-mode version of the icon and asked which one would be better. John suggested using both, but I eventually figured it wouldn't really make sense. Xiaomi's launcher does not invalidate the icon cache when switching themes, so the icon wouldn't switch theme either. For some phones, e.g. Google Pixel, it might have worked, though.

I was also faced with the problem that releasing the app on the Google Play Store would require 20 testers. Luckily, the required number of testers was later lowered to 12, but it was still a huge deal for me. My family doesn't really share my interest in phones and apps, so they weren't really available to be testers.

11.10.2024

I was faced with a padding issue: the Floating Action Button would cover the last item of my list. Back then, I could have hidden it while scrolling through the list; I decided on something else later, though.

24.10.2024

Maybe, but only maybe, Damier is going to be the first app, I'm writing in Flutter. But only maybe

Spoiler alert: Damier did not, in fact, become the first app I wrote in Flutter. In fact, up until now, I still haven't created a single app using Flutter.

28.10.2024

I somehow managed to break the import feature for Damier. I also thought about changing the primary key of the database to the activity's title. Luckily, I decided to replace number-based IDs with UUIDs later, before publishing anything to the Google Play Store. The reason for finding a better alternative to number-based IDs was to hopefully avoid conflicts when importing activities from a backup. Using a title as an ID would have probably led to the same outcome I had with Qwotable: an unmaintainable database.

I did still use the title as the primary key for a while, but since Damier only had one user back then (me), it didn't really matter.

I also finally edited the design a bit and added a proper settings screen. By now, Damier's design resembled its current form much more closely.

29.10.2024

John suggested small margin fixes, which I implemented. He also asked whether it wouldn't be better if the content wasn't in an extra container in the first place. And though I understood his reasoning, I decided that this was going to be Damier's design. However, I understood there was a lot of work left to make it work properly on all devices.

03.11.2024

This wasn't directly connected to Damier, since development had been on pause with only small changes made during that time, but I participated in a free online course by Philip Lackner. The other courses weren't free, though, and my budget was limited. Still, I learned a lot that I would later use in Damier's code as well, even though that meant refactoring it completely.

08.11.2024

I restarted development on Damier. I was determined to add support for larger screens, so I used what I'd learned in the course to do exactly that.

That also meant working on the landscape layout for phones, which didn't look that great at first:

11.11.2024

I was faced with an issue where check-ins were no longer observed after refactoring the code. The reason for this: I was observing both database columns individually, but at the same time, inside a coroutine task, which for some reason didn't work.

Instead, I learned about the @Embedded annotation for Room databases, which made observing both columns at the same time a lot easier in combination with the @Relation annotation.

12.11.2024

Using this broke my chart, which required me to use remember. However, without explicitly stating the data as a key, remember would actually prevent recompositions, so that the chart only updated when the screen was reloaded. This was also when I introduced the new chart I used, updating from a column chart to a line chart.