Seven Mistakes To Avoid When Developing For The Galaxy Fold
Md. Iqbal Hossain
Engineer, Samsung Developer Program
Samsung’s first foldable device, the Samsung Galaxy Fold, is coming soon. It's a double-display device with a Main Display size of 1526x2152px and a Cover Display that is 840x1960px. This new form factor requires developers to adapt their apps for two physically-different displays on the same device. Additionally, developers need to provide a seamless transition for app continuity and application behavior with multi-window mode.
In this blog, I’ll address some of the common mistakes developers may make when developing apps for foldable devices.
Mistakes To Avoid
1. Display Cutout
The Main Display is covered by an area on the top-right side called the “L-cut.” If no action is taken, it’s possible that some UI portion of your app could be covered by the L-cut.
Content is covered in L-cut
To avoid UI content overlapping, a good starting point is the official Android guide about supporting display cutouts. Cutout mode is set by creating a style in your activity. To do this, apply the layoutInDisplayCutoutMode attribute to the activity.
<style name="ActivityTheme"> <item name="android:windowLayoutInDisplayCutoutMode"> never <!-- default, shortEdges, never --> </item> </style>
You can set one of the following values:
Default: In portrait mode, content is rendered in cutout area but in landscape mode content is letterboxed.ShortEdge: Content is rendered in the cutout area in both portrait and landscape mode.Never: No content is rendered in the cutout area.
2. Max Aspect Ratio
The Cover Display of the Galaxy Fold has a long (21:9) aspect ratio. Some apps cannot fill the Cover Display and its 21:9 aspect ratio screen. If your app is announced as android.max_aspect="2.1", it will support up to 18.5:9.
Developers have to produce a maximum aspect ratio to fill the entire screen. According to the Samsung official guide, there are three options:
- Declare Android 8.0 (API level 26) or higher and the app will fill the entire screen
- Declare the activity as
resizeableActivity android:resizeableActivity=["true" | "false"]
- Declare a max aspect ratio
<!-- Render on full screen up to screen aspect ratio of 2.4 --> <!-- Use a letterbox on screens larger than 2.4 -->
3. Layout Issues During Display Transition
Developers have to consider two different displays when developing an app targeted for foldable phones. Your app layout should respond to different screen sizes.
Layout fitting issue during switching display
According to Android documentation, developers should follow the techniques detailed below to avoid layout issues during switching between Main or Cover Displays:
- Create a flexible layout. UI layouts should be always responsive even if the target device variation is small. In the case of foldable devices, the difference in the displays is significant. According to Android documentation, one of the best ways to create a responsive layout for different screen sizes is to create a
ConstraintLayout. Using the values"wrap_content"and"match_parent"instead of a fixed layout size creates a flexible layout that adapts to different screen sizes. - Use alternative UI layouts based on different screen configuration. Stretching does not always provide the best experience. Sometimes, alternative UI design is needed for different screen sizes. An alternative UI design may need alternative layout resources.
- Use bitmaps that can stretch to adapt to the screen. When a bitmap is used as a background in a view that changes its size, Android will scale the bitmap images based on the size of the screen or content in view. This leads to visible blurring or other scaling artifacts. This problem can be overcome by using nine-patch bitmaps. A nine-patch bitmap is similar to a standard PNG file but has an extra 1px border to indicate which pixels should be stretched. The extension of nine-patch bitmap is with a .9.png instead of .png.
4. Loss Of Data During Display Transition
The activity is destroyed and recreated when switching from Main Display to Cover Display or vice-versa. To provide a seamless experience to users, developers have to restore the view layout when switching displays.
Loss of data when switching displays
Developers can use onSaveInstanceState() to save data at the time of destroying the activity, and restore during re-launch of the activity. Developers can also use ViewModel to restore the view layout.
5. Loss Of Data During Switching Multi-Window Or Resize Window
Data can be lost when switching to multi-window mode or resizing the window on multi-window mode, as the activity will be re-launched like when switching displays. The solution to this issue is to use onSaveInstanceState() or ViewModel.
Loss of data during switching in multi-window mode
6. Multi-Window Layout Issues
Layout issues can occur at the time of multi-window launching/ switching /resizing. They occur when the provided resource does not fit the current window size. If you set larger minWidth, minHeight than the possible window size, the result may be layout fitting issues. So, provide resources and set minWidth, minHeight, keeping in mind the possible window sizes in multi-window mode.
Abnormal layout at the time of switch in multi-window mode
7. Force Quitting Or App Crashing
The application may crash when the displays are resized or switched in multi-window mode.
App forced quit during switching display
Avoid calling finish() or killing the process in the activity’s onDestroy(). This can cause the app to close.
Avoiding the above mistakes will ensure your app performs seamlessly on the Samsung Galaxy Foldable. This is an exciting time for smartphones, and we look forward to the amazing ways in which developers will embrace foldable technology.
