Learn about how to arrange layouts so that UI elements align to the Material grid
- [Instructor] Have you ever had trouble making sure…that all your interfaces have a uniform feel?…Fortunately, mature design provides standardized grids…that make it easy to create nice and consistent interfaces.…Let's see how we can align UI elements to the grid…with React native.…We're going to make this interface look nice by adding…white spaces and adjust fonts,…and learn the best practices along the way.…Let's start with this price tag at the bottom…of the image.…
Let me switch to the editor.…I'll use a beginning project of 0303,…that comes with the course.…I'll next navigate to Product Detail page,…CTRL + P and ProductDetail page is right here.…And here on line 59, we can find the component…for the price.…The text component here uses externalized styles.priceText.…
It's a good practice to extract all styles into a style…sheet and put them in one place,…that way you can update the style of the UI…without affecting other parts of the code.…So let's find this priceText style.…CTRL + F.…PriceText, that's a style that we declare…
- 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.