Published April 07, 2020
With previous releases of Jetpack Compose, I have edited my existing blogs since the APIs were fairly similar. The dev08 release proved to be more involved which warrants its own post. This post takes a look at the changes in the new release and updates the Tweetish app to work with the new API.
The first step is to update the versions to dev08. The kotlinCompilerExtensionVersion in the composeOptions block is updated first.
Then the library versions are updated as well.
After syncing the Gradle changes and opening the MainActivity file, plenty of errors show up.
The first is in the class imports. The Text component is no longer recognized because its package changed in the update. Fixing this just requires deleting the old import and adding the correct one.
The next error in the imports is for the Ripple component. Looking in the Compose UI Release Notes provides more information. The Ripple component is now a Modifier instead.
Since the component is no longer needed, the import can be removed. After that all of the usages need to be changed to use the modifier form. The first instance is in the Comment composable function. The Ripple is the top-level component that wraps the Clickable component. Clickable now has a modifier parameter in dev08 so the ripple modifier can be applied.
The two other usages of the Ripple component are in the Retweet and Like functions. These wrap the ToggleImage component. Since the Ripple is now a modifier it can be pushed into the ToggleImage which simplifies the action items.
Just like Clickable, the Toggleable component used in ToggleImage now has a modifier parameter where the ripple can be applied.
The last error to resolve involves the Icon component. The icon parameter was renamed to asset in dev08 so the three usages need to be changed.
Once all of the errors are fixed the app builds and runs, but plenty of warnings are generated by the linter. All of them are about deprecated Modifier usage.
'LayoutPadding(Dp): LayoutPadding' is deprecated. Use Modifier.padding
'LayoutPadding(Dp): LayoutPadding' is deprecated. Use Modifier.padding
'constructor LayoutPadding(Dp = ..., Dp = ..., Dp = ..., Dp = ...)' is deprecated. Use Modifier.padding
'constructor LayoutPadding(Dp = ..., Dp = ..., Dp = ..., Dp = ...)' is deprecated. Use Modifier.padding
'Fill' is deprecated. Use Modifier.fillMaxWidth
'LayoutPadding(Dp): LayoutPadding' is deprecated. Use Modifier.padding
'constructor LayoutSize(Dp, Dp)' is deprecated. Use Modifier.preferredSize
'constructor LayoutPadding(Dp = ..., Dp = ..., Dp = ..., Dp = ...)' is deprecated. Use Modifier.padding
'constructor LayoutSize(Dp, Dp)' is deprecated. Use Modifier.preferredSize
'constructor LayoutPadding(Dp = ..., Dp = ..., Dp = ..., Dp = ...)' is deprecated. Use Modifier.padding
'constructor LayoutSize(Dp, Dp)' is deprecated. Use Modifier.preferredSize
'constructor LayoutSize(Dp, Dp)' is deprecated. Use Modifier.preferredSize
Not only is Ripple now a modifier, but all of the other modifiers are function calls on the Modifier class.
The most common error in this project is about the use of LayoutPadding. This should be updated to use Modifier.padding() instead. Since there are so many instances I will just show a couple updates. The new version has the same parameters as the original LayoutPadding. One argument can be provided to apply equal padding to the four sides of the view.
If the padding is different then four arguments can be provided to specify the padding separately around the view.
Once the padding warnings are fixed, the size warnings are next. Instead of using LayoutSize the new Modifier.preferredSize can be used instead. One argument is provided if the width and height are the same. Two arguments can be provided if the width and height need to be different.
Once the other size modifiers are fixed that leaves two more warnings. There is one padding warning and one about the use of LayoutWidth.Fill. The reason these are saved for last is because they are added together in the ActionRow component.
The padding can be updated to use Modifier.padding() and the LayoutWidth.Fill can be updated to use Modifier.fillMaxWidth(). These can still be added together and it will work.
However, this does look pretty gross and fortunately there is a better way. All of the functions called on the Modifier class return the Modifier so they can be chained together like a builder pattern. This allows the previous code snippet to be simplified a bit.
With all of the modifiers updated there are no more warnings when building the project. It can successfully build and run with the same behavior as the dev07 version.
I hope you enjoyed this dive into the dev08 release of Jetpack Compose! Be on the lookout for my next post coming out on Friday that will add a profile image to the tweet view. It will show how to add a background color to an image and clip it in a circle.
Thanks again for reading and stay tuned for more!