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
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 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
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.
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
'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
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
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!