Tag Archives: #JetpackCompose

#TheAndroidShow: the latest from MWC, Gemini Nano, Android 15 and more!

Posted by Anirudh Dewani, Director of Android Developer Relations


Last week, Android device makers released a slew of new devices, and today we’re unpacking what that means for developers, as well as the latest in Gemini Nano, Android 15, Jetpack Compose and more, in another episode of our quarterly show, #TheAndroidShow:

The lastest wearables and foldables – get building!

Android device makers unveiled their latest wearables and foldables last week at Mobile World Congress, and we were on the ground in Barcelona taking a look at those new devices and how you can get started building on top of them. A few of our favorites:

    • Xiaomi Watch 2,the latest smart watch from the Xiaomi team. This device is powered by Wear OS by Google and provides upgraded camera, fitness, and sleep experiences to allow users to get the most from their device.
    • PORSCHE DESIGN HONOR Magic V2 RSR, the world’s thinnest inward foldable smartphone. This is the latest foldable for Android and was designed with the user experience at the forefront, including human-centric eye comfort technology.

Compose is an amazing way to build apps for your users across form factors. Compose for Wear OS and the upcoming adaptive layouts for large screens help devs bring their apps to life with less code, powerful tools, and intuitive APIs. Check out the Wear OS and Large Screen galleries, where you can find UX inspiration and design guidance tailored to your type of app.




Behind the scenes, with Gemini Nano and AICore

With all of the excitement around generative AI, it could be daunting to know where to start. So in today’s show, we’re taking you behind the scenes with Gemini Nano, Google’s most efficient model built for on-device tasks, and AICore, Android’s system service for on-device foundation models. And we’re spotlighting how the team that builds the Recorder app used Gemini Nano to help summarize users’ voice memos on-device and with privacy in mind. And here’s the best part: the team built the feature in a short time with only a small number of engineers.




Now in Android

We celebrated the 100th episode of Now in Android, covering the latest developer news, including:




And that’s a wrap on another episode of our quarterly show, #TheAndroidShow. But the conversation continues on YouTube, X and LinkedIn: tell us your favorite part, or what you’d like us to dive into next time on our quarterly episode. And before we sign off, you can watch the full playlist, with the latest in Android developer news, here.

#TheAndroidShow: Faster and easier to build excellent apps, across devices.

Posted by Anirudh Dewani, Director of Android Developer Relations

We just wrapped another episode of #TheAndroidShow; in the show, we covered the latest in Android development, including a look at the new Pixel watch and the world of wearables, gathered the team to demo tools and libraries to build for foldables, large screen devices, with Compose, Android 14, Studio Bot, and more. Take a look, and here’s a recap of some of the ways we’re helping make it faster and easier to build excellent apps, across devices:

Studio Bot: improving your productivity, through Generative AI

At Google I/O we gave you a preview of Studio Bot, an AI powered coding assistant that is tightly integrated into Android Studio, designed to make Android development faster and easier. Last month, Studio Bot expanded into over 170 countries, and today we’re adding even more functionality in the latest canary release to help you be more productive. AI code completion enables you to receive suggestions for more complex code completions, such as multiline code or even entire functions. You can also now add comments to your code, and document code with just a click using Studio Bot. We caught up with Jamal Eason to learn about the investments the team is working on, including our improvements in quality.

Faster and easier to build, with Jetpack Compose

Jetpack Compose gives you powerful and intuitive APIs, which make it faster and easier to build UIs. Since Google I/O, we’ve been working on improving performance across Compose to make it even more helpful. Developers around the world are taking advantage of Compose to help them rewrite screens, build new screens, or create new apps. For example, The Reddit team adopted Compose for their design system, which improved their code flexibility and reduced code duplication. They rewrote several features in Compose and their new tech stack, one of them being Reddit Recap, with beautiful animations. They were able to achieve feature parity with 44% less code when they rewrote it using Compose, saving engineering resources and time.

Build across devices, with large screens

Foldables and tablets are an important space - and the market for large screens is growing with Samsung announcing that half of their users are thinking of making a foldable their next phone. We’re continuing to build tools and libraries to make it easier to build for different device types, including device streaming and new drag and drop APIs in Compose. See how Zoom saw 2x higher user engagement and optimized their app for large screens, and get started with making your app work better across screen sizes and form factors.

The latest in wearables, with Wear OS 4 and Pixel Watch 2

Earlier this month, we saw the launch of Google Pixel Watch 2 - the first Google watch with all the capabilities of Wear OS 4! The latest version of Wear OS offers several capabilities that make it easier to develop exceptional wearable experiences, from Watch Face Format to enhanced tiles and more. Read more to discover the latest updates to Wear OS and how you can get started!

Making excellent, premium apps

Earlier this month, Android 14 started rolling out to users around the world. So there’s no better time to start optimizing your apps for the release and taking advantage of new features in Android 14 to help you build excellent experiences for your users using the best of Android, such as improved camera functionality with UltraHDR, seamless authentication with Credential Manager and enhanced widget development with Jetpack Glance. In the show, we saw how Snapchat used Camera2 Extension API to build camera features such as night mode, zoom, and tap-to-focus, enhancing their user’s experience capturing high-quality Snaps on Android devices, and also had a conversation with Dave Burke about Android 14 and more. Take a look!

Connecting with you at events around the world

This year, we're excited to bring the Android team and our Android Google Developer Expert friends to events around the world, you can learn more about it here. Later this month, the Android team will be at Droidcon London (October 26-27), bringing talks and hosting office hours around many exciting topics, and a panel of subject matter experts. Android GDEs will be speaking at 100+ DevFest events around the world, with special appearances from the Android team at DevFests in New York, the Bay Area, London, and Singapore among others. We look forward to connecting with thousands of you in person!


Missed the show? You can watch it here, or check out the full playlist here. This is your conversation with the broader Android community, and if you’ve got an idea for the next show, we’d love to hear it - send us a Tweet, or share a message in the comments. We can’t wait to hear from you!

Mercari reduces 355K lines of code, a 69% difference, by rebuilding with Jetpack Compose

Posted by the Android team

In 2020, the Mercari team took on a big initiative to update its app’s technical infrastructure. At the time, its codebase was seven years old and hadn’t undergone any major architectural updates. This affected the team’s ability to develop new features and release timely app updates. To resolve this technical debt, Mercari launched what it called the GroundUP initiative—a complete rewrite of its application across platforms, including Android.

The goal was to create a completely modernized application with a scalable design. While retooling the app, Mercari developers turned to Jetpack Compose, Android’s modern declarative toolkit for creating native UI. During the evaluation, the team learned rewriting in Jetpack Compose would help clean up their codebase and have more control over how the app looks.

A rewrite with less code

The Mercari team completely rewrote the architecture and tech stack for its Android app using Jetpack Compose. Mercari developers created a new design system and completely integrated it using Compose, enabling them to easily test and implement new features. Using this new design system, the Mercari team rewrote more than 130 UI screens for its marketplace and modernized the look and feel of many of their components.

With the help of the Jetpack Libraries, Mercari’s team eliminated all legacy code during the rewrite, drastically reducing its codebase and making it more manageable for developers. “Virtually, it’s the same app with way less code,” said Allan Conda, Android technology lead at Mercari. “The rewritten app has about 355,000 fewer lines of code, which is about 69% less than what it had before.”

Moving image showing lines of code that appear and disappear on the leftmost panel of the screen. The spacing between the boxes in the center panel changes, and the overall app view reflects these changes in the rightmost panel.

Interoperability with Views as an early adopter

When the Mercari team first began its GroundUP initiative, Jetpack Compose was only available in developer preview. They wanted the app written completely in Jetpack Compose due to its new declarative approach to creating UI. However, because it was still so new, they found themselves having to solve for unique edge cases using both toolkits.

For example, on Mercari’s listing form screens, users are prompted to input details about the merchandise they want to list. Users were then supposed to be able to select photos from their device gallery and rearrange them on this screen using a drag gesture. Gesture APIs weren’t available in Jetpack Compose at the time, so the team took advantage of Compose's AndroidView to seamlessly integrate Views that handled gestures on the listing form screen. This provided a stable yet temporary solution to implementing drag gestures until the feature became available with Jetpack Compose.

The Mercari team was impressed by how easy it was to switch between the two toolkits, and having the option to use Views alongside Compose gave them better control of edge cases like this. Compose now supports gesture APIs, and Mercari developers have since completely written and integrated the drag gesture component solely using Compose.

Jetpack Compose has matured a lot since Mercari’s initial adoption, and most Android developers no longer need to worry about having to interoperate with both toolkits as Android apps can now be written completely in Compose.

Improving and monitoring performance with Compose

Using Compose, the Mercari team automated baseline profile generation for every stable release of the app and found it to be really helpful. The home screen renders frames up to 2x faster with the default Compose baseline profile compared to without a baseline profile. By providing a custom profile, there’s an additional improvement of up to 20% faster when Mercari users are scrolling compared to just having the default baseline profile.

The team also wrote automated performance tests based on the app’s core scenarios with Android Macrobenchmark. “Using Android Macrobenchmark, we can automatically test start-up, scroll, and screen load times performance,” said Allan. “Currently, we have six core scenarios covered by these tests, like search results and browsing items.”

Additionally, Mercari developers integrated Firebase Performance Monitoring, a real-time app performance monitoring tool, with custom code to calculate scrolling performance on Compose screens. With Firebase Performance Monitoring, the Mercari team detected a performance issue on its search result screen. Using the Android Profiler to pinpoint the problem, Mercari developers discovered there were poor frame rates when scrolling search results. This resulted in the slow rendering instances being reduced by around 23.6%.

The Mercari team solved this frame rate issue with guidance from Google’s Compose performance best practices and Compose stability. Mercari developers had the app skip its Composables and hoist the unused states on the search results screen, significantly improving the frame rates.

Headshot of Allan Conda, Android Tech Lead at Mercari, similing, with quote text reads 'Jetpack Compose helped us implement our Design System and rewrite 130+ screens and many of our components'

More opportunities with Jetpack Compose

With less code to maintain, it’s much easier for Mercari developers to test and implement features. “We have a ton of experiments we can finally conduct using our refreshed platforms. Our users can expect new features coming to the Mercari app at a faster rate,” said Allan.

Mercari’s developers are excited to further develop the app using Animation APIs. With Compose, it’s much easier to animate components, which can result in huge improvements for Android UXs.

Get started

Optimize your UI development with Jetpack Compose.

Hundreds of thousands of developers are learning Jetpack Compose

Posted by the Android teamJetpack Compose is Android’s modern UI toolkit which is used by many well-known apps such as Pinterest, SoundCloud and Lyft. It enables developers to more intuitively and efficiently build better quality Android apps. To help developers around the world take advantage of these benefits, we launched Compose Camp, an Android meetup series where developers were able to learn Jetpack Compose, network with peers, and work on hands-on coding projects together, with the guidance of “Camp Leaders” who facilitated the sessions.

Illustration of a hexagonal shaped, Compose Camp scout badge
To help developers across different experience levels, Compose Camp offered 2 tracks. The beginner track was aimed at individuals new to Android development or coding. In this track, developers learned the basics of building Android apps and how to create UI with Compose. The experienced track was designed to help developers who were already familiar with building for Android, but wanted to learn how to use Jetpack Compose. Developers learned more advanced concepts in layouts, theming, architecture, migration, and more.


Campers around the world

It was great to see hundreds of thousands of you around the world participate in Compose Camp! Whether it was through a Google Developer Group, Google Developer Student Club, with your peers and colleagues, or if you went “solo-camping” and took the course on your own, we saw how many of you were engaged in the learning materials, recorded your sessions so you can help others, and shared your projects on social with #ComposeCamp.
Headshot of Rahul Sain, smiling
We heard from Rahul Sain, an enthusiastic Android developer who was a Compose Camp Leader for GDSC Bhagwan Parshuram Institute of Technology - Delhi. 
“Compose Camp enabled me to educate others about new technologies used by developers, and helped me learn about them in the process. Our college now has a group of fellow developers who concentrate solely on the development of Android apps."
 Rahul has built several of his own apps, including Scribble.io, which he built using Jetpack Compose. 
 “I used Jetpack Compose in my published game, which has received more than 10,000 installs in the first three months of its release!”
Photograph of Madona Wambua smiling and interacting with her students during a Compose Camp session
We also had the opportunity to hear from Madona Wambua, a Google Developer Expert and Senior Android Engineer at Western Governors University, residing in New York. She visited Kenya for an extended vacation, during which she led Compose Camp sessions through the Google Developer Group and Women Techmakers Nairobi chapters. Madona led her students through the beginner track of Compose Camp, and added additional activities to keep students engaged as her fun spin on the program. 
“Compose Camps are engaging and fun! Some of my favorite parts were when the students saw how cool it was to use one language to write the UI, and asked questions about Kotlin. I love teaching; when I see my students solving problems together, sharing ideas, and learning how easy it is to write their UI in Compose, this warms my heart.”

If you’re looking to lead a learning session with your peers, check out the Compose Camp Organizer Guide for everything you need to lead an Android development workshop.


Learning tips from the community

Everyone has different methods for learning something new, so we asked Compose Camp participants to share their favorite tips and tricks for learning Jetpack Compose, and these were some of our favorite answers. We hope they help you on your Android development learning journey:

“Check out the Compose samples and the Now in Android(NiA) app from Android on GitHub. They are great assets for learning Compose best practices! 😍😊” -Odin from Norway

“Use [the] Accompanist animation library to add cool animations in your Compose UI.” -Mansi from GDG Ahmedabad in India

“One magic word for Android developers’ ears, Modifier. Make round edges, draw borders, and set shadows with ease. Learn Modifier, and the flexibility of customization [in] your UI elements is insane.” -Ban from Montenegro

“@PreviewParameter provides sample data for Composables, which allows a preview of the Composable and accelerates development by providing sample data.” -Google Developer Expert Nav Singh from GDG Montreal in Canada

For more tips on learning Compose, check out the Compose Basics series on the Android Developers YouTube channel.
Illustration of three diverse, happy Compose campers looking at a laptop device

Advance your learning and get started with Compose

We recommend using Jetpack Compose if you’re looking to build a new app, and you can use the same development concepts to extend your app to tablets, foldables, and Wear OS. In case you missed Compose Camp or if you’re looking to deepen your learning, you can take the Jetpack Compose for Android Developers or the Android Basics with Compose courses online now. For additional Android learning opportunities in your local area, check out our Google Developer Communities near you.

Happy Composing!

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.