Parallax scrolling is a technique in which the background content and foreground content scroll at different speeds. You can implement this technique to enhance your app's UI, creating a more dynamic experience as your users scroll.
Version compatibility
This implementation requires that your project minSDK be set to API level 21 or higher.
Dependencies
Create a parallax effect
To achieve the parallax effect, you apply a fraction of the scrolling value from the scrolling composable to the composable that needs the parallax effect. The following snippet takes two nested visual elements—an image and a block of text—and scrolls them in the same direction at different speeds:
Key points about the code
- Creates a custom
layoutmodifier to adjust the rate by which the composable scrolls. - The
Imagescrolls at a slower rate than theText, producing a parallax effect as the two composables translate vertically at different rates.
Results
Parent collections
Display a list or grid
Lists and grids allow your app to display collections in a
visually pleasing form that's easy for users to consume.
Display images
Discover techniques for using bright, engaging visuals to
give your Android app a beautiful look and feel.
Display text
Text is a central piece of any UI. Find out different ways
you can present text in your app to provide a delightful user experience.
Have questions or feedback
Go to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts.