Jetpack Compose Hacks:Top 3 Secret Jetpack Compose Modifiers
What are Modifiers?
Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things:
Change the composable’s size, layout, behavior, and appearance
Add information, like accessibility labels
Process user input
Add high-level interactions, like making an element clickable, scrollable, draggable, or zoomable
Modifiers are standard Kotlin objects. Create a modifier by calling one of the Modifier class functions.
Top 3 Secret Jetpack Compose Modifiers I Bet You Didn’t Know
- basicMarquee
- magnifier
- drawWithContent
1.basicMarquee() Modifier
Applying the Marquee effect to a text is extremely straightforward.
- Add this line to your composable: modifier = Modifier.basicMarquee()
- Tell Compose you’re okay with using an experimental feature:
Put @OptIn(ExperimentalFoundationApi::class) above your composable function. - Keep in mind:This feature is still experimental, so it might change in the future.
That’s it! Now your text will scroll automatically if it’s too long to fit in its space.
Applying the Marquee effect to a text with animation:
- Replace basicMarquee() with basicMarquee(animationMode = MarqueeAnimationMode.WhileFocused) in your modifier.
- Make your composable focusable:
- Add modifier = Modifier.focusRequester(focusRequester) with a remembered FocusRequester().
- Add focusable() to your modifier.
Now, the scrolling animation will only run when your composable is focused (e.g., when tapped). This saves resources and improves the user experience.
2.magnifier() Modifier
This modifier zooms in on specific areas: When users interact with a composable (like dragging a selection handle), the magnifier displays a zoomed-in copy of the content under their finger.
How to Use the Magnifier Modifier:
- Add modifier = Modifier.magnifier to your composable.
- Configure options (optional): You can customize properties like sourceCenter, magnifierCenter, zoom, and style based on your needs.
- Keep in mind:This feature is still experimental, so it might change in the future.
3. drawWithContent Modifier
In addition to the Canvas composable, Compose has several useful graphics Modifiers which aid in drawing custom content. These modifiers are useful because they can be applied to any composable.
There are three main drawing modifiers in Compose:
1.drawWithContent 2.drawBehind 3.drawWithCache
Common use cases of drawWithContent:
- Allows drawing directly on top of existing composable content.
- Provides a DrawScope to access drawing functions and canvas properties.
- Custom underlines, strikethroughs, and text decorations
- Overlaid highlights or gradients
- Interactive elements with custom painting
- Background patterns or textures
Step-by-Step Guide:
- Apply the drawWithContent modifier to the target composable.
- Implement a lambda function that receives a DrawScope.
- Use the DrawScope’s methods (e.g., drawLine, drawRoundRect, drawArc,drawCircle) to create custom drawings.
Conclusion
Compose your creativity with these hidden gems! ‘basicMarquee’ dances text across screens, ‘magnifier’ zooms for precise interactions, and ‘drawWithContent’ paints your vision directly on the canvas. Dive deep, experiment, and unlock the boundless potential of Compose Modifiers!
So, what are you waiting for? Get out there and unleash the power of hidden Compose modifiers!