yes, samsung's unpacked august 2022 is happening! livestream the event wed, aug 10th at 9am et/6am pt on samsung.com and samsung's youtube channel. here's what to expect: announcements about the samsung galaxy z fold4, galaxy z flip4, and galaxy watch5. plus, reserve yours before august 10th and get a $100 samsung credit for a galaxy smartphone or a $200 samsung credit for a galaxy smartphone bundle. last year, samsung shipped nearly 10m foldable smartphones worldwide, which was a 300%+ increase from 2020. foldables are definitely going mainstream and gaining a larger share of the overall smartphone market. according to dr. tm roh, president and head of mx business, samsung electronics, the foldable form factor is now the preferred choice for millions. this unpacked announcement will focus on foldables being the optimal tool for productivity and creative expression. mark your calendar to be part of unpacked aug 10, 2022; livestream the event at 9am et/6am pt, on samsung.com and samsung's youtube channel. developer content we've also been busy creating technical content about foldables for developers. foldables podcast with guests from microsoft, google, and samsung (season 3, episode 7) guy merin (microsoft), ade oshineye (google), and søren lambæk (samsung) discuss foldable trends and how companies are working together to help developers create for this new and innovative technology. follow along in our code labs and tutorials about foldables. boost your apps' value with foldable and large screen optimization discover more about implementing, optimizing, and testing your apps on galaxy z devices. this foldables and large screens page is a collection of code labs, blogs, and docs that you can review at your own pace. how to use jetpack windowmanager in android game dev - code lab with the increasing popularity of foldable phones such as the galaxy z fold3 and galaxy z flip3, apps on these devices are adopting foldable features. in this blog, you can get started on how to use foldable features on android game apps. develop a camera web app on foldables - code lab learn to develop a camera web application that detects partially folded postures and adjusts its layout accordingly to improve the user's experience on samsung foldable devices. companion blog to the camera web - tutorial (spanish version here) follow along with laura morinigo, web developer advocate, samsung, as she guides you step-by-step on how to create a web app for a foldable device when the device changes postures. she also gives a tech talk: unfolding the future of response web design (from sdc 21). how to test your mobile apps through a web browser -- video tutorial don't have a foldable device to do your development and testing? you can use the remote test lab, it's free! additional resources on the samsung developers site the samsung developers site has many resources for developers looking to build for and integrate with samsung devices and services. stay in touch with the latest news by creating a free account and subscribing to our monthly newsletter. visit the galaxy store games page for information on bringing your game to galaxy store and visit the marketing resources page for information on promoting and distributing your android apps. finally, our developer forum is an excellent way to stay up-to-date on all things related to the galaxy ecosystem.

foldable technology for mobile is a groundbreaking experience not only for users but also for developers. the presence of many form factors like immersive display, app continuity, flex mode and ux optimization challenge developers to think outside of the box to adapt to this technology. in this blog, we discuss a checklist to provide a better understanding about the adaptation, modification and design changes that are required. so, let's go through each point, one-by-one. large screen optimization samsung foldable devices have two different physical screens: the cover display and the main display. as the cover display is much smaller than the main display, large screen optimization is one of the key areas of designing ux for foldable devices. in a nutshell, your app can utilize the extra space in the main display by showing more information. just having a different ui design with the same information can do the trick of optimization as well. large screen optimization of a note app to implement this scenario, define different layout files for each display using the alternate resources option. for example, if you want to define a different ui for the main display, create a new directory named layout-sw600dp under the res directory and then create an xml file named activity_main. then add the layout code as required. ui is designed separately for the main display and the cover display flex mode optimization in galaxy z series devices, samsung introduced a new mode called flex mode. this mode allows users to use apps while the book-like phone is partially folded. creative design can really make your app stand out from others in flex mode. google duo app in flex mode in galaxy z series devices using google’s new jetpack library, windowmanager, you can detect the current posture of a galaxy z series device and update the ui accordingly by following these steps: step 1: add the dependencies in the build.gradle. implementation "androidx.window:window:1.0.0-alpha01" step 2: define a windowmanager instance. val windowmanager = windowmanager(this, null) step 3: register the devicestate change listener. the listener notices changes in the device state (for example closed, opened, half_opened). windowmanager.registerdevicestatechangecallback( mainthreadexecutor /* executor */, callback /* consumer<devicestate> */ ) step 4: write a callback function to check devicestate.posture to get the current posture of the device. if the posture is posture_half_opened, the app ui gets updated for flex mode. val callback = consumer<devicestate> { devicestate -> if (devicestate.posture == devicestate.posture_half_opened) { // display is folded, show split ux } else { // display is not folded, show full screen ux } } check out the codelab challenge on flex mode for a more hands-on experience. app continuity while folding and unfolding the device, the app must prevent data loss thus ensuring its continuity. this is achievable by using the onsaveinstancestate() method. first, save the data to retain the current state with onsaveinstancestate(). @override public void onsaveinstancestate(bundle savedinstancestate) { //save the current state } then, restore the data in the oncreate() function. @override protected void oncreate(bundle savedinstancestate) { if (savedinstancestate != null) { //restore the previous state } } stopwatch app continuity while unfolding device to have a better understanding of implementing app continuity, see the codelab challenge on app continuity. responsive ui layout to adapt to new form factors such as a diverse aspect ratio, flex mode, multi-window, and pop-up window, utilize the following guidelines : design a responsive ui layout for your app using constraintlayout. define the activity of your app as resizable, to ensure the maximum compatibility of your app with both the cover display and the main display of the device. set the resizableactivity attribute to true in manifest.xml. <activity android:name=".mainactivity" android:resizeableactivity="true"> … </activity> responsive layout of the spotify app cutout and punch hole of the main display the main display of a galaxy z fold is covered by an area on the top-right side called the “l-cut” whereas the galaxy z fold2 and fold3 have a punch hole in the upper right side and the galaxy z flip devices have a punch hole in the middle. some portion of your app’s ui could be covered by the l-cut or the punch hole. content is covered by the l-cut in a galaxy fold device in landscape mode to avoid such a scenario, depending on your ui content style, define a display cutout mode. for example, the content is letterboxed in landscape mode whereas it is rendered into the cutout area in portrait mode by default. define the display cutout mode in the style.xml as shortedges so that your content is rendered into the cutout area in both portrait and landscape modes. <item name="android:windowlayoutindisplaycutoutmode">shortedges</item> display cutout in the default mode and the shortedges mode, respectively last but not the least, you can test your app on our device cloud, samsung remote test lab, to make sure you have implemented all the checkpoints discussed in this blog. you can also participate in our codelab challenges to have a clear understanding of the implementation details. in this blog we have discussed about how to adapt your app for foldable devices. we hope it is a good guide for you to start with. you can also check out samsung’s official documentation and reach out to our developer community if you have any queries.

intro foldable technology for mobile is a ground-breaking experience not only for users, but also for developers. the presence of many form factors, like immersive display, app continuity, flex mode, and ux optimization, challenge developers to think outside of the box to adapt to this technology. there are already a large number of blogs talking about general application considerations, but what about gaming on a foldable device? in this blog, we look at the challenges and new opportunities foldable devices present for mobile game development. this blog focuses on unity and unreal engine as they are the most common game engines for mobile development. however, a lot of the information applies to other engines as well. app continuity and multi-window mode firstly, let's establish that the large internal display is called the main display whilst the smaller external display is called the cover display. app continuity and multi-window mode are two key features of foldable smartphones. with app continuity, you can seamlessly transition between the cover display to the main display without needing to reopen the app. with multi-window, you can run multiple apps at once and multitask like never before. app continuity moving an app between the two displays affects the size, density, and aspect ratio of the display it can use. app continuity is enabled and disabled from the android manifest of the app: the <activity> element has a new attribute called resizeableactivity. if not set, this attribute defaults to true, thus enabling app continuity and assuming the app fully supports both app continuity and multi-window mode. if set to true then the application automatically attempts to resize when moving between displays, as shown in the video below. if set to false then the system still allows you to transition from the cover display to the main display but does not attempt to resize the application. instead, a new button appears, allowing the user to restart the application at a time of their choosing, as shown below. when the app transitions between the two displays, the activity is destroyed and recreated. as such, the app data needs to be stored and then used to restore the previous state. from testing, both unity and unreal engine appear to handle this process already. however, if you are developing on a custom engine, it is worth confirming that your engine/app can handle this. continue on cover screen by default, foldable devices simply lock the device when closing the main display. however, it is possible for users to disable this functionality for certain apps. in the device's display settings, there is an option called "continue on cover screen" that has to be enabled by the user. entering this menu displays a list of all applications on the device and enables users to set specific applications to not lock the device when closing the main display. if an application has resizeableactivity set to false then the option to enable this functionality is greyed out and is not available. if your application supports resizing and app continuity then you should make sure to test that this works as users may wish to enable this functionality on their device. multi-window mode multi-window mode can allow up to three apps to run at the same time in a split-screen arrangement (see left image) or for two apps to run in pop-up mode which keeps one app full-screen but creates another app in a smaller pop-up window (see right image). just like app continuity, this is enabled using the attribute resizeableactivity in the android manifest. if resizeableactivity is not set then it defaults to true. so again, it is recommended that you set this yourself to ensure that your app works as intended. app continuity without multi-window mode if you would like your app to support app continuity but don't want it to be used by the multi-window mode, then this is possible. first, you should set the resizableactivity attribute to false to disable both app continuity and multi-window mode. next use the following <meta-data> element in your <activity> element: <meta-data android:name="android.supports_size_changes" android:value="true" /> this re-enables the app continuity feature without enabling multi-window mode. game engine features to use if using existing game engines then there are several existing features that are useful if developing for foldable devices. this section provides a high-level look at these features. for more in-depth information, i recommend visiting the engine's documentation. unity unity is a very good engine for developing on foldable devices, requiring little to no setup to enable features for foldable devices. the engine automatically handles resizing of the application without any modifications required. the resizeableactivity attribute is controlled by an option in the player settings: resizable window. when enabled, resizeableactivity appears to be set to true; when disabled, resizeableactivity appears to be set to false. note this option is not available in older versions of unity. if this option is not present then you have to set the resizeableactivity manually. the engine also provides a very robust ui scaling system that helps to reduce the amount of work required to create a ui that works across both the cover display and main display. the canvas scaler and anchor system work very well with foldable devices and work to resize and position elements consistently across the two displays, thus preventing developers from having to create two ui designs (one for cover display and one for main display). unreal engine 4 unreal engine 4 is another good engine for developing on foldable devices, although it requires a little more work to get it set up for foldable devices. first of all, unreal engine 4 by default disables the resize event on android devices, however, it is possible to re-enable it in device profiles using the console variable: r.enablenativeresizeevent = 1 unreal engine 4 by default also has a max aspect ratio of 2.1. this is, however, too small for the cover display of some foldable devices which can result in black bars on either side of the image. fortunately, unreal engine makes this value easily changeable in the project settings: platform -> android -> max aspect ratio from my testing, 2.8 is a good value. however, i recommend users experiment to find the best value. unreal engine's umg (unreal motion graphics ui designer) has a comprehensive set of tools for creating responsive ui designs. this system automatically scales ui elements to fit the screen size, and the anchor system is also very useful for ensuring the ui elements are positioned correctly between the two displays. samsung remote test lab no matter what engine you use, the best way to ensure your app works well on a foldable device is to test it on a foldable device. samsung remote test lab has a range of foldable devices available for developers to test their applications on if getting hold of a physical device is too difficult or expensive. all you need to do is create a samsung account and you can start using these devices for testing. android jetpack windowmanager despite being very good engines for foldable game development, neither unity nor unreal currently provide information about the current state of the foldable device (that is, is it open/closed/halfway?, where is the fold positioned?, what is the fold's orientation? and so forth). however, android has recently created a new library as a part of their android jetpack libraries that enables developers to access this information and make use of it in their apps. android jetpack in their own words is "a suite of libraries to help developers follow best practices, reduce boilerplate code, and write code that works consistently across android versions and devices so that developers can focus on the code they care about." windowmanager is a new library from the android jetpack suite, intended to help application developers support new device form factors and multi-window environments. the library had its 1.0.0 release in january 2022, and targeted foldable devices but—according to the documentation—future versions will extend to more display types and window features. more technical resources this blogpost has an accompanying technical blogpost and code lab tutorial, demonstrating how to use the android jetpack windowmanager with both unity and unreal to take advantage of the flex mode feature of samsung's foldable devices. i recommend starting with the jetpack windowmanager blogpost to learn how to set up the windowmanager in java: https://developer.samsung.com/galaxy-gamedev/blog/en-us/2022/07/20/how-to-use-jetpack-window-manager-in-android-game-dev then, follow it up with the code labs to learn how to make use of the windowmanager to implement a simple flex mode setup in either unreal or unity: https://developer.samsung.com/codelab/gamedev/flex-mode-unreal.html https://developer.samsung.com/codelab/gamedev/flex-mode-unity.html also, visit our game developer community to join the discussion around mobile gaming and foldable devices. click here to find out more about other design considerations when designing apps for foldable devices and large screens. final thoughts foldable devices provide a richer experience than regular phones. hopefully, this blogpost and accompanying tutorial have provided you with the necessary information to begin taking advantage of these new form factors and start providing users a richer foldable experience. additional resources on the samsung developers site the samsung developers site has many resources for developers looking to build for and integrate with samsung devices and services. stay in touch with the latest news by creating a free account and subscribing to our monthly newsletter. visit the galaxy store games page for information on bringing your game to galaxy store and visit the marketing resources page for information on promoting and distributing your android apps. finally, our developer forum is an excellent way to stay up-to-date on all things related to the galaxy ecosystem.

introduction samsung has announced that its foldable device will be available soon. to provide the best experience for this unique device, third-party developers need to make sure their apps are ready to rock, and work seamlessly between two displays. apps optimized for foldable devices should seamlessly transition between screens, as well as consider different display attributes such as resolution and density. two-or-more apps can run in split-screen (multi-window) mode on the large display (known as the main display) of foldable devices. in this mode, developers also need to handle app behavior when focus is changed. a sample app has been developed to illustrate this transition. in this app a simple ui is designed to keep score of two teams playing a game. to adapt this app for foldable ui, some configurations have been changed by following the official guide. so how much needs to be changed? let’s find out. getting started setting up the environment developers can test their apps on avd (android virtual device) in android studio by installing the emulator provided by samsung and following this guide on the developer site. after setting up the environment, a floating button will pop up (illustrated in the image below) to emulate display transition. the tablet-like display is called the main display and the smaller phone-like display is the cover display. to emulate the main and cover displays, you can click between button 1 and button 2 respectively. app continuity app continuity enables seamless adaptation to different screen sizes. for example, while playing a video on the cover display, the user may switch to the main display to have a more immersive experience. app continuity ensures that the user has the same video-playing experience as when they were viewing it on the cover display. this is what happens during the transition: the activity is destroyed and recreated whenever the device is folded or unfolded. to implement this, apps need to restore the previous state before the activity is restarted. to update your view layout manually during display transition and multi-window, you should add android:configchanges attribute in the manifest as in the following example: <activity android:name=".myactivity" android:configchanges="screensize | smallestscreensize | screenlayout" /> after making this change to the manifest, you can modify the view layout and restore resources in onconfigurationchanged(), as shown below. @override public void onconfigurationchanged(configuration newconfig){ super.onconfigurationchanged(newconfig); // write your code here } according to the guide, onsaveinstancestate() and viewmodel object can be used to store and restore previous state. in this example, viewmodel object is used to store the data and then restore after folding/unfolding. viewmodel example: viewmodel was one of the architecture components introduced by the android team at google i/o 2017. it has been designed to store and restore ui data. the main objective is to help developers manage configuration changes. the sample app in this example was developed using viewmodel to avoid data loss during folding and unfolding. steps: create a class that extends viewmodel to make the distinction between ui controller and data. for each screen, developers have to create a viewmodel class. this class will contain all the data related to its corresponding screen. in this example, members are declared as public. if needed, data can be encapsulated, and developers can use getter and setter methods. public class gameviewmodel extends viewmodel { public int team1score = 0; public int team2score = 0; } establish an association between viewmodel and ui controller. viewmodelproviders.of().get(.class) in the sample app: viewmodelproviders.of(this).get(gameviewmodel.class) use viewmodel in the app to update data. public void increamentforteam2(view v) { viewmodel.team2score = viewmodel.team2score + 1; updateteam2ui(viewmodel.team2score); } multi-window and multi-tasking: the default behavior is for apps to pause when they are out of focus (i.e. onpause() is called). if you wish to enforce multi-resume behavior in multi-window mode, you must add explicit statements to the manifest, as shown below. <application> <meta-data android:name="android.allow_multiple_resumed_activities" android:value="true" /> <activity ... /> </application> maximum aspect ratio apps that target android 8.0 (api level 26) or higher will fill the entire screen. this means that the target sdk version needs to be set at api level 28. alternatively, the activity can be declared as resizable, and will fill the entire screen. if you are using android 7.1 or lower, you need to add an element named android.max_aspect in the application element. <!-- render on full screen up to screen aspect ratio of 2.4 use a letterbox on screens larger than 2.4 --> <meta-data android:name="android.max_aspect" android:value="2.4" /> testing the source of this sample app is foldableapp. in this sample app, a simple ui is designed to store the score of two teams playing a game. there is also a text view which shows the current lifecycle state of the app. during transition between the displays, no data is lost, nor do any ui related issues occur. as the emulator currently does not support multi-resume, the app behavior during out-of-focus can’t be tested. however, it is mentioned in the guide that multi-resume can be tested with samsung devices running android 9.0.

foldable devices are here! last year samsung introduced to the market the samsung galaxy fold and other manufacturers have announced similar upcoming devices. while the future looks very exciting for devices and new browser capabilities (and i’ll deep dive into that area very soon), let’s take a look at the present and make sure that our websites look and behave as we expect them to. the challenge i’ve been using the fold for several months now, and the main issues that jump to mind are seeing websites (and apps) that do not take into consideration the different form factor of the screens of the device itself. don’t get me wrong,** they shouldn’t **(as in they should adapt automatically), but i want to take some minutes and go through some development tips around this device. to illustrate the issues that a user might encounter, they can be as harmless as having content not displaying properly (see figure 1 for amazon) or more serious as completely losing access to a feature (see figure 2 for google maps). do notice as well that in these screenshots there are only 2 apps open instead of the ‘extreme’ 3 apps scenario (more on this later). * fig 1: the banner is displaying incorrectly in here (although considering it’s a banner to download the app from the store i think it might be a feature instead of a bug). fig 2: parts of the ui are not accessible on this width. a general solution is scrollable items or stacking the items differently like the “nearby places” menu does. the simple solution now, let’s be very clear, the solution to all this, in a tl;dr way is responsive design, making proper use of the built-in layout system that css offers through css grid and flexbox (and here’s a great post my friend jo about how to implement some common responsive layouts). common responsive layouts with css grid (and some without!) - samsung internet dev hub - resources the tips first and foremost, be sure to test accordingly. samsung internet holds ~6.5% of all mobile browsing in the world (as of 12/19), and there are at least 1 million devices out there that fold. but its not only about this device, as almost 30% of mobile screen resolutions linger around the 300/400px width mark. bottom line, be sure to test accordingly! make sure to provide ways to access all parts of sections that might get lost on narrow designs. there are several ways of doing this. the traditional use of hamburger icons to access menu items, and/or providing a way to scroll through the items horizontally. as an example, amazon uses both approaches on their website. as a rule of thumb, content on small/narrow screens is generally stacked in a single column. some elements like menus or others can morph, be grouped or change their order in the design. the verge does precisely this, it stacks all the content into one column. the twitter pwa is a good example as well of how the ui changes from being viewed in different resolutions. (see figure 3) i don’t want to go by without providing useful tips, specially if they help you make your site work great. one extremely cool and useful way to identify where your content is overflowing is by checking your site with firefox dev tools, as shi ling tai points out! til the @firefoxdevtools tells you which elements have scroll overflows!! i've spent countless hours debugging why i'm seeing two scrollbars in the past, this is a life saver! — @taishiling fig 3: twitter pwa on the front screen of the galaxy fold (left) and on the inside screen (right) the hardware the samsung galaxy fold is an android smartphone that opens to create a user experience that can be closer to a tablet. it has 2 displays: a 4.6" one on the outside and a 7.3" one on the inside. they won’t ever be on at the same time, and here’s a small graphic that shows where these screens are on the device. fig 4: two screens present in the galaxy fold the aspect ratio for the internal 7.3 inch display is 4.2:3. the ratio on the external 4.6 inch display is 21:9. the numbers out in the wild, while speaking with developers, the curiosity of testing their web properties on such device always arises. sometimes minor quirks appear (like the ones in figures 1 & 2), prompting questions regarding the available space and aspect ratio. after all, it generally doesn’t look good that your website doesn’t display correctly in the latest shiny hardware! so, to ensure proper testing, i want to make the following information available about the device’s (and browser’s) reported viewport sizes. i also want to inform about this data to make a point about the importance of responsive design, since you’ll quickly see that there are plenty of possible variations of space for an app (browser in our case) . the galaxy fold can run up to 3 apps at the same time (see figure 5 below). additionally, these factors also change the available viewport size: the position of the middle app separator to one of three predefined positions (~60–40, 50–50,~40–60). orientation (portrait/landscape). presence of icons on the navigation bar, or swipe gesture indicators (see figure 5 below the red line) or no visuals at all. the os screen zoom setting (see figure 6). presence of tabs in the browser (recent new feature in samsung internet). fig 5: three app multitasking’s default ~60-40 layout on the fold fig 6: os screen zoom setting and until now i am only referring to the factors that might affect the layout of applications in the internal screen (for reference, the external screen does not switch to landscape and there is no possibility to split the screen in any way, due to space constraints). as you can start to realize, the number of possible combinations grows exponentially, making responsive design the only way to properly tackle this. but i did promise numbers, which can be specially useful to test if your website is displaying properly on the fold. for simplicity’s sake, the following screenshots show the worst case viewport size scenario. they consist of having the screen zoom set to ‘large’, tabs enabled in the browser, buttons on the navigation bar and 3 apps running on the internal screen. this should portray the minimum available space for your content. much cramped?! front screen for the front screen, even in its worst case scenario, it has a healthy size that shouldn’t provide many challenges to existing web properties. to my recollection, there still hasn’t been any mayor issue i have encountered in it’s 320x519 resolution. fig 7: viewport size on the front screen of the galaxy fold internal screen regarding the internal screen, we must take into consideration the two ways a person can use the device. let’s see how the 3 apps would behave in portrait mode in each of the 3 predefined positions for the middle separator. fig 8: worst case portrait viewport sizes on galaxy fold let’s now see possibly the extreme case you’d need to check for the galaxy fold device, landscape mode in one of the 2 small windows on the right (at least we can make sure the logo on our site fits in 85px!). notice that there is a black bar on the right that is there the ‘l-cut’ (notch how i like to call it) is placed. this can also be on the left, if you hold the phone in the opposite direction, but for the user interface there is no real difference. fig 9: worst case landscape viewport sizes on galaxy fold these resolutions are for samsung internet, so height will most likely be different for edge, firefox and chrome, although height is generally not an issue since pages normally scroll vertically. the future there’s discussion at the moment in w3c for css primitives for foldable devices and js apis that will allow to define window segments led by microsoft that will enhance the web for dual (adjacent) screen devices, and we ourselves at samsung are already mind-mapping which new apis should come to the web to enrich foldable web experiences. i am personally engaged into these discussions and would really like to hear what you as developers want and expect from the browser in terms of capabilities and from the web in terms of experiences. do let me know what you think either in the comments or through twitter! the closing remarks as you can read, the answer lies in responsive design and proper testing. even if several browsers are built on top of the same engine, when it comes to optimizing for challenging (small or big) spaces, different gui items, bars, and configurations can play a role in making part of your experience inaccessible or unusable. the galaxy fold is an interesting device that enables a new paradigm of ux, and while i do not recommend designing specifically for a device, i hope this information sheds some light to make more informed decisions for layouts in your web properties, and again, prompt you into making sure you are testing with at least the most used browsers out there. more resources if you want to read about 6 assumptions that can break your website (some apply to websites on the fold as well!) take a look at what my co-worker ada wrote about some myths surrounding the topic of responsive design. six assumptions which could break your website *a mistake consistently made by some of the biggest websites shows they are thinking about responsive web design…*medium.com