Testing Jetpack Compose Beta

Florian Denu
AccuWeather Android Developer

June 4, 2021

 
 

The AccuWeather developer team for Android has been keenly watching the development of Jetpack Compose for production. I wanted to start testing Compose as soon as possible to see if it is a valuable tool to build UIs for the AccuWeather app. At the time of writing this article, Jetpack Compose is in Beta, and can’t be used yet for most production apps.

 

Instead, I decided to refactor the Debug Menu using Compose. Testing Compose on the Debug Menu UI was a good option, since the UI was basic and needed more work. 

 

After using Compose, I found it to be quite a promising tool to build UIs. I only used a fraction of its capability and would need to test it further. I will talk about the testing I completed and some interesting takeaways from my review.

Conditional Backgrounds

The first application I used Compose for was to build a feature for a tester to quickly change conditional backgrounds in the app on the Today screen using the Debug Menu.

 

The Accuweather app uses multiple backgrounds on the Today screen depending on the weather. The application contains over forty different backgrounds that reflect the current weather conditions. Screen 1 below shows a few of the backgrounds. The backgrounds are Lottie animation views and they can be combined to better reflect the current weather, for example, combining rainy and lightning backgrounds for some really cool effects.

 

Screen 2 below shows the ‘partly cloudy with thunderstorms’ and Screen 3 displays the ‘partly sunny with flurries’ conditional background on the Today screen.

 

With the new feature I built using Compose, the app tester can now quickly switch between conditional backgrounds which saves a lot of time.

Screen 1, 2, and 3

Conditional Backgrounds

Image

Screen 1, 2, and 3

Conditional Backgrounds

Image

Screen 1, 2, and 3

Conditional Backgrounds

Image
 

Normally I would use a RecyclerView to create this and I would need: 


  • 1. Custom items
  • 2. Adapter
  • 3. ViewHolders


With Compose, I just needed to create my custom items and use LazyColumn to create the list of conditional backgrounds.


The code for the RecyclerView and the adapter has been replaced by:

Image

I was stunned when I compiled the code and it actually worked. I didn’t have to use RecyclerView.Adapter boilerplate and now the RecyclerView is one line of code. Amazing!

 

I thought it would be a challenge to reuse the custom view in Compose, but I was wrong. AndroidView to the rescue!

 

With AndroidView, I can reuse a view that was created without Compose. I can then set my constraints with LayoutParams and it will be applied to my view as expected. The following code displays the name of the conditional background on top of the conditional background view.

Image

According to the Jetpack Compose documentation, if you want to use UI elements that are not yet available in Compose, like AdView or MapView, you can include an Android View hierarchy within Compose UI . This is useful when reusing custom views that have been designed. The AndroidView composable is used to include a hierarchy or view element.

 

I was surprised by how easy it is to mix Compose and custom view, and I believe this will be necessary when refactoring the application using Compose. I will need to do it step by step and reuse views that I already have.

Advertisements

Now with the ability to easily change conditional background views for testing, the AccuWeather app has its first feature using Compose.  

 

The next test feature I worked on was to create a Compose view that will take a LiveData variable and recreate (re-compose) when the data changes.

 

In the Debug Menu, advertisements can be hidden or displayed to show how the app will look like to the user with and without ads. The AccuWeather app shows ads in the app and can be removed if the user pays a subscription fee.

 

Depending on the value of LiveData, ads will be shown or hidden. I wanted to be able to observe the value of LiveData. One of the main advantages of using Compose to build UIs is that it is compatible with LiveData. 

 

Screen 4 shows the new element that will be displayed. It shows that Mock Native Ads Is ON.

Screen 4

Rendering of the debug option to hide and show ads

Image

Screen 4

Rendering of the debug option to hide and show ads

Image

And here is the code for the composable function:

Image

The Debug Menu row ‘Mock Native Ads’ in Screen 4 shows if the ads are on or off in the app and a click on the row will request to update the LiveData. Once the state is updated, the row will be re-composed and will show the new state. Even if this example is really simple, it shows an important aspect of building an application using Compose. 

State

Managing state is complicated and it’s a source of bugs. With Compose it’s easier to show consistent state across all screens in the app. I wanted to observe the same reference of the LiveData to all the parts of the application that will react to the content of LiveData. When switching off the ads, all the ads will be hidden, so they should all observe the same live data and this composable function will observe the same LiveData.

 

The Accuweather application is built using the MVVM design pattern and here is the schematic that represents the flow of state:

State of Flow

Unidirectional State

Image

State of Flow

Unidirectional State

Image

When I click to turn ads on or off, the activity will notify the ViewModel, and the ViewModel will notify the repository to update the LiveData. When the LiveData changes, the state will be propagated back to the view. By doing so I am sure the good state is reflected consistently across the application.

 

Let’s imagine that for some reason the repository failed to change the LiveData value. If instead of observing the state of the LiveData, I just update the view, it will show the wrong state and that would be a bug.

 

The good thing is that it’s really easy to enforce good practice with Compose. All I have to do is to pass the LiveData in the composable function and use observeAsState to convert the LiveData to a state that can be observed and re-compose the view when the state changes.

Takeaways

Below are some learnings from testing Compose.

 

  • At the time of writing this article, Compose is in Beta and is not suitable for most production apps.

 

    • Building UIs in Compose is fast and more intuitive than XML and data binding.

 

    • Reusing existing views is easy.

 

  • Enforce good coding practice by forcing view immutability.
  •  
  • I only used a small fraction of Jetpack Compose capability, and the two features are just a subset of the overall Debug Menu. There is a lot more to consider when using it on the AccuWeather app. I will need to look into ‘Theming’ for example. I will also need to understand how to organize code and make sure to follow Google best practices. 

    One thing to look into if you are interested, is the pathway that Google created for Jetpack Compose.

  •  
  • Here is the link:

     

    https://developer.android.com/courses/pathways/compose

     

    Pathways are created by Google to help develop knowledge and skill.

     

    Google Architecture component is a collection of libraries. Google has been improving its content over the past year. We can clearly see that they are trying to provide a standard to build applications by providing architecture components and code samples that will help developers for Android build better applications.

     

    A key factor missing was how to build better UIs and how to connect the UI to the logic. First, Google suggested using synthetic import but that was quickly deprecated. DataBinding promises to make it easier to connect the logic to the view, but does not offer a good solution to build UIs faster. With Compose, we now have a solution that integrates perfectly with the available libraries of architecture components and the fact that UIs can be built in Kotlin will also make it more intuitive to connect the logic to the view. 

     

    I feel that Jetpack Compose will quickly become the standard tool on how UIs are built on Android, and developers should start using it as soon as possible. We are already planning on using Compose in the AccuWeather app for new features later during the year and I'm really excited to start to build awesome UIs with this new tool! 


Florian Denu

Florian Denu

AccuWeather Android Developer

I am passionate about new technologies and particularly enjoy working on mobile applications.

AccuWeather Enterprise Solutions, the world's leading commercial weather source partnering with more than 240 of Fortune 500 companies and thousands of businesses and government agencies worldwide, provides the most accurate, actionable weather data, forecasts, and intelligence that saves lives, protects property, drives revenue, minimizes risk, increases productivity, and more for clients worldwide. AccuWeather Enterprise Solutions has focused on the business impacts of weather for over 50 years, serving clients in all 50 states in the United States and worldwide including all of North America, Europe, Africa, Australia, South America and Asia. Clients across all industries rely on AccuWeather Enterprise Solutions for the most accurate weather information and insights to drive quantifiable business results. Government and emergency management agencies also rely on AccuWeather for the best forecasts of severe weather events - floods, tornadoes, hurricanes, cyclones and others - available from any source. By forecasting and communicating the weather the most accurately and effectively worldwide, focusing on impacts - telling people how, why, and what they need to do in order to save lives and minimize losses - AccuWeather has saved tens of thousands of lives and tens of billions of dollars in property damage.

Related Posts

Press Release

AccuWeather Becomes Sole Provider of Up-to-the-Minute Precipitation Forecasts in Central, South America

En Espanol Em Portuguese Expansion of AccuWeather MinuteCast® and new tools deliver detailed forecasts and radar to Central and South America, Mexico, the Caribbean and additional North American locations, making AccuWeather the only source of short-term forecasts for these areas.  AccuWeather Global Weather Center October 12, 2021 - AccuWeather, the world's most accurate weather source,...

Tue, 12 Oct 2021 16:07:19 GMT

Press Release

AccuWeather NOW Streaming Service Now Available on Plex

AccuWeather Global Weather Center, September 30, 2021 - AccuWeather NOWTM, the new video streaming product from AccuWeather, the proven leader in weather forecast accuracy, today announced it is joining Plex's growing roster of nearly 200 free-to-stream live TV channels, meeting an increasing demand for streaming weather and climate news and content. Plex users can now...

Thu, 30 Sep 2021 14:36:03 GMT

Press Release

XUMO to Add AccuWeather NOW Streaming Service to its Lineup of Live Channels

AccuWeather Global Weather Center, September 8, 2021 - AccuWeather NOWTM, the new video streaming product from AccuWeather, the proven leader in weather forecast accuracy, today announced it is joining XUMO's growing roster of over 200 channels, meeting an increasing demand for streaming weather and climate news and content. XUMO users can now access AccuWeather's forecasts...

Wed, 08 Sep 2021 13:46:28 GMT