Live Mosaic at Droidcon London 2023
Bumble Inc.’s booth engagement project
Intro
Having a London office with lots of local colleagues and many more visiting from Barcelona, Droidcon London is always a fantastic opportunity for us at Bumble to meet the Android developer community as well as each other:
We usually have a booth presence too. Instead of coding challenges we did in the past, this year we tried something new — We brought a big screen that attracted quite a crowd:
We were running a collaborative message board, live mosaics, and lots of custom animations we made using Appyx and Compose Multiplatform on the screen:
Both to showcase our own in-house technologies and to have a lot of fun — and indeed we had lots making this happen!
But what is this project really about?
Project & backing technologies
We brought an open-source project backed by our own in house library, Appyx, running on Compose Multiplatform.
Since it’s multiplatform, it works on your mobile device too of course — but it just looks gorgeous when launched on desktop, big screen, live!
You can check out the project here:
A collaborative message wall
Our goal was to provide an engagement point with the crowd about our technologies in a fun, but low entry barrier way — we created a collaborative message wall you could add entries to:
We supported three types of entries: Text, Image, and even CustomComposable to unlock all your creative potential!
All you needed to do was to add your entry to a list in a pull request, and if we merged it it would be featured on our screen live:
As a default, we showed the entries in the “Starfield” visualisation shown above. Later we also enabled this other beautiful showcasing of the entries:
Live mosaic and raffle
Every entry added to the message wall also automatically added one more piece to our mosaics, helping to complete them.
We had a total of three different, beautiful mosaics each with a different backside. This one is already complete:
Additionally, every entry you added earned you a ticket in the raffle for our prizes!
A bit more on the tech stack
It would go beyond the limitations of this article to explain all of the details, but don’t worry — I’ll drop a lot of links at the end of the article where you can dig for more information.
In short, our set of libraries under the Appyx name allows you many magical things to achieve with Compose Multiplatform. In this project we were using Appyx to:
- Implement the custom mosaic component using Appyx Interactions
- Drive the navigation from screen to screen using a custom clip shape transition using Appyx Navigation
In this example, all of the tiles movements you can see are backed by model state changes on the custom mosaic Appyx component that we implemented for this project:
Also worth mentioning is this dissolve transition when Appyx navigates away from the current screen to the next one:
To be clear: this isn’t just a gimmick — this is truly part of the navigation.
Appyx’s transition engine is flexible enough that it allows you to implement almost anything visual that you can think of using Compose, and apply it as a navigation transition — even custom shape masks animated over time.
If you’re bored of the usual slide and fade transitions, give Appyx a try!
Live web app
Since the whole project is Compose Multiplatform, we also tried to make a live webcast working.
After all, you can target web with Compose, and in fact, we’ve done it before — You can find live, interactive, embedded samples on the Appyx project page.
The idea was to create a similar solution for the Live Mosaic itself, so that you could track how the message board evolves even if you’re not at the booth:
The image loading performance is not the best on the web version, however it’s still an amazing feat of technology that we could do this with Compose Multiplatform and Appyx!
Composable art created by you
Finally, I wanted to mention some of my personal favourites from the custom Composable contributions created by you — not in any specific order, as they’re all amazing:
- A custom clock by Márton Braun
- Spooky Halloween with an animated gradient by István Juhos
- Composable Sheep by Nicole Terc (yes, those sheep!)
If you’d like to learn more about our tech stack
Here are some links you might find useful:
- Repository: Live mosaic
- Repository: Appyx
- Documentation: Appyx project page
- Article: Appyx 2.0 — Gesture-driven navigation for Compose Multiplatform
- Droidcon Berlin 2023 talk: Gesture-driven, multiplatform transitions with Appyx
- Droidcon London 2023 talk: Navigation superpowers at your fingertips
See you on the screen next time!
This project has been so much fun, creativity, and collaboration to make happen! Our entire team had a blast, and based on the community feedback and all your enthusiastic contributions, you did too!
Where to next? This is the first time we tried this project, but surely not the last. We learned a lot along the way, and along with some more ideas we’ll want to evolve it even further in the future. You can expect to see it again in some other conference to come!
So bring your best custom Composables, and hope to see you all on the screen next time!
