Published March 25, 2020
This post aims at fixing an impending issue with my current Tweet view implementation. In the
dev08 release of Compose the
Container component is going to be removed. I have several usages of this component which I want to remove before updating my version.
The current usages of
Container facilitate drawing vector assets for the action row items. While I could replace these instances with a
Box component (the simple replacement for
Container), there is a more suitable component available.
I can instead use the
Icon component. This component has three parameters. The first is a
VectorAsset which can be provided by the
vectorResource() function. The other two parameters are optional. A
tint can be provided to configure how the icon is drawn to the screen.
Icon can be used for the
All of the parameters needed by the
Container can be directly passed to the
LayoutSize modifier allows me to specify how large the icons need to be. The
tint parameter allows me to handle coloring the icon without using the
This implementation is only used for the
Retweet items because they still need to be wrapped in the
Clickable function. This is because both the
Text should react to the click event.
Share function can use a different component. It still needs the
Icon to draw the share vector to the screen, but it can be wrapped in an
IconButton to handle the click event instead.
IconButton wraps the
Icon and has a parameter that accepts the
onClick listener. Running the app now reveals an issue.
The share icon is now taking up more space than the other icons, even though I specified the size of the
Icon to be
24.dp. The reason for this is found inspecting the source for
IconButton is implemented using a
Box. It has a default modifier applied called
IconButtonSizeModifier which is defined as:
Since I do not set the size of my
IconButton it defaults to
48.dp. To fix this I need to explicitly specify the size of the button.
This forces the share icon to be the correct size.
One other change becomes apparent when interacting with the
Share button. The
IconButton provides a ripple animation out of the box.
It would be nice for the other action row items to have a ripple as well. Adding this animation involves wrapping the
Clickable function with a
Ripple. This function provides a ripple animation when tapped. The
bound parameter indicates if the animation should be constrained to the bounds of the view or if it should be allowed to extend beyond.
false for the bound property causes the animation to go outside the size of the button.
By default, the ripple size is based on the size of the
Ripple contents. The
radius property can be provided to force a certain size but this runs the risk of the ripple being smaller than the content, which would look odd.
true for the bound property forces the ripple to stay within the view bounds.
This may work better for buttons since the animation will not bleed over into the other content. However, in this case I will leave the ripples unbounded so they match the share ripple. The current
IconButton implementation does not allow modifications to the
Ripple animation. I would rather have the animations be consistent in shape, even if their sizes are different.
With that, all of the deprecated
Containers have been removed from my project and drawing the icons has been improved. As a bonus, the action row items now have a nice ripple animation to give the user some visual feedback.
Thanks for reading and stay tuned for more!