232 lines
6.0 KiB
Markdown
232 lines
6.0 KiB
Markdown
# Adaptive Screens Guidelines
|
|
|
|
Requirements for large screens, tablets, foldables, and multi-window support.
|
|
|
|
## Adaptive Quality Tiers
|
|
|
|
Google defines three progressive quality tiers for adaptive apps:
|
|
|
|
### Tier 3: Adaptive Ready (Basic)
|
|
|
|
Minimum requirements for all apps:
|
|
|
|
| Requirement | Description |
|
|
|-------------|-------------|
|
|
| Full screen | App fills display, no letterboxing |
|
|
| Configuration changes | Handles rotation, folding, resizing |
|
|
| Multi-window | Supports split-screen mode |
|
|
| Basic input | Keyboard, mouse, trackpad support |
|
|
|
|
### Tier 2: Adaptive Optimized (Better)
|
|
|
|
Enhanced experience:
|
|
|
|
| Requirement | Description |
|
|
|-------------|-------------|
|
|
| Layout optimization | Responsive layouts for all sizes |
|
|
| Enhanced input | Full keyboard shortcuts, mouse hover states |
|
|
| Continuity | Seamless state preservation |
|
|
|
|
### Tier 1: Adaptive Differentiated (Best)
|
|
|
|
Device-specific excellence:
|
|
|
|
| Requirement | Description |
|
|
|-------------|-------------|
|
|
| Multitasking | Drag and drop, activity embedding |
|
|
| Foldable postures | Table-top mode, book mode support |
|
|
| Stylus | Full stylus input support |
|
|
| Desktop | Windowed mode optimization |
|
|
|
|
## Screen Size Classes
|
|
|
|
### Width-Based Classes
|
|
|
|
| Class | Width | Typical Devices |
|
|
|-------|-------|-----------------|
|
|
| Compact | < 600dp | Phone portrait |
|
|
| Medium | 600-840dp | Tablet portrait, phone landscape |
|
|
| Expanded | > 840dp | Tablet landscape, desktop |
|
|
|
|
### Layout Strategies
|
|
|
|
| Screen Class | Navigation | Content Layout |
|
|
|--------------|------------|----------------|
|
|
| Compact | Bottom nav | Single pane |
|
|
| Medium | Nav rail | List-detail (optional) |
|
|
| Expanded | Nav drawer/rail | List-detail, multi-pane |
|
|
|
|
## Configuration Changes
|
|
|
|
### Must Handle
|
|
|
|
| Change | Trigger |
|
|
|--------|---------|
|
|
| Rotation | Device rotated |
|
|
| Fold/Unfold | Foldable state change |
|
|
| Window resize | Multi-window adjustment |
|
|
| Split screen | Enter/exit split mode |
|
|
| Keyboard | External keyboard attach/detach |
|
|
|
|
### Configuration Handling
|
|
|
|
| Approach | Description |
|
|
|----------|-------------|
|
|
| Let system handle | Default, activity recreated |
|
|
| Handle manually | Declare configChanges, implement onConfigurationChanged |
|
|
|
|
### State Preservation
|
|
|
|
- Use ViewModel for UI state
|
|
- Use SavedStateHandle for process death
|
|
- Test with "Don't keep activities" enabled
|
|
|
|
## Multi-Window Support
|
|
|
|
### Requirements
|
|
|
|
| Feature | Status |
|
|
|---------|--------|
|
|
| resizeableActivity | true (default API 24+) |
|
|
| Minimum size | Support 220dp width |
|
|
| State handling | Preserve across resize |
|
|
|
|
### Best Practices
|
|
|
|
- Don't assume full-screen ownership
|
|
- Handle onConfigurationChanged gracefully
|
|
- Test at minimum supported size
|
|
- Support free-form windows (desktop mode)
|
|
|
|
## Foldable Devices
|
|
|
|
### Postures
|
|
|
|
| Posture | Description | Use Case |
|
|
|---------|-------------|----------|
|
|
| Flat | Fully open | Normal tablet use |
|
|
| Half-opened (tabletop) | Hinged at ~90° horizontal | Video calls, media |
|
|
| Half-opened (book) | Hinged at ~90° vertical | Reading, productivity |
|
|
| Folded | Closed | Compact phone mode |
|
|
|
|
### Design Considerations
|
|
|
|
- Avoid placing interactive elements on the fold
|
|
- Consider separate content for each screen segment
|
|
- Support continuity when fold state changes
|
|
- Use WindowInfoTracker to detect fold state
|
|
|
|
## External Input Devices
|
|
|
|
### Keyboard Support
|
|
|
|
| Requirement | Implementation |
|
|
|-------------|----------------|
|
|
| Tab navigation | Focusable elements in order |
|
|
| Enter/Space | Activates focused element |
|
|
| Arrow keys | Navigate lists, grids |
|
|
| Shortcuts | Common actions (Ctrl+S, etc.) |
|
|
| Focus indicators | Visible focus states |
|
|
|
|
### Mouse/Trackpad Support
|
|
|
|
| Requirement | Implementation |
|
|
|-------------|----------------|
|
|
| Hover states | Visual feedback on hover |
|
|
| Right-click | Context menu support |
|
|
| Scroll | Smooth scrolling |
|
|
| Pointer cursor | Appropriate cursor types |
|
|
|
|
### Stylus Support
|
|
|
|
| Feature | Implementation |
|
|
|---------|----------------|
|
|
| Pressure sensitivity | Variable stroke width |
|
|
| Palm rejection | Ignore palm touches |
|
|
| Tilt detection | Shading effects |
|
|
| Hover preview | Show cursor before touch |
|
|
|
|
## Navigation Patterns
|
|
|
|
### By Screen Width
|
|
|
|
| Width | Primary Nav | Secondary Nav |
|
|
|-------|-------------|---------------|
|
|
| < 600dp | Bottom nav (3-5 items) | Hamburger menu |
|
|
| 600-840dp | Navigation rail | Drawer on demand |
|
|
| > 840dp | Permanent drawer or rail | Drawer or none |
|
|
|
|
### Navigation Rail Specs
|
|
|
|
| Property | Value |
|
|
|----------|-------|
|
|
| Width | 80dp |
|
|
| Icon size | 24dp |
|
|
| Touch target | 56dp |
|
|
| Items | 3-7 destinations |
|
|
| FAB | Optional, at top |
|
|
|
|
### Permanent Navigation Drawer
|
|
|
|
| Property | Value |
|
|
|----------|-------|
|
|
| Width | 256-360dp |
|
|
| Position | Left edge (LTR) |
|
|
| Behavior | Always visible |
|
|
| Content | Full labels, icons |
|
|
|
|
## Responsive Layouts
|
|
|
|
### Breakpoints
|
|
|
|
| Class | Width Range |
|
|
|-------|-------------|
|
|
| COMPACT | < 600dp |
|
|
| MEDIUM | 600-840dp |
|
|
| EXPANDED | > 840dp |
|
|
|
|
Use WindowSizeClass to determine current breakpoint and adapt layout accordingly.
|
|
|
|
## Content Considerations
|
|
|
|
### Text Readability
|
|
|
|
- Line length: 45-75 characters max
|
|
- Use multiple columns on wide screens
|
|
- Maintain hierarchy with consistent spacing
|
|
|
|
### Media
|
|
|
|
- Support multiple aspect ratios
|
|
- Provide high-resolution assets
|
|
- Consider picture-in-picture for video
|
|
|
|
### Touch vs. Precise Input
|
|
|
|
- Large screens often use mouse/keyboard
|
|
- Don't assume touch-only interaction
|
|
- Provide hover states and tooltips
|
|
|
|
## Testing
|
|
|
|
### Device Matrix
|
|
|
|
| Device Type | Test Priority |
|
|
|-------------|---------------|
|
|
| Phone (portrait) | Required |
|
|
| Phone (landscape) | Required |
|
|
| Tablet (both orientations) | Required |
|
|
| Foldable (all postures) | High |
|
|
| Desktop/Chromebook | Medium |
|
|
|
|
### Test Cases
|
|
|
|
- [ ] App fills screen in all configurations
|
|
- [ ] No letterboxing or black bars
|
|
- [ ] State preserved across configuration changes
|
|
- [ ] Multi-window works at minimum size
|
|
- [ ] Keyboard navigation functional
|
|
- [ ] Mouse hover states present
|
|
- [ ] Foldable postures handled (if applicable)
|
|
- [ ] Navigation adapts to screen width
|