Tag Archives: #JetpackCompose

Mercari improves UI development productivity by 56% with Jetpack Compose

Posted by Chiko Shimizu, Partner Developer Advocate and Tamao Imura, Developer Marketing Manager

Mercari improves UI development productivity by 56% with Jetpack Compose

Mercari allows millions of people to shop and sell almost anything. The company was founded in 2013 in Japan, and it now is the largest smartphone-focused C2C marketplace in Japan. Mercari’s Client Architect Team started using Jetpack Compose in 2020 with the goal of using modern solutions and technologies that can scale for the long term to build their tech stack for new applications.

What they did

The Mercari team needed to implement a design system with complex state management and styling on Android Views — a very complex task. Using Jetpack Compose, they were not only able to implement this complex system, it helped them spend less time developing each screen.

Jetpack Compose also helped the team write UI code for their new app utilizing the design system, making their UI code concise and easy to understand. As a result, the team can spend more time writing screens and business logic, such as practical support for the dark theme.

In addition, the Mercari team wrote a proof-of-concept tool for integrating Figma with the design system, which automatically generates UI code from the component designs. The team said that developing this tool was easier with Compose due to its declarative nature.

“Once Android developers get used to writing Jetpack Compose code, they wouldn’t wish to go back.” - Anthony Allan Conda, Android Tech Lead at Mercari

Results

Between Jetpack Compose and their new design system, Mercari was able to use far less code to write screens. On screens with infinitely-scrollable content — a common use case — they actually reduced their code by about 56%. As a result, they were able to write more screens in the same amount of time, giving them more time to write business logic and other parts of the code.

Also, they were able to do more with the UI itself, such as incorporating animations and using intuitive APIs such as AnimatedVisibility, Crossfade, and Animatable.

Mercari is planning to continue using Jetpack Compose in their new application until its release. Their design system, with the Android SDK written in Jetpack Compose, is also designed to work with multiple applications within Mercari.

Get started

Learn more about Jetpack Compose.

Android Dev Challenge: Week 3 – Speed round

Posted by Jolanda Verhoef, Developer Relations Engineer

On your marks...Get set… Wait a second! Save the date for the third week of the #AndroidDevChallenge! On March 13th, compete with other developers in your time zone; the fastest Compose skills wins! We loved all the creative submissions of week #1 and #2, but now we’re looking for speed. Here’s your challenge:

Week #3 - Speed round 🏎

Android 12 logo

Be the fastest to implement a set of designs provided by us. The designs will be posted here when the challenge starts. Submit your entry* as soon as you finish implementing the designs.

We’ll post different designs at 3 different times on the 13th:

  • APAC-friendly: opens at 9AM UTC+8
  • EMEA-friendly: opens at 9AM UTC
  • Americas-friendly: opens at 9AM UTC-8

We’ll update this blog post at the beginning of each round with the link to the designs.

Your UI must be fully built in Compose, and strictly match all the guidelines specified in the designs. To help you with the implementation, check out the Compose documentation on theming, layouts, and navigation. For some hands-on learning try out the Compose pathway, with codelabs covering several topics useful for completing this challenge.

Your solution must be implemented in a GitHub repository. Make a copy of this Github repository template and follow the instructions in the README. The template contains a basic Hello World! in Compose and a continuous integration setup.

This week’s prize: a Google Pixel 5!

Android 12 logo

For this week’s challenge, we’re giving away a Google Pixel 5, the ultimate 5G Google phone. In fact, we’ll be giving away three Google Pixel 5 phones: one to each developer who is fastest to submit a successfully implemented design for each of the three rounds of challenges.*





Help make Jetpack Compose better

Community is at the heart of Jetpack Compose and your feedback helps us build a better product:

  • File issues with Jetpack Compose on the official issue tracker.
  • Sign up to be part of the Jetpack Compose research studies.

*Please review the link for the full official rules associated with the entry. 

*If you don’t live in a country where the Pixel 5 is available, when you win we’ll instead send you an electronics gift card valued at US$699.