Learn about how to create an interaction where the hero image is collapsed with paralax effect while the list is being scrolled
- [Instructor] In this and following videos,…I will show you how to…build some realistic animation effects…that material design encourages.…For example, in this scrollable list, the hero image starts…on the same surface as the rest of the list.…As a user scrolls up, the hero image first…compresses its height along with the list,…and then slowly floats up…until it locks at the top of the screen.…The orange fab on the right also moves with the list…and clings on the edges of the surfaces.…
This communicates the 3D structure…of the interface in an intuitive way.…There's a lot going on here.…Let's look at the high level plan.…We have three major components to consider.…The hero image, the floating action button,…and the list view.…The fab needs to be positioned absolutely…as it overlaps with the list.…As for the hero image,…since it eventually stays on the top of the screen…and does not scroll with the list,…we'll still want it to be absolutely positioned.…
Then the list view just sits…underneath the hero image and fab.…
- Using material design principles
- Working with units and measurements
- Using elevation and drop shadows
- Leveraging grids and keylines
- Setting up React Native for Android
- Building floating action buttons
- Creating an immersive experience
- Adding motion and transitions
- Animating icons
- Using component libraries
Skill Level Intermediate
Android App Development: Data Persistence Librarieswith Annyce Davis4h 52m Intermediate
React Native Ecosystem and Workflowwith Emmanuel Henri1h 3m Intermediate
1. Material Design Overview
2. Tools and Environment Setup
3. Build the Materials with React Native
4. Material Motion with React Native
5. Component Libraries
Library selection strategy3m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.