Mobile App
Mobile apps use similar but sometimes different interactions and components depending on the OS it is on. This pattern shows native interactions and components that are expected on each mobile OS and the differences between them. Tablet displays and the desktop site on small displays are out of scope.
Navigation
Main menu
Bottom Navigation bar holds main menu for an App in both iOS and Android. It is the top level of a hierarchy in most cases.
Drill-in
Drill-in is a standard pattern in both iOS and Android with slightly different visual representation. This is used to navigation within the hierarchy. The example below shows moving from All Post menu to a detailed post item.
Android
iOS
Pull to refresh
Pull to refresh is a standard pattern in both iOS and Android. This should be applied to any page that has updatable data.
More Action
When dealing with more action, iOS and Android use different methods.
Android
Uses Menus to reveal more actions.
iOS
Uses Action Sheets to reveal more actions.
In iOS 14 and above, there is now Pull-down menu that is similar to Android's Menu component. If Pull-down menu is used, you will need to make sure we have fallback for lower iOS versions.
List Swipe - Horizontal
Both iOS and Android supports multi-directional swipe.
Android
iOS
Modal
Modals are used when requesting for confirmation, create or update existing resource, or iOS uses Alerts, Sheets, and Views for all modal experiences while Android uses different types of Dialog for all modal experiences.