implement flex mode on a video player objective learn how to implement flex mode on a video player app using android jetpack windowmanager. overview the galaxy z fold4, or its previous versions, is a foldable phone with a vertical axis that opens like a book. at the same time, the galaxy z flip4, or its predecessors, folds horizontally, dividing its screen into upper and lower sections. when the phone is partially folded, it is called flex mode. unfolding the phone will return the apps in full-screen mode. in flex mode, the app's ui separates its controls on the bottom from the rest of the content on the top to fit the partially folded screen. when the phone is unfolded, window components reoccupy their original positions to fit the full-screen mode, like usual smartphones. it gives an outstanding experience on camera, video calls, multimedia, and other apps. to provide users with a convenient and versatile foldable experience, developers need to optimize their apps to meet the flex mode standard. set up your environment you will need the following: java se development kit (jdk) 8 or later android studio (latest version recommended) samsung galaxy foldable device: galaxy z fold2, z fold3, or newer galaxy z flip, z flip3, or newer remote test lab (if physical device is not available) requirements: samsung account java runtime environment (jre) 7 or later with java web start internet environment where port 2600 is available sample code here is a sample code for you to start coding in this code lab. download it and start your learning experience! flex mode sample code (15.60 mb) start your project after downloading the sample code containing the project files, open your android studio and click open to open an existing project. locate the downloaded android project (videoplayer-main) from the directory and click ok. add the maven repository and windowmanager library windowmanager, a new jetpack library introduced by google, helps application developers support new device form factors. to add a dependency on windowmanager, you must first add the maven central repository to the project. go to gradle scripts > build.gradle (project: video_player) and enter the following in the allprojects block. mavencentral() then, go to gradle scripts > build.gradle (module: video_player.app) and add the windowmanager library to the dependencies block. implementation "androidx.window:window:1.0.0" implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.6.1' set up a flow to collect data from windowlayoutinfo in the mainactivity.kt, add a lifecycle-aware coroutine to obtain information from windowlayoutinfo. the coroutine executes each time the lifecycle starts. lifecyclescope.launch(dispatchers.main) { lifecycle.repeatonlifecycle(lifecycle.state.started) { windowinfotracker.getorcreate(this@mainactivity) .windowlayoutinfo(this@mainactivity) .collect { newlayoutinfo -> updatestateandfeatureviews(newlayoutinfo) } } } noteupdatestateandfeatureviews() is a user-defined function and is not included in the windowmanager library. in this code lab, it needs to be called to check the device posture. determine the device posture and update the ui next, in the updatestateandfeatureviews() function, check the current posture of the device and update the ui accordingly for flex mode. when the device is currently folded, the displayfeatures is null. if(newlayoutinfo.displayfeatures.isempty()) when the device is currently in flex mode or partially folded, the device posture is half_opened. using the device posture and orientation, implement your flex mode ui. if (it.state == foldingfeature.state.half_opened && it.orientation == foldingfeature.orientation.vertical) { updateuiforfold() }else if (it.state == foldingfeature.state.half_opened && it.orientation == foldingfeature.orientation.horizontal){ updateuiforflip() } notethe device orientation of a galaxy fold device is vertical, whereas a galaxy flip's device orientation is horizontal. when the device is unfolded, the device posture is flat. else if(it.state == foldingfeature.state.flat) run the app after building the apk, you can run the optimized video player app on a foldable galaxy device and see how it adapts when the device is on flex mode. however, if you don't have a physical device, you can test it on a remote test lab device. watch the video below and know how to test your app via remote test lab. tipfor a better testing experience using remote test lab, choose a device from a location near you. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can implement flex mode in your app by yourself! if you're having trouble, you may download this file: flex mode complete code (9.07 mb) to learn more about developing apps for galaxy foldable devices, visit: www.developer.samsung.com/galaxy-z

implement multi-window picture-in-picture on a video player objective learn how to implement multi-window picture-in-picture (pip) feature on a video player app for a seamless viewing experience on foldable devices. overview android allows activities of apps to launch in a small window called picture-in-picture (pip) since android 8.0. it is a type of multi-window mode primarily used for video playback. pip allows the user to continue watching in a small window pinned to a corner of the screen while browsing content on the main screen or navigating between apps. set up your environment you will need the following: java se development kit (jdk) 8 or later android studio (latest version recommended) samsung galaxy fold, z fold2, z fold3, or z fold4 remote test lab (if physical device is not available) requirements: samsung account java runtime environment (jre) 7 or later with java web start internet environment where port 2600 is available sample code here is a sample code for you to start coding in this code lab. download it and start your learning experience! pip video player sample code (13.30 mb) start your project after downloading the sample project files, follow the steps below to open your project: in android studio, click open. locate the downloaded android project (videoplayer_challenge) from the directory and click ok. configure android manifest to support pip notetake a look and check the files of your project before starting to code. you can implement picture-in-picture in your app by configuring the manifest file and calling the enterpictureinpicturemode method. moreover, you need to consider that the multi-window and app continuity features work correctly in pip mode. to prevent the activity from restarting, handle the layout configuration change for mainactivity in the androidmanifest.xml file. this will ensure that it will not restart when there are layout changes from pip mode to full screen and vice versa. android:configchanges="screensize|smallestscreensize|screenlayout|orientation" picture-in-picture is not supported by default in android apps. set android:supportspictureinpicture to true in the manifest file. android:supportspictureinpicture="true" switch your video player to pip mode you want to trigger pip mode in your video player app when the user taps the home button. to implement pip mode, go to java > com.xyz.codelab and make the following changes to the mainactivity.kt file: override fun onuserleavehint() { enterpipmode() } noteenterpipmode() is a user-defined method. you can view its full implementation in the provided sample code. call enterpictureinpicturemode method in enterpipmode(), you need to call enterpictureinpicturemode(pictureinpictureparams) method with params set in the previous lines. val pictureinpictureparams = pictureinpictureparams.builder().setaspectratio(rational).build() enterpictureinpicturemode(pictureinpictureparams) run the app after building the apk, you can now run the video player app, enhanced with a pip mode. test it by playing a video while browsing the main screen or navigating between apps in multi-window mode. if you don’t have any physical device, you can also test it on a remote test lab device. tipwatch this tutorial video and know how to easily test your app via remote test lab. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can implement multi-window picture-in-picture on a video player app for foldable devices by yourself! if you're having trouble, you may download this file: pip video player complete code (13.19 mb) to learn more about developing apps for galaxy foldable devices, visit: developer.samsung.com/galaxy-z

samsung developers terms and conditions please read all of the following terms and conditions carefully. these general terms and conditions shall govern the use by you of the samsung developers website (developer.samsung.com) and together shall constitute an agreement between you and samsung electronics. co. ltd. ("samsung"). the terms of the privacy policy are incorporated into these terms and conditions by reference. if you have any questions about the terms and conditions, or do not agree to them, then please email us at support@samsungdevelopers.com.com, before using the website. samsung may change these terms and conditions or its privacy policy at any time by updating this page. you shall therefore check this page from time to time to review these terms and conditions to ensure that you agree with any changes. using or accessing this website indicates your continuing acceptance of any updates to the terms and conditions. if you do not accept the terms and conditions, then please do not continue to use the website. download information about samsung developers samsung is a company existing under the laws of the republic of korea, with its place of business at samsung-ro 129, yeongtong-gu, suwon-city, gyeonggi-do, korea 16677 access to the website and samsung intellectual property rights this website allows you to use the contents contained within it for your own use and benefit. samsung shall have the right to modify, withdraw or deny access to the website at any time, including introducing charges for its use or other restrictions on access. the website and all the materials contained within it are protected by intellectual property rights (including copyright, trademarks, patents, design rights, database rights, and rights in confidential information), and, as such, they either belong to samsung or are licensed to samsung to use. the materials include, but are not limited to, the design, layout, logos, brands, look, appearance and graphics of the website, plus content such as software, documents and other materials which appear on it. you may not copy, redistribute, republish or otherwise make the materials on the website available to anyone else for a commercial purpose without consent of samsung in writing. you may only print or download materials from the website for your own personal, non-commercial use, provided that: no materials are modified in any way no graphics are used separately from accompanying text copyright and trademark notices appear in all copies, and you acknowledge this website as the source of the materials and the people to whom you provide these materials are made aware of these restrictions. notwithstanding the foregoing, specific license terms for materials on the website may allow broader rights of use, subject to such terms. nothing in these terms and conditions grants any license to use any samsung brand. [however, you may be entitled to use the developer.samsung.com logo in accordance with our published guidance from time to time.] samsung goods and services samsung may display the availability of some goods and/or services on this website. some of these goods and/or services may only be available in certain jurisdictions and samsung therefore reserves the right to choose where such goods and/or services are supplied. by informing the availability of any goods and/or services, samsung does not warrant that such goods and/or services will be available in your jurisdiction and you should check with your local samsung contact for further information. where samsung does supply goods and/or services, whether through this website or other means, additional terms and conditions may apply. remote test lab remote test lab is service where a qualifying user can conduct testing of software applications suitability or compatibility for certain samsung devices through the website. the availability and nature of the devices that samsung makes available in connection with the remote test lab service shall be posted on the website and updated from time to time. however, samsung does not guarantee that any specific device will be available at any particular time and users should check the website from time to time to see what devices are in fact available. remote test lab uses actual devices, but may not replicate exact operation conditions. production models may vary from devices made available through the remote test lab service and therefore users are advised to test applications on production models as well as through remote test lab. remote test lab service is only available to you if you are a qualified, registered user of developer.samsung.com, but you may be restricted from using service without notice when trying prohibited behaviors such as, without limitation, locking device with pin number or pattern or using the remote test lab service to gain an unfair winning advantage over other participants in any events for samsung devices. you will only have access to the service for a specific defined period of time (which varies depending on the test device). once the defined period of time has elapsed, access to remote test lab will cease and you should make sure that all your test or other data in connection with remote test lab is properly saved. by using remote test lab, you agree and acknowledge that samsung is not liable for any loss of data or software in connection with your access to the service, and that, prior to the release of any application or device into manufacture, further tests will need to be conducted in recognition of the fact that remote test lab is not a substitute for any such required tests. by using remote test lab, you warrant that: you agree and ackowledge that the service is designed for testing applications on samsung devices and the test results do not guarantee the use of applications on other devices. you will only use the service for testing of applications which are designed solely for use on samsung devices you will uninstall any and all software or other content which has been used in connection with the service once you have completed your session you shall not attempt to copy, reverse engineer or decompile the remote test lab device or any technology connected with it. software downloads when we make software available for users to download through developer.samsung.com, any such download is subject to the terms of our end user license agreement, in addition to these terms and conditions. we may also wish to specify certain additional licensing terms in connection with specific software and, if any such additional software licensing terms apply, these will be notified to you at the time you agree to license the software. sample code samsung may publish on the website what samsung terms "sample code", which is software developed by samsung and which samsung makes freely available for developers to use under the terms of the sample code license. the terms of the sample code license will be notified to you at the time you agree to license any sample code from samsung. uploading material to the forum website any material you upload to developer.samsung.com will be considered non-confidential and non-proprietary, and we have the right (at no charge) to use, copy, distribute, sub-license and disclose to third parties any such material for any purpose. we also have the right to disclose your identity to any third party who makes reasonable claims that any material posted or uploaded by you to the website constitutes a violation of their intellectual property rights, or of their right to privacy. samsung reserves the right to remove any material or posting you make on the website if, in its opinion, such material does not comply with samsung's content standards. you warrant that any material you upload does not, and will not, infringe any third party intellectual property rights. forum the members of developer.samsung.com are entitled to participate in the forum and blogs that are in operation on the website. the rules laid out below apply to anyone participating in the forum, blogging or other interaction with the website. forum rules any submission of material by you to the forum means that you accept, and agree to abide by, all the terms and conditions of below forum rules, which supplement the general website terms and conditions and privacy policy. moderation the company is under no obligation to you or any other person to oversee, monitor or moderate the forum or any other services samsung provides on the website and samsung may therefore stop moderating the forum at any time. samsung reserves the right to remove, or to disable access to, any posted contribution which samsung deems to be potentially defamatory of any person, or otherwise inappropriate, or which samsung deems unlawful or in violation of any third party rights. samsung expressly excludes liability for any loss or damage arising from the use of developer.samsung.com by any person in contravention of these rules. submission of contributions there is no limit to the length of a contribution. please note that your contribution will not be anonymous. before making a contribution, you must register with samsung developers. your id, name, profile image and your activity history such as the number of posts, joining date, badges you earned and so on, will appear as part of your published contribution. content standards the content standards below must be complied with in spirit as well as to the letter. we will determine, at our discretion, whether a contribution breaches the content standards. a contribution must be accurate (where it states facts), be genuinely held (where it states opinions), comply with all -the applicable laws applicable in the country from which it is posted, and be relevant. a contribution must not: be defamatory of any person be obscene, offensive, hateful or inflammatory promote discrimination based on race, sex, religion, nationality, disability, sexual orientation or age disclose the name, address, telephone, mobile or fax number, e-mail address or any other personal data in respect of any individual infringe any copyright, database right or trademark of any other person breach any legal duty owed to a third party, such as a contractual duty or a duty of confidence be in contempt of court be likely to harass, upset, embarrass, alarm or annoy any other person impersonate any person, or misrepresent your identity or affiliation with any person give the impression that the contribution emanates from samsung if this is not the case advocate, promote, or incite any third party to commit, or assist, any unlawful or criminal act contain a statement which you know or believe, or have reasonable grounds for believing, that members of the public for whom the statement is intended are likely to understand as a direct or indirect encouragement or other inducement to the commission, preparation or instigation of acts of terrorism contain any advertising or promote any services or web links to other sites. license by submitting a contribution to developer.samsung.com, you agree to grant samsung, and any other company or corporation within the samsung group, a non-exclusive license to use that contribution. although you will still own the copyright to your contribution, we will have the right to freely use, edit, alter, reproduce, publish and/or distribute the material contained in your contribution. this license will be free of charge, perpetual and capable of sub-license. we may exercise all copyright and publicity rights in the material contained in your contribution, in all jurisdictions, to their full extent, and for the full period for which any such rights exist in that material. by submitting your contribution to dveloper.samsung.com, you are warranting that you have the right to grant samsung the non-exclusive license described above and that it does not infringe any third party rights (including third party intellectual property rights). if you are not in a position to developer.samsung.com, please do not submit the contribution to developer.samsung.com. breach of these rules when we determine that a breach of the content standards has occurred or you have otherwise breached these forum rules, we may at our discretion take such action as we deem appropriate, including, without limitation, withdrawal of your right to use this website, removal of any contributions already posted on the website, and/or other legal action. we exclude our liability for all action we may take in response to breaches of these forum rules. complaints if you wish to complain about any contribution posted on any category in the forum, please contact us at support@samsungdevelopers.com. we will then review the contribution and decide whether it complies with our content standards. we will deal with any contribution which, in our opinion, breaches the standards (see above). we will inform you of the outcome of our review within a reasonable time of receiving your complaint. changes to forum rules samsung may revise the forum rules at any time. please therefore check this page from time to time to make note of any changes. samsung assumes no liability or responsibility for notifying changes of the forum rules. samsung electronics america forum terms of service to use the forum, you must agree to forum terms of service with samsung electronics america, the company that runs the forum. these terms are available on forum.developer.samsung.com/tos. terms and conditions the developer.samsung.com terms and conditions will apply in addition to these specific forum rules. our liability to you these terms and conditions do not exclude our liability (if any) to you for: personal injury or death resulting from our negligence fraud any matter for which it would be illegal for us to exclude or to attempt to exclude our liability. samsung does not guarantee that this website: or any product and/or services provided through the website, will be compatible with all or any hardware and software which you may use will be available all the time or at any specific time. samsung is only liable to you for losses which you suffer as a result of a breach of these terms and conditions by us. you are solely responsible for all and any losses which you may incur which were not a foreseeable consequence of us breaching these terms and conditions (for example if you and samsung could not have contemplated those losses before or when you accessed this website). samsung’s liability to you shall not in any circumstances include any business losses that you may incur, including, but not limited to, lost data, lost profits, lost revenue or business interruption. by using the developer.samsung.com website, you agree to indemnify samsung, and other companies and corporations in the samsung group, against any costs, damage, claims, liabilities and expenses incurred as a result of your breach of these terms and conditions, the privacy policy, and/or any other applicable terms (including the forum rules). website content the information, documents, software and other materials ("content") contained within developer.samsung.com are provided "as is" and are given for general information and interest purposes only. samsung tries and ensures that the content contained on the website is accurate and up to date, but samsung cannot be held responsible for any errors, faults or inaccuracies. you should not therefore rely on the content, and samsung recommends that you take further advice or seek further guidance before taking any action based on it. you expressly agree and acknowledge that you use the content at your sole risk and samsung assumes no liability or responsibility for any user content or information provided by other users of the website. in particular, samsung may make available software and technology which is "beta" (meaning that it has not been fully tested or tested at all) and you should make sure you use such technology at your sole risk and in a test environment taking into account the risk that it may cause damage to your software, hardware and other property you use. to the fullest extent permitted by law, we expressly exclude all representations, conditions, warranties or other terms which apply to such content/information, including any implied warranties of satisfactory quality, merchantability, fitness for a particular or any purpose, and non-infringement which might otherwise apply but for this clause. if, in a relevant jurisdiction, these limitations and exclusions are not permitted, then our liability shall be limited and excluded to the fullest extent permitted by law. linking samsung may link to other websites which are not within its control. when samsung does this, samsung will try and make it as clear as possible that you are leaving developer.samsung.com. samsung is not responsible for these other sites in any way, and do not endorse them. it is your responsibility to check the terms and conditions and privacy policy on any other site which you visit. you may not link to developer.samsung.com from another site without our consent in writing. any consent would be subject to complying with the following guidelines: links must be to the home page http://developer.samsung.com/ you may not create a frame or any other border around developer.samsung.com the site from which you wish to link must comply with all relevant laws and regulations and must not contain content which may be considered to be distasteful or offensive and you must not imply that samsung endorses, or is associated with, any other site, product or service fees the use of the samsung developers services is free of charge. samsung reserves the right to charge for samsung developers services and to change its fees, at its discretion. samsung may from time to time launch other services which may be subject to a separate charge and terms. contracting online nothing on developer.samsung.com is intended to be, nor should be construed as, an offer to enter into a contractual relationship with you or anyone else, except for these terms and conditions, which govern the relationship between us in relation to your use of developer.samsung.com and the services made available through it (plus any additional terms we impose in relation to specific products and/or services on the website). if you make a contract with a third party who is named or referred to on developer.samsung.com, it is your responsibility to ensure that you are comfortable with the terms of that contract, and to take legal advice if necessary. governing law and jurisdiction the formation, existence, construction, performance, validity and all aspects whatsoever of these terms and conditions, or of any individual one of these terms and conditions, will be governed by the law of the republic of korea. the seoul central district court will have exclusive jurisdiction to settle any disputes which may arise out of, or in connection with, these terms and conditions or the use of developer.samsung.com. age limit everyone is welcome to visit developer.samsung.com. however, if you want to participate on certain sections of the website or in certain activities available on the website, for example join a club or group, or enter a contest, you must register to the website. in order to register, you must be at least 18 years old or receive your parents and/or guardians written consent. your privacy we will treat personal data provided by you to us in accordance with our privacy policy. you warrant that you are entitled to provide such personal data to us.

toggle navigation global search learn code lab foldables and large screens one ui beta develop mobile/wearable galaxy gamedev galaxy themes galaxy watch health samsung blockchain samsung dex samsung iap samsung internet samsung pay samsung wallet view all galaxy ar emoji galaxy accessory galaxy edge galaxy z galaxy performance galaxy fm radio galaxy s pen remote galaxy sensor extension penup samsung automation samsung neural samsung teegris samsung ese sdk galaxy watch for tizen watch face studio one ui watch for tizen galaxy watch studio converter samsung iap for galaxy watch (tizen) visual display smart tv smart hospitality display smart signage digital appliance family hub platform bixby knox smartthings tizen.net design design system one ui one ui watch smart tv distribute galaxy store tv seller office galaxy store games instant plays support developer support remote test lab samsung android usb driver galaxy emulator skin connect blog news forums events samsung developer conference sdc23 sdc22 sdc21 sdc19 and previous events global search sign in top global search form search submit recommendation samsung developers samsung developers quick link android usb driver code lab galaxy emulator skin foldables and large screens one ui beta remote test lab developer support family site bixby knox samsung pay smartthings tizen samsung research samsungopen source samsung dev spain samsung dev brazil legal terms privacy open source license cookie policy social communications facebook instagram twitter youtube buzzsprout rss linkedin system status site map system status site map facebook instagram twitter youtube buzzsprout rss linkedin copyright (c) 2021 samsung all right reserved.

foldable devices are here! these smartphones allow different form factors with just one device, which can lead to new opportunities for innovation. as developers should be able to detect what is the current posture of the device, the physical position in which a device holds, samsung is putting an effort within the w3c on making a new web standard called device posture api. this api allows web applications to request and be notified of changes in the device posture. web apps can take advantage of the new form factors and improve users’ experience. we’ve created this codelab to show you how you can take advantage of this new feature. before we start, if you would like to learn more about it in a different format, here is a video that we’ve created with more information about this api and foldables. 👉 would you like to do this codelab with mentors and in person? if you are in london we will have a first meetup to try this with real foldable devices, feel free to register here! (ed. this event has already occurred, but we're leaving the link intact.) what is the w3c and why you should care in the meantime, as i’ve mentioned before, there is a current proposal about how to take advantage of these foldable devices called ‘device posture api’. its current state is ‘draft’, which means that is still open to changes and discussion and has been published for review by the community, including w3c members, the public (you!), and other technical organizations. we’ve created a demo to show you how to use this api, hear your thoughts and teach you some capabilities of the web. at the end of this codelab you can send us your feedback here. let’s start working… 🛠️ hands on 1. set up your environment you will need the following: samsung internet latest version samsung galaxy z fold2, z fold3, z flip, or z flip3 if a physical device is not available for testing, use a) remote test lab requirements: samsung account java runtime environment (jre) 7 or later with java web start b) device posture api polyfill for testing using a non-foldable smartphone, just implement a polyfill to the project. 2. start your project open a new browser tab, go to https://glitch.com, and log in click new project, then select import from github enter the url of this repository 3. add html video markup note: take a look and check the files of your project before starting to code. in index.html, you will have two main sections, one is dedicated to the video camera and the other one to the camera controls. you can identify the video section as it contains the class video-container. complete the html markup by adding the <video> element, width, height, and id attributes. <div class="video-container"> <video id="video" width="1280" height="200" > video stream not available. </video> </div> once the video markup is added, the html file is complete. besides this, you can find: a <canvas> element into which the captured frames are stored and kept hidden since users don’t need to see it. an <img> element where the pictures will be displayed. 4. enable front and back cameras with facingmode in index.js, you'll find a startup() function, here is where you will be doing the following: initialize most values grab element references to use later set up the camera and image start by setting up the camera. you will have access to both front and back cameras by using facingmode, a domstring that indicates which camera is being used to capture images. it's always a good practice to check if this function is available for use. add the following lines of code in startup(): `let supports = navigator.mediadevices.getsupportedconstraints(); if (supports["facingmode"] === true) { flip_button.disabled = false; }` 5. link the media stream to the video element if you are able to use facingmode, the camera web app will use this option in the capture function to detect which is the current camera used and later send it to the flip button. now, the camera should be activated, insert this block of code after retrieving defaultopts.video value using facingmode: `navigator.mediadevices .getusermedia(defaultsopts) .then(_stream => { stream = _stream; video.srcobject = stream; video.play(); }) .catch(error => console.error(error));` in order to get the media stream, you call navigator.mediadevices.getusermedia() and request a video stream that returns a promise. the success callback receives a stream object as input. it is the <video> element's source to the new stream. once the stream is linked to the <video> element, start it playing by calling video.play(). it's always a good practice to include the error callback too, just in case the camera is not available or the permissions are denied. 6. take a look at the implementations in index.js at this point, the functionality of the web app is complete. before moving to the next step, let’s review the rest of the javascript code: there is an event listener video for the canplay event that will check when the video playback begins. if it's the first time running, it will set up video attributes like width and height. for the snip button, there is an event listener for click that will capture the picture. the flip button will be waiting for a click event to assign the flag about which camera is being used, front or back camera, within the variable shouldfaceuser, and initialize the camera again. clearpicture() creates an image and converts it to a format that will be displayed in the <img> element. finally, takepicture() captures the currently displayed video frame, converts it into a png file, and displays it in the captured frame box. 7. use the device posture api at this point, you should have a working prototype of a camera web app. the video camera should be displayed and a picture may be taken using the snip button. in addition, it will show a preview of the picture taken through the small preview display. the flip button allows you also to switch between front and back cameras. now, it’s time to play around with the layout of the web app and take advantage of the features available on a foldable device. in order to do that, you will implement the device posture api that allows developers to detect what is the current posture of the phone. in order to change the layout when the device is partially folded, the device posture that you will look for is in a form of a book or laptop. in style.css, apply the following media query: @media (device-posture: folded) { body { display: flex; flex-flow: column nowrap; } .video-container .camera-controls { flex: 1 1 env(fold-bottom); } .msg { display:block; margin: 5em; } using modern css features like display:flex and grid, you can change the layout of the body element and the elements with the class video-container and camera-controls when the phone is flipped. 8. test your app whether you test on a real foldable phone or on a remote test lab device, you need to enable the device posture api in the latest version of samsung internet. to do this, open the browser and type internet://flags in the url bar and search for either device posture api or screen fold api, then select enable. test in a real device if you have a real physical device, you can test it directly on samsung internet using the url that glitch provides you by clicking on show in a new window menu. just partially fold your phone and you will see how the layout changes and even discover a hidden message! use remote test lab the other option, if you don’t have a physical device, is by using remote test lab. you can choose any galaxy foldable devices from the list and follow the same instructions as you would with a real device. just make sure to enable the device posture api and have the latest version of samsung internet. use the buttons provided by remote test lab to partially fold your remote galaxy device. implement polyfill polyfill allows you to emulate behavior on devices that do not have folding capabilities. it helps you visualize how the content responds to the different angle and posture configurations. just include sfold-polyfill.js directly into your code and use the polyfill settings (screenfold-settings.js) of the web component that will emulate the angle of the device and therefore, it will change its posture. moreover, add the following code in index.html <head> … <script type='module' defer src="screenfold-settings.js"></script> <script src="sfold-polyfill.js"></script> … </head> <body> <section> <screenfold-settings></screenfold-settings> </section> … </body> 🥳 you did it! you’ve created a web app that detects when a foldable device change its posture. please let us know how it went here, we would like to hear your thoughts around this api, future codelabs and more! this feedback will go directly to the w3c devices and sensors group, so you will be part of the conversation around this draft too! thanks a lot for reading.

configure an app to enable drag and drop in multi-window objective learn how to implement drag and drop on a note-taking app when in multi-window mode. overview in galaxy fold and it's latest versions, the advantage of its larger display is to split its screen and simultaneously use up to three apps. in multi-window mode, you can split the screen with one window being the main focus, and the other two windows off to the side. all three windows are active, not just the largest one. you can multitask in either landscape or portrait mode, giving you even more flexibility. when using multi-window, drag & drop is one of the useful features when multitasking. drag and drop allows you to easily move data from one app to another. to provide users with better multitasking experience on samsung's foldable devices, developers need to optimize their apps to work on multi-window mode. set up your environment you will need the following: java se development kit (jdk) 8 or later android studio (latest version recommended) samsung galaxy fold, z fold2, z fold3, or newer remote test lab (if physical device is not available) requirements: samsung account java runtime environment (jre) 7 or later with java web start internet environment where port 2600 is available sample code here is a sample code for you to start coding in this code lab. download it and start your learning experience! multi-window (drag & drop) sample code (19.27 mb) start your project open android studio and click open an existing project. locate the downloaded android project (simplenotes_dragdrop) from the directory and click ok. make the app resizable to ensure that the app works in multi-window mode, you need to add an attribute in the manifest’s <activity> element. if you set android:resizeableactivity to true, the activity can be launched in multi-window or in pop-up view, and adapt different screen size. android:resizeableactivity= "true" noteif this attribute is set to true, the activity can be launched in split-screen and freeform modes. otherwise, it will disable multi-window display. remember to handle the changes required to fit your ux in small windows when in multi-window mode. for this code lab, you do not need to worry about the ux as it is already handled. register a drag event listener in newnote.kt, register a drag event listener object by calling setondraglistener for both title and description view of the app. title.setondraglistener(ondraglistener) desc.setondraglistener(ondraglistenerdescription) store the action type to a variable declare a variable to store the action type for the incoming event. val action: int = event.getaction() get and drop the text data inside the dragevent.action_drop, get the item from clipdata and check the mime type. if the mime type is set to text/plain, get the text value from the item object and allow the operation of drop. otherwise, simply show a toast message. val item: item = event.getclipdata().getitemat(0) var mtype = event.clipdescription.getmimetype(0) if(mtype == "text/plain" || mtype== "text/html"){ // gets the text data from the item. dragdata = item.text.tostring() }else{ toast.maketext(applicationcontext,"operation not allowed"+mtype,toast.length_long).show() return@ondraglistener true } tipin this code lab, to simplify the demonstration of implementing drag and drop, mime type or media type is set to plain text only. run the app after building the apk, you can run the optimized note-taking app and start dragging and dropping texts between apps in multi-window mode. if you don’t have any physical device, you can also test it on a remote test lab device. notewatch this tutorial video and know how to easily test your app via remote test lab. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can implement drag and drop in your app for your foldable device by yourself! if you're having trouble, you may download this file: multi-window (drag & drop) complete code (19.33 mb) to learn more about developing apps for galaxy foldable devices, visit: www.developer.samsung.com/galaxy-z

configure an app to enable copy and paste in multi-window objective learn how to implement copy and paste on a note-taking app when in multi-window mode. overview in galaxy fold and it's latest versions, the advantage of its larger display is to split its screen and simultaneously use up to three apps. in multi-window mode, you can split the screen with one window being the main focus, and the other two windows off to the side. all three windows are active, not just the largest one. you can multitask in either landscape or portrait mode, giving you even more flexibility. when using multi-window, copy & paste is one of the useful features when multitasking. copy and paste is a common feature used by many, to duplicate an object and place it in a desired location. to provide users with better multitasking experience on samsung's foldable devices, developers need to optimize their apps to work on multi-window mode. set up your environment you will need the following: java se development kit (jdk) 8 or later android studio (latest version recommended) samsung galaxy fold, z fold2, z fold3, or newer remote test lab (if physical device is not available) requirements: samsung account java runtime environment (jre) 7 or later with java web start internet environment where port 2600 is available sample code here is a sample code for you to start coding in this code lab. download it and start your learning experience! multi-window (copy & paste) sample code (19.48 mb) start your project open android studio and click open an existing project. locate the downloaded android project (simplenotes_copypaste) from the directory and click ok. make the app resizable to ensure that the app works in multi-window mode, you need to add an attribute in the manifest’s <activity> element. if you set android:resizeableactivity to true, the activity can be launched in multi-window, pop-up view and adapt different screen size. android:resizeableactivity= "true" noteif this attribute is set to true, the activity can be launched in split-screen and free-form modes. otherwise, it will disable multi-window display. remember to handle the changes required to fit your ux in small windows when in multi-window mode. for this code lab, you do not need to worry about the ux as it is already handled. get a reference to clipboardmanager class clipboardmanager provides methods to get and set the current primary clipboard data expressed as a clipdata object, which defines the protocol for data exchange between applications. in newnote.kt, get a reference to clipboardmanager class by invoking getsystemservice(clipboard_service). val clipboard = getsystemservice(context.clipboard_service) as clipboardmanager complete the copy operation now, create a new clipdata of simple text using newplaintext of clipboardmanager and pass it on setprimaryclip to complete the copy operation. val clip: clipdata = clipdata.newplaintext("simple text", textdata) clipboard.setprimaryclip(clip) get the text data from the clipboard return the clipdata by getting the primaryclip data from the clipboard. from the primaryclip, acquire the item using getitemat(0). val itemtext = clipboard.primaryclip?.getitemat(0)?.text run the app after building the apk, you can run the optimized app and test it by copying and pasting texts between apps when in multi-window mode. if you don’t have any physical device, you can also test it on a remote test lab device. tipwatch this tutorial video and know how to easily test your app via remote test lab. you're done! congratulations! you have successfully achieved the goal of this code lab. now, you can implement multi-window features such as copy and paste in your app by yourself! if you're having trouble, you may download this file: multi-window (copy & paste) complete code (19.53 mb) to learn more about developing apps for galaxy foldable devices, visit: www.developer.samsung.com/galaxy-z

foldables and large screens new opportunities in the mobile experience design guidelines design guidelines boost your apps’ value withfoldable & large screen optimization your galaxy becomes simpler, more convenient and better optimized with one ui. one ui provides meaningful innovations and improves your everyday life, ensuring that you adapt in the ever-changing world. also, one ui continues to evolve to bring your joyful experiences to life. rich ui optimized for large screens! foldable devices can provide richer experiences than phones. learn how to optimize your app's ui for large screen devices in our newly updated one ui guide. read more all tags all tags sdc23 galaxy z develop a widget for flex window 25 mins start sdc23 gamedev galaxy z implement flex mode into a unity game 30 mins start sdc23 watch face studio galaxy z customize flex window using good lock plugin on watch face studio 20 mins start sdc22 galaxy z implement multi-window picture-in-picture on a video player 20 mins start sdc22 gamedev galaxy z implement flex mode on an unreal engine game 120 mins start sdc22 samsung internet galaxy z develop a camera web app on foldables 30 mins start galaxy z implement app continuity and optimize large screen ui of a gallery app 40 mins start galaxy z configure an app to enable drag and drop in multi-window 30 mins start galaxy z implement flex mode on a video player 30 mins start if you don’t have any galaxy z devices try remote test lab! remote control test lab provides a foldable device for testing app even when you don’t onw one. check out the video tutorial on the remote test lab to max out your knowledge! video thumbanil blogs go to blog search this wide range of blog articles for tips and valuable know-how in developing apps related to foldable & large screen optimization. galaxy z tech docs get detailed info on the galaxy z (foldable) in the following tech documents. overview the new form factor is not the only thing notable in foldable phones. it opens new opportunities in the mobile experience. app continuity app continuity refers to the capability of an app to seamlessly restore the user state when it receives a configuration change. multi-window the ability to have multiple windows open simultaneously benefits from larger screen real estate. flex mode when your phon is partially folded, it will go into flex mode. apps will reorient to fit the screen, letting you sending messages. ux and ui considerations by considering new layouts and navigation patterns, app developers can explore opportunities to build greater experence. testing the how your app reacts to optimized ui layout, app continuity, multi-active window and flex mode. community forums & tech support ask question and find answers at forums. if you need development support, submit a support request. developer forum tech support our partners meet samsung’s partners already making use of ui optimized for large screens.

if you are looking for an opportunity to boost your skills and learn how to use samsung sdks and tools through various hands-on learning experiences, code lab is the right place for you. code lab is a learning platform where you can get started with the latest technologies and services in samsung. through its series of tutorials, it introduces you to the use cases or scenarios for a specific technology. it engages anyone through the step-by-step process of building a sample application or adding a new feature to an existing one. with that, you can integrate your learnings from code lab into your individual or business needs. you can start, by trying out one topic or use case that interests you, and get to know how to easily use a service or tool. it covers topics related to mobile, ai, iot, health, game, security, blockchain, web, or wearables. new topics have been published in code lab for you to learn about samsung’s latest cutting-edge technologies, enabling you to use them to your advantage. with the advent of foldable smartphones, contents like camera web app on foldables, flex mode, app continuity, and multi-window will help you create or modify your applications to adapt seamlessly with different form factors. code lab also provides tutorials on designing your watch face and tracking exercises for the newly released galaxy watch4, operating on wear os powered by samsung. to enhance your hands-on learning experience with code lab, you can simply test sample applications in remote test lab even if you don’t have any physical galaxy devices. it’s a service that allows you to test your apps virtually and remotely, on thousands of samsung galaxy mobile and watch devices. flagship devices are widely available like the galaxy s21 series and the latest galaxy z fold3 and z flip3. not only can you learn with code lab, but you can also test anytime, anywhere. now, are you ready to start your learning journey? visit: https://developer.samsung.com/codelab

mobile get set up to use samsung mobile sdks in your apps. all things for samsung mobile galaxy sdk get started create your own applications with a variety of samsung galaxy sdks, services, and tools. galaxy ar emoji sdk create your own avatar in your app galaxy gamedev build games for galaxy devices - the world's largest mobile gaming platform galaxy performance sdk optimize your application performance galaxy s pen remote sdk control apps remotely with your s pen galaxy themes with galaxy themes, you can personalize\ngalaxy devices’ screens galaxy z (foldable) app design guide for foldable phones health create a useful health app on galaxy watch and a smartphone penup a creative social network service for digital arts samsung application management a solution to manage background applications for better system health samsung automation studio develop your apps using samsung automation studio samsung dex build apps to control desktops with smartphones samsung blockchain build blockchain-enabled services for mobile devices samsung ese sdk provides a way for service providers to deploy services using ese on samsung devices samsung iap sdk make it possible to sell a variety of items in samsung galaxy applications samsung internet build web apps for the samsung internet browser-powering all samsung devices samsung pay integrate secure samsung pay functionalities into your mobile app or website samsung teegris a powerful solution to run applications in a trusted execution environment samsung wallet an all-in-one, single-swipe solution for tickets, boarding passes, coupons, and more samsung wireless fast charge enables samsung mobile devices to be fast-charged with the wireless fast charger experience the latest one ui with android 14 open to all users, the one ui beta program is an opportunity to try one ui features before their official release. learn more foldables and large screens new opportunities in the mobile experience. learn more new watch face design tool new opportunities for new watch devices. get started test your apps test your apps on your galaxy devices or on the emulator, or remotely. samsung android usb driver for windows samsung usb driver for mobile phones galaxy emulator skin check out the newly released emulator skins for galaxy z flip5 and galaxy z fold5. download now! remote test lab use the remote test lab to remotely access a real device online. distribute your apps reach customers in more than 180 countries through galaxy store. how to distribute use these guides and checklists to prepare your apps, themes, and watch faces for galaxy store. seller portal the seller portal site supports those who want to sell their apps on galaxy store galaxy store badge an one click link to your app detail page or brand page. social media kits social media is the most powerful tool in engaging an audience and attracting new fans.