|
| 1 | +--- |
| 2 | +title: "Edge-to-Edge Display" |
| 3 | +url: /refguide/mobile/designing-mobile-user-interfaces/edge-to-edge/ |
| 4 | +weight: 25 |
| 5 | +description: "This guide explains how to implement edge-to-edge display in Mendix native mobile apps and configure bottom bar layouts." |
| 6 | +--- |
| 7 | + |
| 8 | +## Introduction |
| 9 | + |
| 10 | +Edge-to-edge display is a modern Android design approach where your app's content extends to the full screen, drawing behind the system bars (status bar at the top and navigation bar at the bottom). This creates a more immersive, modern look by utilizing the entire display area. |
| 11 | + |
| 12 | +## What is Edge-to-Edge Display? |
| 13 | + |
| 14 | +Edge-to-edge display is a modern Android design approach where your app's content extends to the full screen, drawing behind the system bars (status bar at the top and navigation bar at the bottom). This creates a more immersive, modern look by utilizing the entire display area. |
| 15 | + |
| 16 | +**With our latest update, we've made the Android status bar and navigation bar transparent**, allowing your app's design to shine through. This means: |
| 17 | + |
| 18 | +- The **status bar** takes on the color of your app's background (typically the header area) |
| 19 | +- The **navigation bar** takes on the color of your app's bottom bar or main background |
| 20 | +- System UI elements blend seamlessly with your app's design, creating a cohesive, polished appearance |
| 21 | + |
| 22 | +### Visual Impact |
| 23 | + |
| 24 | +- **Status Bar**: Your app content extends behind the status bar (showing time, battery, notifications) |
| 25 | +- **Navigation Bar**: Your app content extends behind the navigation bar (back, home, recent apps buttons) |
| 26 | +- **Modern Appearance**: Creates a seamless, full-screen experience where system bars feel like part of your app's design |
| 27 | + |
| 28 | +## How Mendix Handles Edge-to-Edge Display |
| 29 | + |
| 30 | +Mendix automatically implements edge-to-edge display following Google's recommendations to ensure your app looks modern and polished on Android devices: |
| 31 | + |
| 32 | +### Our Solution |
| 33 | + |
| 34 | +1. **Transparent Navigation Bar**: We make the Android navigation bar transparent, allowing it to blend seamlessly with your app's design. This means the navigation bar takes on the background color of your bottom bar, making it appear as an integrated part of your app rather than a separate system element. |
| 35 | + |
| 36 | +2. **Automatic Height Adjustment**: When the Android navigation bar is present, we automatically detect its height and add it to your bottom bar height. This dynamic adjustment ensures that your bottom bar content remains fully visible and accessible, preventing any overlap with the system navigation buttons. |
| 37 | + |
| 38 | +3. **Seamless Integration**: By combining transparency with height calculation, your app's bottom navigation appears unified with the Android system UI, creating the polished, edge-to-edge experience that Google recommends. |
| 39 | + |
| 40 | +### What This Means for You |
| 41 | + |
| 42 | +- **No Manual Calculations**: You don't need to worry about calculating insets or adjusting for different device configurations |
| 43 | +- **Automatic Adaptation**: The bottom bar automatically adjusts its height based on whether the navigation bar is visible |
| 44 | +- **Consistent Appearance**: Your app maintains a modern, cohesive look across all Android devices |
| 45 | +- **Suggested** You may need to set certain height to your bottom bar if you've customized it. |
| 46 | + |
| 47 | +## ⚠️ Important Warnings and Responsibilities |
| 48 | + |
| 49 | +### Common Issues to Avoid |
| 50 | + |
| 51 | +#### ❌ DO NOT: Place Buttons Near Android Navigation Bar |
| 52 | + |
| 53 | +``` |
| 54 | +┌─────────────────────────┐ |
| 55 | +│ Your App Content │ |
| 56 | +│ │ |
| 57 | +│ │ |
| 58 | +│ [Submit Button] │ ← TOO CLOSE! |
| 59 | +└─────────────────────────┘ |
| 60 | + [◀ ⚫ ▢] Navigation Bar |
| 61 | +``` |
| 62 | + |
| 63 | +**Problem**: Users may accidentally tap navigation buttons instead of your app buttons, or your buttons may be partially hidden. |
| 64 | + |
| 65 | +**Solution**: Add sufficient padding/margin at the bottom of your layouts to account for the navigation bar height. |
| 66 | + |
| 67 | +## Configuration via custom-variables.js |
| 68 | + |
| 69 | +Find `// Navigation Styles` within custom-variables.js, where you can adjust the proper design according to your needs. You can find the navigation section here. |
| 70 | + |
| 71 | +### Location |
| 72 | +``` |
| 73 | +<your-native-template>/src/custom-variables.js |
| 74 | +``` |
| 75 | + |
| 76 | +## Adjusting Bottom Bar Layout (If Needed) |
| 77 | + |
| 78 | +### When You Might Need This |
| 79 | + |
| 80 | +If you've customized your bottom navigation bar and notice layout issues after enabling edge-to-edge display (such as icons or labels appearing cut off or misaligned), you may need to adjust the bottom bar styling. |
| 81 | + |
| 82 | +### Solution: Custom Navigation Styles |
| 83 | + |
| 84 | +Add or modify the following configuration in your `main.js` file to fine-tune the bottom bar appearance: |
| 85 | + |
| 86 | +```javascript |
| 87 | +export const navigationStyle = { |
| 88 | + bottomBar: { |
| 89 | + container: { |
| 90 | + height: 60, |
| 91 | + }, |
| 92 | + label: { |
| 93 | + fontSize: 18, |
| 94 | + }, |
| 95 | + selectedLabel: { |
| 96 | + fontSize: 18, |
| 97 | + }, |
| 98 | + icon: { |
| 99 | + size: 25 |
| 100 | + }, |
| 101 | + selectedIcon: { |
| 102 | + size: 25 |
| 103 | + } |
| 104 | + }, |
| 105 | +}; |
| 106 | +``` |
| 107 | + |
| 108 | +### How to Use |
| 109 | + |
| 110 | +1. **Copy** the configuration above into your `main.js` file |
| 111 | +2. **Adjust** the values to match your needs: |
| 112 | + - `height`: Increase if your bottom bar content is too close to the Android navigation bar or decrease if it's far away. |
| 113 | + - `label`: Adjust label text size for cases where the Android navigation bar is close to your bottom bar (if height doesn't solve the problem) |
| 114 | + - `icon`: Adjust icon size for cases where the Android navigation bar is close to your bottom bar (if height doesn't solve the problem) |
| 115 | + |
| 116 | +3. **Test** on various Android devices to ensure the layout works well across different screen sizes |
| 117 | + |
| 118 | +### Why This Might Be Necessary |
| 119 | + |
| 120 | +Because the navigation bar is now transparent and your app content extends behind it, any custom bottom bar configurations you previously had may need slight adjustments to account for the new layout. The transparent navigation bar means your bottom bar needs to ensure adequate spacing and sizing for all its elements to remain visible and accessible. |
0 commit comments