Compose Look And Feel
Roadmap
What is done (fully or partly):
- βοΈ Cupertino and Material3 look and feels.
- βοΈ Adaptive widgets: navbar, toolbar, icon button, ...
- βοΈ Material Icons / SF symbols usage based on current look and feel.
- βοΈ Cupertino scroll overflow (currently for drag only) for lazy lists and scrollable composables
- βοΈ Insets for iOS.
- βοΈ Cupertino context menu.
- βοΈ Adaptive backdrop scaffold like a Modal ViewController (pure Compose) with Cupertino look and feel
- βοΈ Swipe back navigation (based on Precompose now)
- βοΈ Alert dialogs, action sheet, date/time picker (native)
Plans:
- More adaptive widgets (TextField, ProgresIndicator with pull refresh and more);
- More adaptive icons
Theme
There are 2 themes:
- Cupertino
CupertinoApplication - Material3
MaterialApplication.
All themes are available on all platforms. No platform widgets used. Theme can be picked automatically using AdaptiveApplication
Material3 composables have CupertinoXXX analogs. They can be used directly from any place. To pick widget automatically use AdaptiveXXX composables.
Icons
SF Symbols analogs were added for some material icons. They were imported as ImageVectors and can be accessed with SFSymbols object.
To pick icon according to current theme use Icons.Default.AdaptiveXXX.
Names of the SFSymbols icons match the original symbols names. Adaptive icons are named in material style (SFSymbols.Gear = Icons.Default.AdaptiveSettings inside cupertino app)
Note
All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols β or glyphs that are substantially or confusingly similar β in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.
Scroll
Adaptive scroll behavior can be added using adaptiveVerticalScroll and adaptiveHorizontalScroll modifiers.
For lazy layouts this scroll behavior can be added using adaptiveScrollOverflow modifier.
For Cupertino look and feel these modifiers add native-looking scroll overflow (currently only for drag, not fling).
Insets
Some of WindowInsets such as navigationBars, statusBars, ime, ... are implemented in common code. Paddings can be easily added with corresponding modifiers: navigationBarsPadding, ...
Keyboard (ime) padding for iOS is implemented with animation and precicely syncronized with software keyboard.
Adaptive components such as scaffolds, navigation and top bars are already respect both iOS and Android insets.
Context menu
AdaptiveContextMenu can be used to create platform popup menu:
For Cupertino look and feel it is always CupertinoContextMenu that is implemented in Compose.
For Material look and feel it is DropdownMenu on Android and still CupertinoContextMenu on iOS, because DropdownMenu is not implemented for iOS target.
Backdrop Scaffold
CupertinoBackdropScaffold can be used to display front layer content as iOS Modal ViewController (implemented in pure Compose).
AdaptiveBackdropScaffold uses material BackdropScaffold with Material look and feel and CupertinoBackdropScaffold with Cupertino look and feel.
To change status bar appearance to light on iOS when modal controller appears (like a native bahavior) add this to Info.plist:
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
Appearance will be restored when modal controller is dismissed.