|
| 1 | +--- |
| 2 | +title: "Edge-to-Edge Display" |
| 3 | +url: /refguide10/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 | +## How Does Mendix Support Edge-to-Edge Display? |
| 13 | + |
| 14 | +From Native template version 14.1.9 and Mendix Studio Pro version 10.24.14, Mendix automatically implements edge-to-edge display following Google's recommendations to ensure your app looks modern and polished on Android devices. This means the Android status bar and navigation bar are transparent, allowing your app's design to shine through. System UI elements blend seamlessly with your app's design, creating a cohesive, polished appearance. |
| 15 | + |
| 16 | +### Status Bar Changes |
| 17 | + |
| 18 | +The status bar has the following changes: |
| 19 | + |
| 20 | +* It takes on the color of your app's background (typically the header area). |
| 21 | +* Your app content extends behind the status bar (which shows items such as the time, battery charge, and notifications). |
| 22 | + |
| 23 | +### Navigation Bar Changes |
| 24 | + |
| 25 | +The navigation bar has the following changes making your app's bottom navigation appears unified with the Android system UI, creating the polished, edge-to-edge experience that Google recommends: |
| 26 | + |
| 27 | +* It is made transparent, allowing it to blend seamlessly with your app's design. In practice, 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. |
| 28 | +* Your app content extends behind the navigation bar which contains the back, home, and recent apps buttons. |
| 29 | +* The height is automatically adjusted. When the Android navigation bar is present, your app automatically detects its height and adds 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. |
| 30 | + |
| 31 | +## What This Means for You |
| 32 | + |
| 33 | +Mendix Native template 14.1.0 automatically provides you with an edge-to-edge display experience with the following features. |
| 34 | + |
| 35 | +* **No Manual Calculations**: You don't need to worry about calculating insets or adjusting for different device configurations |
| 36 | +* **Automatic Adaptation**: The bottom bar automatically adjusts its height based on whether the navigation bar is visible |
| 37 | +* **Consistent Appearance**: Your app maintains a modern, cohesive look across all Android devices |
| 38 | + |
| 39 | +{{% alert color="info" %}} |
| 40 | +You may need to set a height for your bottom bar if you have customized it. See [Adjusting the Bottom Bar Layout](#adjust-bottom) for more information. |
| 41 | +{{% /alert %}} |
| 42 | + |
| 43 | +## Important Warnings and Responsibilities |
| 44 | + |
| 45 | +### Common Issues to Avoid |
| 46 | + |
| 47 | +{{% alert color="warning" %}} |
| 48 | + |
| 49 | +#### Do Not Place Buttons Near the Android Navigation Bar |
| 50 | + |
| 51 | +``` |
| 52 | +┌─────────────────────────┐ |
| 53 | +│ Your App Content │ |
| 54 | +│ │ |
| 55 | +│ │ |
| 56 | +│ [Submit Button] │ ← TOO CLOSE! |
| 57 | +└─────────────────────────┘ |
| 58 | + [◀ ⚫ ▢] Navigation Bar |
| 59 | +``` |
| 60 | + |
| 61 | +**Problem**: Users may accidentally tap navigation buttons instead of your app buttons, or your buttons may be partially hidden. |
| 62 | + |
| 63 | +**Solution**: Add sufficient padding/margin at the bottom of your layouts to account for the navigation bar height. |
| 64 | + |
| 65 | +{{% /alert %}} |
| 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. The configuration JavaScript is usually located in `<your-native-template>/src/custom-variables.js` |
| 70 | + |
| 71 | +## Adjusting the Bottom Bar Layout {#adjust-bottom} |
| 72 | + |
| 73 | +### When Might You Need This? |
| 74 | + |
| 75 | +If you have 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. |
| 76 | + |
| 77 | +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. |
| 78 | + |
| 79 | +### Solution: Custom Navigation Styles |
| 80 | + |
| 81 | +Add or modify the configuration in your `main.js` file to fine-tune the bottom bar appearance by doing the following: |
| 82 | + |
| 83 | +1. Copy the following configuration into your `main.js` file: |
| 84 | + |
| 85 | + ```javascript |
| 86 | + export const navigationStyle = { |
| 87 | + bottomBar: { |
| 88 | + container: { |
| 89 | + height: 60, |
| 90 | + }, |
| 91 | + label: { |
| 92 | + fontSize: 18, |
| 93 | + }, |
| 94 | + selectedLabel: { |
| 95 | + fontSize: 18, |
| 96 | + }, |
| 97 | + icon: { |
| 98 | + size: 25 |
| 99 | + }, |
| 100 | + selectedIcon: { |
| 101 | + size: 25 |
| 102 | + } |
| 103 | + }, |
| 104 | + }; |
| 105 | + ``` |
| 106 | + |
| 107 | +2. Adjust the following values to match your needs: |
| 108 | + |
| 109 | + * `height`: Increase if your bottom bar content is too close to the Android navigation bar or decrease if it's far away. |
| 110 | + * `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) |
| 111 | + * `icon`: Adjust icon size for cases where the Android navigation bar is close to your bottom bar (if height doesn't solve the problem) |
| 112 | +
|
| 113 | +3. Test your modified configuration on various Android devices to ensure the layout works well across different screen sizes. |
0 commit comments