Designing for foldables | Samsung Developer

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>Designing for foldables | Samsung Developer</title> <link rel="canonical" href="/one-ui/largescreen-and-foldable/designing_for_foldable.html" /> <meta name="description" content=""> <meta name="author" content=""> <meta name="keywords" content="">  <meta property="og:site_name" content="Samsung Developer"> <meta property="og:title" content="Designing for foldables | Samsung Developer"> <meta property="og:description" content="The world runs on you."> <meta property="og:type" content="website"> <meta property="og:url" content="/one-ui/largescreen-and-foldable/designing_for_foldable.html"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://d3unf4s5rp9dfh.cloudfront.net/public/img/common/SNS_1280x630.png">  <meta name="twitter:site" content="@samsung_dev"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Designing for foldables | Samsung Developer"> <meta name="twitter:description" content="The world runs on you."> <meta name="twitter:domain" content="http://developer.samsung.com/"> <meta property="twitter:image" content="https://d3unf4s5rp9dfh.cloudfront.net/public/img/common/SNS_1280x630.png"> <link rel="icon" type="image/png" href="https://d3unf4s5rp9dfh.cloudfront.net/public/favicon-2023.ico" /> <link rel="manifest" href="https://d3unf4s5rp9dfh.cloudfront.net/public/manifest.json" /> <meta name="google-site-verification" content="" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta name="theme-color" content="#000000" /> <meta name="csrf-token" content=""/> <meta name="user-locale" content="SGP"/> <meta name="user-country" content="SG"/> <meta name="user-lang" content="*"/> <meta name="env" content="production"/> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOne-400.woff2" as="font" type="font/woff2" crossorigin="anonymous"/> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOne-700.woff2" as="font" type="font/woff2" crossorigin="anonymous"/> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungSharpSans-Bold.woff" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungSharpSans-Medium.woff" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOneKorean-400.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungOneKorean-700.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preload" href="https://d3unf4s5rp9dfh.cloudfront.net/public/fonts/SamsungSharpSans-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="stylesheet" href="/program/OneUI/css/sdp.one-ui.min.css" /> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/css/sdp.vendors.min.css"/> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/css/sdp.global.min.css"/> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/css/sdp.app.min.css"/> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/css/sdp.docs.min.css"/> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/js/sdp.vendors.min.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=GTM-THSQV3D"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GTM-THSQV3D'); </script>   </head> <body>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THSQV3D" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div id="app" attr-url="/one-ui/largescreen-and-foldable/designing_for_foldable.html" attr-ga-enabled="1" attr-cms="doc"> <div class="wrapper"> <header class="sdp-header sub doc" data-target="header" translate="no" data-component="true"> <div class="header-global-nav">  <div class="global-nav-top-box"> <div class="global-nav-top"> <i role="button" class="global-nav-menu" data-target="gnb"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 4.125H2" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M2 10.125H18" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M18 16.125H2" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i> <a class="global-nav-logo" href="/"> <svg width="180" height="24" viewBox="0 0 180 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1_13833)"> <path d="M5.184 18.43C2.826 18.43 1.26 17.422 0.054 16.072L2.286 14.308C2.952 15.46 3.96 16.09 5.166 16.09C6.462 16.09 7.164 15.244 7.164 14.326C7.164 13.228 5.814 12.868 4.428 12.436C2.646 11.86 0.702 11.194 0.702 8.692C0.702 6.586 2.538 4.93 5.058 4.93C7.164 4.93 8.406 5.74 9.468 6.838L7.452 8.368C6.894 7.522 6.102 7.108 5.076 7.108C3.87 7.108 3.24 7.756 3.24 8.602C3.24 9.664 4.482 9.97 5.922 10.456C7.704 11.032 9.72 11.824 9.72 14.344C9.72 16.414 8.064 18.43 5.184 18.43ZM15.9503 18.466C13.4123 18.466 10.7663 16.45 10.7663 12.994C10.7663 9.502 13.3223 7.504 15.9863 7.504C17.3723 7.504 18.5963 8.062 19.3703 8.98V7.72H21.8003V18.25H19.3703V16.882C18.5963 17.872 17.3363 18.466 15.9503 18.466ZM16.3463 16.234C18.1643 16.234 19.4962 14.776 19.4962 12.958C19.4962 11.158 18.1643 9.718 16.3463 9.718C14.5463 9.718 13.1603 11.14 13.1603 12.958C13.1603 14.794 14.5463 16.234 16.3463 16.234ZM23.2723 18.25V7.72H25.6843V8.944C26.3503 8.062 27.3943 7.504 28.6903 7.504C30.3463 7.504 31.4803 8.17 32.1103 9.322C32.8303 8.224 34.0543 7.504 35.5663 7.504C38.4283 7.504 39.8503 9.16 39.8503 11.914V18.25H37.3663V12.112C37.3663 10.582 36.5923 9.61 35.0803 9.61C33.7663 9.61 32.7583 10.51 32.7583 12.364V18.25H30.2923V12.04C30.2923 10.528 29.5363 9.61 28.0783 9.61C26.7103 9.61 25.7023 10.546 25.7023 12.418V18.25H23.2723ZM45.1972 18.466C42.8392 18.466 41.3632 17.566 40.5172 15.91L42.7672 14.83C43.2712 15.82 44.1532 16.36 45.3052 16.36C46.5112 16.36 47.1052 15.784 47.1052 15.082C47.1052 14.308 45.9352 14.164 44.6392 13.876C42.8392 13.498 40.9492 12.922 40.9492 10.708C40.9492 9.016 42.5872 7.486 45.0892 7.486C47.2312 7.486 48.5812 8.314 49.3912 9.664L47.3212 10.708C46.8892 9.97 46.0972 9.502 45.0892 9.502C43.9372 9.502 43.3972 10.042 43.3972 10.636C43.3972 11.338 44.2252 11.518 45.8092 11.86C47.5372 12.202 49.5172 12.814 49.5172 15.028C49.5172 16.504 48.2032 18.466 45.1972 18.466ZM59.9517 7.72V18.25H57.5397V17.044C56.8737 17.926 55.8657 18.466 54.5157 18.466C51.9957 18.466 50.4657 16.828 50.4657 13.966V7.72H52.9317V13.714C52.9317 15.352 53.6517 16.36 55.1817 16.36C56.5317 16.36 57.5217 15.352 57.5217 13.498V7.72H59.9517ZM61.452 18.25V7.72H63.864V9.016C64.566 8.098 65.646 7.504 67.014 7.504C69.66 7.504 71.19 9.142 71.19 12.004V18.25H68.724V12.256C68.724 10.618 67.932 9.61 66.348 9.61C64.962 9.61 63.882 10.618 63.882 12.472V18.25H61.452ZM80.8765 18.07V16.846C80.1025 17.854 78.8605 18.466 77.4385 18.466C74.9005 18.466 72.2545 16.45 72.2545 12.994C72.2545 9.502 74.8105 7.504 77.4745 7.504C78.8605 7.504 80.0845 8.116 80.8585 9.07V7.72H83.2885V17.98C83.2885 20.932 81.3985 23.344 77.8525 23.344C75.1165 23.344 73.4065 22.066 72.4525 20.32L74.6125 19.006C75.3865 20.428 76.2145 21.112 77.8885 21.112C79.7245 21.112 80.8765 19.672 80.8765 18.07ZM77.8345 16.234C79.6525 16.234 80.9845 14.776 80.9845 12.958C80.9845 11.158 79.6525 9.718 77.8345 9.718C76.0345 9.718 74.6485 11.14 74.6485 12.958C74.6485 14.794 76.0345 16.234 77.8345 16.234ZM89.174 18.25V5.11H92.756C97.184 5.11 99.704 7.954 99.704 11.68C99.704 15.424 96.86 18.25 92.864 18.25H89.174ZM92.468 7.378H91.622V15.982H92.576C95.456 15.982 97.256 14.128 97.256 11.68C97.256 9.16 95.726 7.378 92.468 7.378ZM106.012 18.466C102.7 18.466 100.45 16.054 100.45 13.012C100.45 9.934 102.844 7.504 105.922 7.504C109.054 7.504 111.34 9.808 111.34 12.922V13.84H102.772C103.114 15.334 104.284 16.324 106.012 16.324C107.38 16.324 108.424 15.604 108.928 14.47L110.926 15.622C110.008 17.332 108.388 18.466 106.012 18.466ZM105.922 9.646C104.464 9.646 103.33 10.51 102.898 11.806H108.874C108.514 10.384 107.434 9.646 105.922 9.646ZM115.182 18.25L111.168 7.72H113.706L116.424 15.136L119.088 7.72H121.59L117.63 18.25H115.182ZM126.895 18.466C123.583 18.466 121.333 16.054 121.333 13.012C121.333 9.934 123.727 7.504 126.805 7.504C129.937 7.504 132.223 9.808 132.223 12.922V13.84H123.655C123.997 15.334 125.167 16.324 126.895 16.324C128.263 16.324 129.307 15.604 129.811 14.47L131.809 15.622C130.891 17.332 129.271 18.466 126.895 18.466ZM126.805 9.646C125.347 9.646 124.213 10.51 123.781 11.806H129.757C129.397 10.384 128.317 9.646 126.805 9.646ZM133.311 18.25V4.93H135.759V18.25H133.311ZM142.273 18.466C139.231 18.466 136.819 16.018 136.819 12.994C136.819 9.916 139.231 7.504 142.273 7.504C145.297 7.504 147.727 9.916 147.727 12.994C147.727 16.018 145.297 18.466 142.273 18.466ZM142.273 16.18C144.001 16.18 145.333 14.74 145.333 12.994C145.333 11.212 144.001 9.79 142.273 9.79C140.527 9.79 139.213 11.212 139.213 12.994C139.213 14.74 140.527 16.18 142.273 16.18ZM154.648 18.466C153.208 18.466 151.948 17.944 151.21 17.008V23.092H148.798V7.72H151.21V9.124C151.948 8.134 153.19 7.504 154.63 7.504C157.276 7.504 159.814 9.502 159.814 12.994C159.814 16.45 157.186 18.466 154.648 18.466ZM154.252 16.234C156.034 16.234 157.42 14.794 157.42 12.958C157.42 11.14 156.034 9.718 154.252 9.718C152.434 9.718 151.12 11.158 151.12 12.958C151.12 14.776 152.434 16.234 154.252 16.234ZM166.129 18.466C162.817 18.466 160.567 16.054 160.567 13.012C160.567 9.934 162.961 7.504 166.039 7.504C169.171 7.504 171.457 9.808 171.457 12.922V13.84H162.889C163.231 15.334 164.401 16.324 166.129 16.324C167.497 16.324 168.541 15.604 169.045 14.47L171.043 15.622C170.125 17.332 168.505 18.466 166.129 18.466ZM166.039 9.646C164.581 9.646 163.447 10.51 163.015 11.806H168.991C168.631 10.384 167.551 9.646 166.039 9.646ZM172.546 18.25V7.72H174.958V9.286C175.444 8.242 176.344 7.72 177.658 7.72C178.432 7.72 179.026 7.9 179.512 8.17L178.594 10.474C178.234 10.24 177.838 10.06 177.136 10.06C175.714 10.06 174.976 10.816 174.976 12.634V18.25H172.546Z" fill="black"></path> </g> <defs> <clipPath id="clip0_1_13833"> <rect width="180" height="23.5" fill="white" transform="translate(0 0.25)"></rect> </clipPath> </defs> </svg> </a> <div class="global-nav-util-group"> <div class="util-group-search" data-open="headerSearch"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17.2529 17.2511L12.5469 12.5142" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M14.3843 8.55871C14.3843 11.7763 11.776 14.385 8.55883 14.385C5.34167 14.385 2.7334 11.7763 2.7334 8.55871C2.7334 5.34107 5.34167 2.73242 8.55883 2.73242C11.776 2.73242 14.3843 5.34107 14.3843 8.55871Z" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> <span>Search</span> </div>  <a class="util-group-sign-in" href="/login?redirectURL=%2Fone-ui%2Flargescreen-and-foldable%2Fdesigning_for_foldable.html"> <span>Sign in</span> </a> </div> </div> </div>  <div class="header-dimmed" data-target="headerDimmed"></div>  <div id="filter"></div>  <div class="global-nav-bottom-fixed"> <div class="global-nav-bottom" data-open="gnb"> <div class="nav-btm-logo"> <i role="button" class="nav-btm-close" data-close="gnb"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.00017 4L16 15.9998" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M4 15.9998L15.9998 4" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i> <svg width="180" height="24" viewBox="0 0 180 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1_13833)"> <path d="M5.184 18.43C2.826 18.43 1.26 17.422 0.054 16.072L2.286 14.308C2.952 15.46 3.96 16.09 5.166 16.09C6.462 16.09 7.164 15.244 7.164 14.326C7.164 13.228 5.814 12.868 4.428 12.436C2.646 11.86 0.702 11.194 0.702 8.692C0.702 6.586 2.538 4.93 5.058 4.93C7.164 4.93 8.406 5.74 9.468 6.838L7.452 8.368C6.894 7.522 6.102 7.108 5.076 7.108C3.87 7.108 3.24 7.756 3.24 8.602C3.24 9.664 4.482 9.97 5.922 10.456C7.704 11.032 9.72 11.824 9.72 14.344C9.72 16.414 8.064 18.43 5.184 18.43ZM15.9503 18.466C13.4123 18.466 10.7663 16.45 10.7663 12.994C10.7663 9.502 13.3223 7.504 15.9863 7.504C17.3723 7.504 18.5963 8.062 19.3703 8.98V7.72H21.8003V18.25H19.3703V16.882C18.5963 17.872 17.3363 18.466 15.9503 18.466ZM16.3463 16.234C18.1643 16.234 19.4962 14.776 19.4962 12.958C19.4962 11.158 18.1643 9.718 16.3463 9.718C14.5463 9.718 13.1603 11.14 13.1603 12.958C13.1603 14.794 14.5463 16.234 16.3463 16.234ZM23.2723 18.25V7.72H25.6843V8.944C26.3503 8.062 27.3943 7.504 28.6903 7.504C30.3463 7.504 31.4803 8.17 32.1103 9.322C32.8303 8.224 34.0543 7.504 35.5663 7.504C38.4283 7.504 39.8503 9.16 39.8503 11.914V18.25H37.3663V12.112C37.3663 10.582 36.5923 9.61 35.0803 9.61C33.7663 9.61 32.7583 10.51 32.7583 12.364V18.25H30.2923V12.04C30.2923 10.528 29.5363 9.61 28.0783 9.61C26.7103 9.61 25.7023 10.546 25.7023 12.418V18.25H23.2723ZM45.1972 18.466C42.8392 18.466 41.3632 17.566 40.5172 15.91L42.7672 14.83C43.2712 15.82 44.1532 16.36 45.3052 16.36C46.5112 16.36 47.1052 15.784 47.1052 15.082C47.1052 14.308 45.9352 14.164 44.6392 13.876C42.8392 13.498 40.9492 12.922 40.9492 10.708C40.9492 9.016 42.5872 7.486 45.0892 7.486C47.2312 7.486 48.5812 8.314 49.3912 9.664L47.3212 10.708C46.8892 9.97 46.0972 9.502 45.0892 9.502C43.9372 9.502 43.3972 10.042 43.3972 10.636C43.3972 11.338 44.2252 11.518 45.8092 11.86C47.5372 12.202 49.5172 12.814 49.5172 15.028C49.5172 16.504 48.2032 18.466 45.1972 18.466ZM59.9517 7.72V18.25H57.5397V17.044C56.8737 17.926 55.8657 18.466 54.5157 18.466C51.9957 18.466 50.4657 16.828 50.4657 13.966V7.72H52.9317V13.714C52.9317 15.352 53.6517 16.36 55.1817 16.36C56.5317 16.36 57.5217 15.352 57.5217 13.498V7.72H59.9517ZM61.452 18.25V7.72H63.864V9.016C64.566 8.098 65.646 7.504 67.014 7.504C69.66 7.504 71.19 9.142 71.19 12.004V18.25H68.724V12.256C68.724 10.618 67.932 9.61 66.348 9.61C64.962 9.61 63.882 10.618 63.882 12.472V18.25H61.452ZM80.8765 18.07V16.846C80.1025 17.854 78.8605 18.466 77.4385 18.466C74.9005 18.466 72.2545 16.45 72.2545 12.994C72.2545 9.502 74.8105 7.504 77.4745 7.504C78.8605 7.504 80.0845 8.116 80.8585 9.07V7.72H83.2885V17.98C83.2885 20.932 81.3985 23.344 77.8525 23.344C75.1165 23.344 73.4065 22.066 72.4525 20.32L74.6125 19.006C75.3865 20.428 76.2145 21.112 77.8885 21.112C79.7245 21.112 80.8765 19.672 80.8765 18.07ZM77.8345 16.234C79.6525 16.234 80.9845 14.776 80.9845 12.958C80.9845 11.158 79.6525 9.718 77.8345 9.718C76.0345 9.718 74.6485 11.14 74.6485 12.958C74.6485 14.794 76.0345 16.234 77.8345 16.234ZM89.174 18.25V5.11H92.756C97.184 5.11 99.704 7.954 99.704 11.68C99.704 15.424 96.86 18.25 92.864 18.25H89.174ZM92.468 7.378H91.622V15.982H92.576C95.456 15.982 97.256 14.128 97.256 11.68C97.256 9.16 95.726 7.378 92.468 7.378ZM106.012 18.466C102.7 18.466 100.45 16.054 100.45 13.012C100.45 9.934 102.844 7.504 105.922 7.504C109.054 7.504 111.34 9.808 111.34 12.922V13.84H102.772C103.114 15.334 104.284 16.324 106.012 16.324C107.38 16.324 108.424 15.604 108.928 14.47L110.926 15.622C110.008 17.332 108.388 18.466 106.012 18.466ZM105.922 9.646C104.464 9.646 103.33 10.51 102.898 11.806H108.874C108.514 10.384 107.434 9.646 105.922 9.646ZM115.182 18.25L111.168 7.72H113.706L116.424 15.136L119.088 7.72H121.59L117.63 18.25H115.182ZM126.895 18.466C123.583 18.466 121.333 16.054 121.333 13.012C121.333 9.934 123.727 7.504 126.805 7.504C129.937 7.504 132.223 9.808 132.223 12.922V13.84H123.655C123.997 15.334 125.167 16.324 126.895 16.324C128.263 16.324 129.307 15.604 129.811 14.47L131.809 15.622C130.891 17.332 129.271 18.466 126.895 18.466ZM126.805 9.646C125.347 9.646 124.213 10.51 123.781 11.806H129.757C129.397 10.384 128.317 9.646 126.805 9.646ZM133.311 18.25V4.93H135.759V18.25H133.311ZM142.273 18.466C139.231 18.466 136.819 16.018 136.819 12.994C136.819 9.916 139.231 7.504 142.273 7.504C145.297 7.504 147.727 9.916 147.727 12.994C147.727 16.018 145.297 18.466 142.273 18.466ZM142.273 16.18C144.001 16.18 145.333 14.74 145.333 12.994C145.333 11.212 144.001 9.79 142.273 9.79C140.527 9.79 139.213 11.212 139.213 12.994C139.213 14.74 140.527 16.18 142.273 16.18ZM154.648 18.466C153.208 18.466 151.948 17.944 151.21 17.008V23.092H148.798V7.72H151.21V9.124C151.948 8.134 153.19 7.504 154.63 7.504C157.276 7.504 159.814 9.502 159.814 12.994C159.814 16.45 157.186 18.466 154.648 18.466ZM154.252 16.234C156.034 16.234 157.42 14.794 157.42 12.958C157.42 11.14 156.034 9.718 154.252 9.718C152.434 9.718 151.12 11.158 151.12 12.958C151.12 14.776 152.434 16.234 154.252 16.234ZM166.129 18.466C162.817 18.466 160.567 16.054 160.567 13.012C160.567 9.934 162.961 7.504 166.039 7.504C169.171 7.504 171.457 9.808 171.457 12.922V13.84H162.889C163.231 15.334 164.401 16.324 166.129 16.324C167.497 16.324 168.541 15.604 169.045 14.47L171.043 15.622C170.125 17.332 168.505 18.466 166.129 18.466ZM166.039 9.646C164.581 9.646 163.447 10.51 163.015 11.806H168.991C168.631 10.384 167.551 9.646 166.039 9.646ZM172.546 18.25V7.72H174.958V9.286C175.444 8.242 176.344 7.72 177.658 7.72C178.432 7.72 179.026 7.9 179.512 8.17L178.594 10.474C178.234 10.24 177.838 10.06 177.136 10.06C175.714 10.06 174.976 10.816 174.976 12.634V18.25H172.546Z" fill="black"></path> </g> <defs> <clipPath id="clip0_1_13833"> <rect width="180" height="23.5" fill="white" transform="translate(0 0.25)"></rect> </clipPath> </defs> </svg> </div> <ul class="nav-btm-menu" data-target="navMenu"> <li class="nav-item"> <a href="/learn">Learn</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/codelab">Code Lab</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/foldables-and-largescreens">Foldables and Large Screens</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/one-ui-beta">One UI Beta</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/develop">Develop</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <p class="contents-item-title">Mobile/Wearable</p> <ul class="contents-item-list"> <li class="nav-item"> <a href="/galaxy-gamedev">Galaxy GameDev</a> </li> <li class="nav-item"> <a href="/galaxy-themes">Galaxy Themes</a> </li> <li class="nav-item"> <a href="/galaxy-watch">Galaxy Watch</a> </li> <li class="nav-item"> <a href="/health">Health</a> </li> <li class="nav-item"> <a href="/blockchain">Samsung Blockchain</a> </li> <li class="nav-item"> <a href="/samsung-dex">Samsung DeX</a> </li> <li class="nav-item"> <a href="/iap">Samsung IAP</a> </li> <li class="nav-item"> <a href="/internet">Samsung Internet</a> </li> <li class="nav-item"> <a href="/wallet">Samsung Wallet</a> </li> <li class="nav-item"> <a href="/mobile"> <span class="contents-underline">See all mobile products</span> <span class="arrow"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.45654 11.9L9.35659 6.99999L4.45654 2.09995" stroke="currentColor" stroke-width="1.05001"></path> </svg> </span> </a> <ul class="contents-item-list navbar-depth3 d-none"> <li class="d-none"> <a href="/pay/partner"><span>Samsung Pay Partner</span></a> </li> <li class="d-none"> <a href="/pay"><span>Samsung Pay</span></a> </li> <li class="d-none"> <a href="/galaxy-ar-emoji"><span>Galaxy AR Emoji</span></a> </li> <li class="d-none"> <a href="/galaxy-accessory"><span>Galaxy Accessory</span></a> </li> <li class="d-none"> <a href="/galaxy-edge"><span>Galaxy Edge</span></a> </li> <li class="d-none"> <a href="/galaxy-z"><span>Galaxy Z</span></a> </li> <li class="d-none"> <a href="/galaxy-performance"><span>Galaxy Performance</span></a> </li> <li class="d-none"> <a href="/galaxy-fm-radio"><span>Galaxy FM Radio</span></a> </li> <li class="d-none"> <a href="/galaxy-spen-remote"><span>Galaxy S Pen Remote</span></a> </li> <li class="d-none"> <a href="/galaxy-sensor-extension"><span>Galaxy Sensor Extension</span></a> </li> <li class="d-none"> <a href="/penup"><span>PENUP</span></a> </li> <li class="d-none"> <a href="/automation"><span>Samsung Automation</span></a> </li> <li class="d-none"> <a href="/neural"><span>Samsung Neural</span></a> </li> <li class="d-none"> <a href="/teegris"><span>Samsung TEEGRIS</span></a> </li> <li class="d-none"> <a href="/ese"><span>Samsung eSE SDK</span></a> </li> <li class="d-none"> <a href="/galaxy-watch-tizen"><span>Galaxy Watch for Tizen</span></a> </li> <li class="d-none"> <a href="/watch-face-studio"><span>Watch Face Studio</span></a> </li> <li class="d-none"> <a href="/one-ui-watch-tizen"><span>One UI Watch for Tizen</span></a> </li> <li class="d-none"> <a href="/gws-converter"><span>Galaxy Watch Studio Converter</span></a> </li> <li class="d-none"> <a href="/galaxy-watch-iap"><span>Samsung IAP for Galaxy Watch (Tizen)</span></a> </li> </ul> </li> </ul> </div> <div class="contents-item"> <p class="contents-item-title">Visual Display</p> <ul class="contents-item-list"> <li><a href="/smarttv/develop">Smart TV</a></li> <li><a href="/smarttv/hospitality-display">Smart Hospitality Display</a></li> <li><a href="/smarttv/signage">Smart Signage</a></li> </ul> </div> <div class="contents-item"> <p class="contents-item-title">Digital Appliance</p> <ul class="contents-item-list"> <li><a href="/family-hub">Family Hub</a></li> </ul> </div> <div class="contents-item"> <p class="contents-item-title">Platform</p> <ul class="contents-item-list"> <li><a href="/bixby">Bixby</a></li> <li><a href="/knox">Knox</a></li> <li><a href="/smartthings">SmartThings</a></li> <li><a href="/tizen">Tizen.NET</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/design" class="selected">Design</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/design-system">Design System</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/one-ui" class="selected">One UI</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/one-ui-watch">One UI Watch</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/smarttv/design">Smart TV</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/distribute">Distribute</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/galaxy-store">Galaxy Store</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/tv-seller-office">TV Seller Office</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/galaxy-games">Galaxy Store Games</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/instant-plays">Instant Plays</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/support">Support</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="https://forum.developer.samsung.com">Forums</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/dev-support">Dev Support</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/remote-test-lab">Remote Test Lab</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/android-usb-driver">Samsung Android USB Driver</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/galaxy-emulator-skin">Galaxy Emulator Skin</a></li> </ul> </div> </div> </div> </li> <li class="nav-item"> <a href="/connect">Connect</a> <i class="nav-btm-menu-arrow" role="button" data-target="navArrow"></i> <div class="nav-dynamic-menu"> <div class="dynamic-menu-item-contents"> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/news">News and Updates</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="/events">Events</a></li> </ul> </div> <div class="contents-item"> <ul class="contents-item-list"> <li><a href="https://www.samsungdeveloperconference.com/">Samsung Developer Conference</a></li> </ul> </div> </div> </div> </li> <li class="single nav-item"> <a href="/blog">Blog</a> </li>  <li class="only-mobile"><a href="/login?redirectURL=%2Fone-ui%2Flargescreen-and-foldable%2Fdesigning_for_foldable.html">Sign in</a></li> </ul> </div> </div> </div>  <div class="sdp-header-search" data-target="headerSearch"> <div class="header-search-body"> <div class="base-search-input-box"> <input type="text" class="base-search-input" placeholder="Search developer.samsung.com" data-target="searchInput">  <svg class="icon-remove" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-target="searchRemove"> <circle cx="12" cy="12" r="12" fill="#EAEAEA"></circle> <path d="M7.33301 7.3335L16.6663 16.6668" stroke="#9E9E9E" stroke-width="1.06667"></path> <path d="M16.6663 7.3335L7.33301 16.6668" stroke="#9E9E9E" stroke-width="1.06667"></path> </svg>  <svg class="icon-search" width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="Group"> <path id="Vector" d="M37.4072 37.4034L26.1128 26.0347" stroke="black" stroke-width="3.60003"></path> <path id="Vector_2" d="M30.5248 16.5413C30.5248 24.2637 24.2649 30.5245 16.5437 30.5245C8.8224 30.5245 2.5625 24.2637 2.5625 16.5413C2.5625 8.81893 8.8224 2.55811 16.5437 2.55811C24.2649 2.55811 30.5248 8.81893 30.5248 16.5413Z" stroke="black" stroke-width="3.60003"></path> </g> </svg> </div> </div> <div class="header-search-recommend"> <ul class="recommend-ul">  <li><p>Recommendations</p></li> <li class="sdp-search-result-item" attr-keyword="Blog"> <a href="/search?query=Blog"> <span>Blog</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Code Lab"> <a href="/search?query=Code%20Lab"> <span>Code Lab</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Foldable and Large Screen Optimization"> <a href="/search?query=Foldable%20and%20Large%20Screen%20Optimization"> <span>Foldable and Large Screen Optimization</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Health"> <a href="/search?query=Health"> <span>Health</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="Samsung Wallet"> <a href="/search?query=Samsung%20Wallet"> <span>Samsung Wallet</span> </a> </li> <li class="sdp-search-result-item" attr-keyword="SDC24"> <a href="/search?query=SDC24"> <span>SDC24</span> </a> </li></ul> </div> <i class="header-search-close" data-close="headerSearch"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.00017 1L13 12.9998" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M1 12.9998L12.9998 1" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i> </div>  <div class="header-dimmed" data-target="subNavDimmed"></div> <div class="header-breadcrumb-fixed">  <div class="header-sub-nav doc"> <div class="header-container"> <div class="sub-nav-breadcrumb"> <ul class="breadcrumb-item-list"> <li><a href="/one-ui">OneUI</a></li> </ul> </div> <div class="sub-nav-util"> <div class="util-nav"> <div class="nav-item"> <a href="/one-ui" class="item-title">Overview </a> </div><div class="nav-item selected"> <a href="/one-ui/overview.html" class="item-title selected">Docs </a> </div> </div>  </div> </div> </div>  <div class="header-breadcrumb doc">  <i class="breadcrumb-link-back d-none" id="nav-back"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.375 16.75L3 10.375L9.375 4" stroke="#1E1E1E" stroke-width="1.5"></path> <path d="M3 10.375H17" stroke="#1E1E1E" stroke-width="1.5"></path> </svg> </i>  <i class="breadcrumb-link-list" data-target="breadcrumbFilter" id="mobile-lnb-icon"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 3H3V17H17V3Z" stroke="black" stroke-width="1.5"></path> <path d="M9 7H14" stroke="black" stroke-width="1.5"></path> <path d="M9 10H14" stroke="black" stroke-width="1.5"></path> <path d="M9 13H14" stroke="black" stroke-width="1.5"></path> <circle cx="6.9502" cy="7.05078" r="0.75" fill="black"></circle> <circle cx="6.9502" cy="10.0508" r="0.75" fill="black"></circle> <circle cx="6.9502" cy="13.0508" r="0.75" fill="black"></circle> </svg> </i> <div class="breadcrumb-link-group"> <div class="breadcrumb-link-text-area"> <span class="breadcrumb-link"> <a href="/one-ui">OneUI</a> </span> </div> </div> <i class="breadcrumb-link-arrow" data-target="moreLink"></i> <ul class="breadcrumb-sub-menu"> <li> <a href="/one-ui" class=" " data-title="Overview"> Overview </a> </li> <li> <a href="/one-ui/overview.html" class="selected " data-title="Docs"> Docs </a> </li> </ul> </div> </div> </header> <div id="el-sdp-container" class="sdp-container sdp-ly-document tech-document " attr-doc-type="tech-doc" attr-program-url="/one-ui"> <div class="inner-wrap"> <aside class="sdp-lnb" data-target="sdpLnb">  <div class="sdp-lnb-mobile"> <div class="nav-btm-logo"> <i role="button" class="global-nav-menu" data-target="gnb"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 4.125H2" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M2 10.125H18" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M18 16.125H2" stroke="#1E1E1E" stroke-width="1.5"/> </svg> </i> <svg width="180" height="24" viewBox="0 0 180 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1_13833)"> <path d="M5.184 18.43C2.826 18.43 1.26 17.422 0.054 16.072L2.286 14.308C2.952 15.46 3.96 16.09 5.166 16.09C6.462 16.09 7.164 15.244 7.164 14.326C7.164 13.228 5.814 12.868 4.428 12.436C2.646 11.86 0.702 11.194 0.702 8.692C0.702 6.586 2.538 4.93 5.058 4.93C7.164 4.93 8.406 5.74 9.468 6.838L7.452 8.368C6.894 7.522 6.102 7.108 5.076 7.108C3.87 7.108 3.24 7.756 3.24 8.602C3.24 9.664 4.482 9.97 5.922 10.456C7.704 11.032 9.72 11.824 9.72 14.344C9.72 16.414 8.064 18.43 5.184 18.43ZM15.9503 18.466C13.4123 18.466 10.7663 16.45 10.7663 12.994C10.7663 9.502 13.3223 7.504 15.9863 7.504C17.3723 7.504 18.5963 8.062 19.3703 8.98V7.72H21.8003V18.25H19.3703V16.882C18.5963 17.872 17.3363 18.466 15.9503 18.466ZM16.3463 16.234C18.1643 16.234 19.4962 14.776 19.4962 12.958C19.4962 11.158 18.1643 9.718 16.3463 9.718C14.5463 9.718 13.1603 11.14 13.1603 12.958C13.1603 14.794 14.5463 16.234 16.3463 16.234ZM23.2723 18.25V7.72H25.6843V8.944C26.3503 8.062 27.3943 7.504 28.6903 7.504C30.3463 7.504 31.4803 8.17 32.1103 9.322C32.8303 8.224 34.0543 7.504 35.5663 7.504C38.4283 7.504 39.8503 9.16 39.8503 11.914V18.25H37.3663V12.112C37.3663 10.582 36.5923 9.61 35.0803 9.61C33.7663 9.61 32.7583 10.51 32.7583 12.364V18.25H30.2923V12.04C30.2923 10.528 29.5363 9.61 28.0783 9.61C26.7103 9.61 25.7023 10.546 25.7023 12.418V18.25H23.2723ZM45.1972 18.466C42.8392 18.466 41.3632 17.566 40.5172 15.91L42.7672 14.83C43.2712 15.82 44.1532 16.36 45.3052 16.36C46.5112 16.36 47.1052 15.784 47.1052 15.082C47.1052 14.308 45.9352 14.164 44.6392 13.876C42.8392 13.498 40.9492 12.922 40.9492 10.708C40.9492 9.016 42.5872 7.486 45.0892 7.486C47.2312 7.486 48.5812 8.314 49.3912 9.664L47.3212 10.708C46.8892 9.97 46.0972 9.502 45.0892 9.502C43.9372 9.502 43.3972 10.042 43.3972 10.636C43.3972 11.338 44.2252 11.518 45.8092 11.86C47.5372 12.202 49.5172 12.814 49.5172 15.028C49.5172 16.504 48.2032 18.466 45.1972 18.466ZM59.9517 7.72V18.25H57.5397V17.044C56.8737 17.926 55.8657 18.466 54.5157 18.466C51.9957 18.466 50.4657 16.828 50.4657 13.966V7.72H52.9317V13.714C52.9317 15.352 53.6517 16.36 55.1817 16.36C56.5317 16.36 57.5217 15.352 57.5217 13.498V7.72H59.9517ZM61.452 18.25V7.72H63.864V9.016C64.566 8.098 65.646 7.504 67.014 7.504C69.66 7.504 71.19 9.142 71.19 12.004V18.25H68.724V12.256C68.724 10.618 67.932 9.61 66.348 9.61C64.962 9.61 63.882 10.618 63.882 12.472V18.25H61.452ZM80.8765 18.07V16.846C80.1025 17.854 78.8605 18.466 77.4385 18.466C74.9005 18.466 72.2545 16.45 72.2545 12.994C72.2545 9.502 74.8105 7.504 77.4745 7.504C78.8605 7.504 80.0845 8.116 80.8585 9.07V7.72H83.2885V17.98C83.2885 20.932 81.3985 23.344 77.8525 23.344C75.1165 23.344 73.4065 22.066 72.4525 20.32L74.6125 19.006C75.3865 20.428 76.2145 21.112 77.8885 21.112C79.7245 21.112 80.8765 19.672 80.8765 18.07ZM77.8345 16.234C79.6525 16.234 80.9845 14.776 80.9845 12.958C80.9845 11.158 79.6525 9.718 77.8345 9.718C76.0345 9.718 74.6485 11.14 74.6485 12.958C74.6485 14.794 76.0345 16.234 77.8345 16.234ZM89.174 18.25V5.11H92.756C97.184 5.11 99.704 7.954 99.704 11.68C99.704 15.424 96.86 18.25 92.864 18.25H89.174ZM92.468 7.378H91.622V15.982H92.576C95.456 15.982 97.256 14.128 97.256 11.68C97.256 9.16 95.726 7.378 92.468 7.378ZM106.012 18.466C102.7 18.466 100.45 16.054 100.45 13.012C100.45 9.934 102.844 7.504 105.922 7.504C109.054 7.504 111.34 9.808 111.34 12.922V13.84H102.772C103.114 15.334 104.284 16.324 106.012 16.324C107.38 16.324 108.424 15.604 108.928 14.47L110.926 15.622C110.008 17.332 108.388 18.466 106.012 18.466ZM105.922 9.646C104.464 9.646 103.33 10.51 102.898 11.806H108.874C108.514 10.384 107.434 9.646 105.922 9.646ZM115.182 18.25L111.168 7.72H113.706L116.424 15.136L119.088 7.72H121.59L117.63 18.25H115.182ZM126.895 18.466C123.583 18.466 121.333 16.054 121.333 13.012C121.333 9.934 123.727 7.504 126.805 7.504C129.937 7.504 132.223 9.808 132.223 12.922V13.84H123.655C123.997 15.334 125.167 16.324 126.895 16.324C128.263 16.324 129.307 15.604 129.811 14.47L131.809 15.622C130.891 17.332 129.271 18.466 126.895 18.466ZM126.805 9.646C125.347 9.646 124.213 10.51 123.781 11.806H129.757C129.397 10.384 128.317 9.646 126.805 9.646ZM133.311 18.25V4.93H135.759V18.25H133.311ZM142.273 18.466C139.231 18.466 136.819 16.018 136.819 12.994C136.819 9.916 139.231 7.504 142.273 7.504C145.297 7.504 147.727 9.916 147.727 12.994C147.727 16.018 145.297 18.466 142.273 18.466ZM142.273 16.18C144.001 16.18 145.333 14.74 145.333 12.994C145.333 11.212 144.001 9.79 142.273 9.79C140.527 9.79 139.213 11.212 139.213 12.994C139.213 14.74 140.527 16.18 142.273 16.18ZM154.648 18.466C153.208 18.466 151.948 17.944 151.21 17.008V23.092H148.798V7.72H151.21V9.124C151.948 8.134 153.19 7.504 154.63 7.504C157.276 7.504 159.814 9.502 159.814 12.994C159.814 16.45 157.186 18.466 154.648 18.466ZM154.252 16.234C156.034 16.234 157.42 14.794 157.42 12.958C157.42 11.14 156.034 9.718 154.252 9.718C152.434 9.718 151.12 11.158 151.12 12.958C151.12 14.776 152.434 16.234 154.252 16.234ZM166.129 18.466C162.817 18.466 160.567 16.054 160.567 13.012C160.567 9.934 162.961 7.504 166.039 7.504C169.171 7.504 171.457 9.808 171.457 12.922V13.84H162.889C163.231 15.334 164.401 16.324 166.129 16.324C167.497 16.324 168.541 15.604 169.045 14.47L171.043 15.622C170.125 17.332 168.505 18.466 166.129 18.466ZM166.039 9.646C164.581 9.646 163.447 10.51 163.015 11.806H168.991C168.631 10.384 167.551 9.646 166.039 9.646ZM172.546 18.25V7.72H174.958V9.286C175.444 8.242 176.344 7.72 177.658 7.72C178.432 7.72 179.026 7.9 179.512 8.17L178.594 10.474C178.234 10.24 177.838 10.06 177.136 10.06C175.714 10.06 174.976 10.816 174.976 12.634V18.25H172.546Z" fill="black"/> </g> <defs> <clipPath id="clip0_1_13833"> <rect width="180" height="23.5" fill="white" transform="translate(0 0.25)"/> </clipPath> </defs> </svg> </div> <div class="header-breadcrumb web"> <i class="breadcrumb-close" data-close="breadcrumbFilter"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.00017 4L16 15.9998" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M4 15.9998L15.9998 4" stroke="#1E1E1E" stroke-width="1.5"/> </svg> </i> <div class="breadcrumb-link-group"> <div class="breadcrumb-link-text-area"> <span class="breadcrumb-link"> <a href="/one-ui">OneUI</a> </span> </div> </div> </div> </div> <div class="sdp-lnb-wrapper">  <div class="sdp-lnb-filter"> <div class="filter-input-group"> <svg class="filter-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 15H10H12" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M4 10H10H16" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M2 5H10H18" stroke="#1E1E1E" stroke-width="1.5"/> </svg> <input class="filter-input" type="text" placeholder="Filter" data-input="filter" /> <svg class="filter-close" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-remove="filterInput"> <path d="M4.00017 4L16 15.9998" stroke="#1E1E1E" stroke-width="1.5"/> <path d="M4 15.9998L15.9998 4" stroke="#1E1E1E" stroke-width="1.5"/> </svg> </div> </div>  <div class="sdp-lnb-menu"> <ul class="menu-accordion depth01" data-target="lnbAccordion"> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui/one_ui6.html' onclick="handleLink(event, /one-ui/one_ui6.html) class="nav-link none-child"> What’s new in One UI 6 </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <a href='/one-ui/index.html' onclick="handleLink(event, /one-ui/index.html) class="nav-link none-child"> Overview </a> </p> </div> </li> <li> <div class="menu-accordion-header"> <p> <span>Structure</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/structure/basic.html' class="nav-link none-child"> <span>Basic structure</span> </a> </li> <li> <a href='/one-ui/structure/visual-depth.html' class="nav-link none-child"> <span>Visual depth</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Layout</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/layout/basic.html' class="nav-link none-child"> <span>Basic layout</span> </a> </li> <li> <a href='/one-ui/layout/grid.html' class="nav-link none-child"> <span>Grid system</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Components</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/comp/app-bar.html' class="nav-link none-child"> <span>App bar</span> </a> </li> <li> <a href='/one-ui/comp/bottom-bar.html' class="nav-link none-child"> <span>Bottom bar</span> </a> </li> <li> <a href='/one-ui/comp/bottom-navigation.html' class="nav-link none-child"> <span>Bottom navigation</span> </a> </li> <li> <a href='/one-ui/comp/button.html' class="nav-link none-child"> <span>Buttons</span> </a> </li> <li> <a href='/one-ui/comp/dialog.html' class="nav-link none-child"> <span>Dialog</span> </a> </li> <li> <a href='/one-ui/comp/list.html' class="nav-link none-child"> <span>Lists</span> </a> </li> <li> <a href='/one-ui/comp/search.html' class="nav-link none-child"> <span>Search</span> </a> </li> <li> <a href='/one-ui/comp/toast.html' class="nav-link none-child"> <span>Toasts</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Color</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/color/system.html' class="nav-link none-child"> <span>Color system and usage</span> </a> </li> <li> <a href='/one-ui/color/theme.html' class="nav-link none-child"> <span>Theme</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Iconography</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/iconography/background.html' class="nav-link none-child"> <span>Background</span> </a> </li> <li> <a href='/one-ui/iconography/symbol.html' class="nav-link none-child"> <span>Symbol</span> </a> </li> <li> <a href='/one-ui/iconography/color.html' class="nav-link none-child"> <span>Icon color</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Motion</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/motion/intro.html' class="nav-link none-child"> <span>Introduction</span> </a> </li> <li> <a href='/one-ui/motion/basic.html' class="nav-link none-child"> <span>Motion basics and usage</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Sound & Haptic</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/sound-and-haptic/sound.html' class="nav-link none-child"> <span>Sound</span> </a> </li> <li> <a href='/one-ui/sound-and-haptic/haptic.html' class="nav-link none-child"> <span>Haptic</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Writing</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/writing/focused-and-purposeful.html' class="nav-link none-child"> <span>Focused and purposeful</span> </a> </li> <li> <a href='/one-ui/writing/simple-and-human.html' class="nav-link none-child"> <span>Simple and human</span> </a> </li> <li> <a href='/one-ui/writing/empowering.html' class="nav-link none-child"> <span>Empowering and engaging</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header"> <p> <span>Accessibility</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02"> <li> <a href='/one-ui/accessibility/intro.html' class="nav-link none-child"> <span>Introduction</span> </a> </li> <li> <a href='/one-ui/accessibility/screen-reader.html' class="nav-link none-child"> <span>Screen reader</span> </a> </li> <li> <a href='/one-ui/accessibility/focus-order.html' class="nav-link none-child"> <span>Focus order</span> </a> </li> <li> <a href='/one-ui/accessibility/color-contrast.html' class="nav-link none-child"> <span>Color and contrast</span> </a> </li> <li> <a href='/one-ui/accessibility/layout-and-typo.html' class="nav-link none-child"> <span>Layout and typography</span> </a> </li> <li> <a href='/one-ui/accessibility/interaction-and-control.html' class="nav-link none-child"> <span>Interaction and control</span> </a> </li> <li> <a href='/one-ui/accessibility/content.html' class="nav-link none-child"> <span>Content</span> </a> </li> </ul> </li> <li> <div class="menu-accordion-header open"> <p> <span>Large screen & Foldable</span> </p> <i class="icon-arrow-down"></i> </div> <ul class="menu-accordion depth02 show"> <li> <a href='/one-ui/largescreen-and-foldable/intro.html' class="nav-link none-child"> <span>Designing for large screens</span> </a> </li> <li> <a href='/one-ui/largescreen-and-foldable/large_screen_layout.html' class="nav-link none-child"> <span>Layout design for large screens</span> </a> </li> <li> <a href='/one-ui/largescreen-and-foldable/designing_for_foldable.html' class="nav-link selected none-child"> <span>Designing for foldables</span> </a> </li> </ul> </li> </ul> </div> </div> </aside> <main role="main" id="el-main-container" class="main-container has-toc"> <div class="inner-container col"> <div class="inner-sec mkdown-docs"> <nav class="nav-breadcrumb" aria-label="breadcrumb"> <ol id="inner-el-breadcrumb" class="breadcrumb"> <li class="breadcrumb-item mobile-show"> <a class="item-text has-link" href="/one-ui"> OneUI </a> </li> <li class="breadcrumb-item mobile-show"> <a class="item-text " > Large screen & Foldable </a> </li> </ol> </nav> <p class="mk-wall-cta" > </p> <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">    <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/style3.css"> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/audio_control.css"> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/snippets.css"> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/sdp.one-ui.min.css"> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/m1002/css/sdp.vendors.min.css"> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/m1002/css/sdp.global.min.css"> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/m1002/css/sdp.app.min.css"> <link rel="stylesheet" href="https://d3unf4s5rp9dfh.cloudfront.net/public/m1002/css/sdp.docs.min.css"> <script src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/snippet_scripts.js"></script> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/mediastyler.js"></script> <title>OneUI - Design | Samsung Developers</title> <style> summary { list-style: none; } details .summary-inner { transition: 0.5s ease-in; transform: rotate(0deg); } details .summary-inner:before { content: url(images/icon_toggle_open.svg); position: absolute; top: 0rem; right: 0.7rem; transform: rotate(0); transform-origin: .6rem 50%; transition: .25s ease; } details[open] .summary-inner:before { transform: rotate(-180deg); } </style></head> <body>  <div class="mb-80 borderbottom-1"> <h1 class="oneui-h1">Designing for foldables</h1> <ul class="p-imgcon oneui-p"> <li> Samsung unveiled the Galaxy Fold in 2019, the first foldable device with One UI. Since then, we've partnered with companies around the world to optimize user experiences for foldable devices.<br> Galaxy Z Fold and Z Flip devices provide a seamless experience while users open and close their device. </li> <li> Apps should provide an optimized experience for all situations, including when the device is open, when it is closed, or when it is partially folded. These guidelines can help you deliver enjoyable and productive experiences on foldable devices. </li> </ul> <div class="img_container mb-80"> <img src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3-1-1_Designing_for_Foldable2.png" class="oneui-img" loading="lazy"> </div> </div> <div class="mt-80"> <h2 class="h1-h2-P oneui-h2">App continuity and responsive layouts</h2> <ul class="p-imgcon oneui-p"> <li> Galaxy Z Fold and Z Flip devices have two screens on the same device. The cover screen is visible when the device is closed, and the main screen is visible when the device is open. </li> </ul> <div class="img_container mb-40"> <div id="video_wrap"> <video id="sVideo1" loop="" muted="" src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3_Foldable_App_continuity_Responsive_layout_01.mp4" type="video/mp4"></video> <div id="sVideo1_playButton" class="video_playButton" onclick="playPause('sVideo1','sVideo1_playButton')"></div> </div> </div> <ul class="p-imgcon oneui-p"> <li> Since users open and close their devices frequently, continuity between the two screens is important. Transitions between the cover screen and main screen should be seamless and intuitive. When users open their device, your app should appear on the main screen, right where the user left off. </li> </ul> <div class="img_container mb-20"> <div id="video_wrap"> <video id="sVideo2" loop="" muted="" src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3_Foldable_App_continuity_Responsive_layout_02.mp4" type="video/mp4"></video> <div id="sVideo2_playButton" class="video_playButton" onclick="playPause('sVideo2','sVideo2_playButton')"></div> </div> </div> <div class="img_container mb-60"> <img src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3-1-4_App_continuity_not.png" class="oneui-img" loading="lazy"> <div class="horizontal oneui-ol mt-10"> <p class="oneui-li"> <span class="numbering">①</span>Apps should be resizable </p> <p class="oneui-li"> <span class="numbering">②</span>Apps should support landscape </p> <p class="oneui-li"> <span class="numbering">③</span>Apps should provide a large screen layout </p> </div> </div> <div class="oneui-h4 find_more_ti">Find out more on</div> <ul class="abbpar pb-80"> <li class="btn_more target_blank" onclick="window.open('https://developer.android.com/guide/topics/large-screens/learn-about-foldables#app_continuity')"> <div> <p>App continuity</p> <p>Android Developers</p> </div> </li> <li class="btn_more target_blank" onclick="window.open('https://developer.samsung.com/galaxy-z/app-continuity.html')"> <div> <p>App continuity</p> <p>Samsung Developers</p> </div> </li> </ul> <details class="toggle mb-60" open=""> <summary class="pb-20 borderbottom-1"> <div class="summary-inner oneui-h4 find_more_ti">Things to check</div> </summary> <div class="borderbottom-1" style="background-color: rgb(250,250,250); padding-left: 20PX;"> <div class="mb-40" style="padding-top: 50px;"> <li> 1. When the user switches to a different screen, your app should fill the entire screen. </li> <li>2. If the user is viewing scrollable content, keep the scroll position the same when switching to a different screen.</li> <li>3. If the user was entering text before switching screens, the text input and keyboard should remain when switching to a different screen.</li> </div> </div> </details> <ul class="p-imgcon oneui-p"> <li> A responsive layout is also important for continuity between screens. Since Z Fold users open and close their devices frequently, your app should provide an optimized layout for each screen. </li> </ul> <div class="img_container mb-40"> <div id="video_wrap"> <video id="sVideo3" loop="" muted="" src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3_Foldable_App_continuity_Responsive_layout_03.mp4" type="video/mp4"></video> <div id="sVideo3_playButton" class="video_playButton" onclick="playPause('sVideo3','sVideo3_playButton')"></div> </div> </div> <div class="oneui-h4 find_more_ti">Find out more on</div> <ul class="abbpar pb-60"> <li class="btn_more target_blank" onclick="window.open('https://developer.android.com/develop/ui/compose/layouts/adaptive/support-different-screen-sizes')"> <div> <p>Different screen sizes</p> <p>Android Developers</p> </div> </li> <li class="btn_more target_blank" onclick="window.open('https://m1.material.io/layout/responsive-ui.html#responsive-ui-grid')"> <div> <p>Responsive UI</p> <p>Material design</p> </div> </li> </ul> <details class="toggle mb-150" open=""> <summary class="pb-20 borderbottom-1"> <div class="summary-inner oneui-h4 find_more_ti">Things to check</div> </summary> <div class="borderbottom-1" style="background-color: rgb(250,250,250); padding-left: 20PX;"> <div class="mb-40" style="padding-top: 50px;"> <li>1. Make sure your app displays correctly on screens with various sizes, widths, and aspect ratios.</li> <li>2. Make sure your app supports landscape orientation.</li> <li>3. Make sure your app displays correctly on both the cover screen and main screen.</li> <li>4. Make sure your app fills the entire screen without letterboxing.</li> </div> </div> </details> </div> <div> <h2 class="oneui-h2">Flex mode</h2> <ul class="p-imgcon oneui-p"> <li> Partially folding the phone allows comfortable use while the device is on a flat surface, such as a table. Content is shown on the top of the screen, which is angled up. Controls and buttons are shown on the bottom of the screen, which lays flat. Apps should automatically adjust when the device is partially folded. </li> </ul> <h3 class="oneui-h3 pt-10">Camera & photo taking</h3> <div class="img_container mb-80"> <div id="video_wrap"> <video id="sVideo4" loop="" muted="" src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3_Foldable_Flex_mode_01.mp4" type="video/mp4"></video> <div id="sVideo4_playButton" class="video_playButton" onclick="playPause('sVideo4','sVideo4_playButton')"></div> </div> </div> <h3 class="oneui-h3">Video playing</h3> <div class="img_container mb-80"> <div id="video_wrap"> <video id="sVideo5" loop="" muted="" src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3_Foldable_Flex_mode_02.mp4" type="video/mp4"></video> <div id="sVideo5_playButton" class="video_playButton" onclick="playPause('sVideo5','sVideo5_playButton')"></div> </div> </div> <h3 class="oneui-h3">Video call</h3> <div class="img_container mb-40"> <div id="video_wrap"> <video id="sVideo6" loop="" muted="" src="https://d3unf4s5rp9dfh.cloudfront.net/OneUI_doc/3_Foldable_Flex_mode_03.mp4" type="video/mp4"></video> <div id="sVideo6_playButton" class="video_playButton" onclick="playPause('sVideo6','sVideo6_playButton')"></div> </div> </div> <div class="oneui-h4 find_more_ti">Find out more on</div> <ul class="abbpar pb-80"> <li class="btn_more target_blank" onclick="window.open('https://developer.samsung.com/galaxy-z/flex-mode.html')"> <div> <p>Flex mode</p> <p>Samsung Developers</p> </div> </li> <li class="btn_more target_blank" onclick="window.open('https://medium.com/androiddevelopers/support-new-form-factors-with-the-new-jetpack-windowmanager-library-4be98f5450da')"> <div> <p>Support New Form factors</p> <p>Medium</p> </div> </li> </ul> <details class="toggle mb-150" open=""> <summary class="pb-20 borderbottom-1"> <div class="summary-inner oneui-h4 find_more_ti">Things to check</div> </summary> <div class="borderbottom-1" style="background-color: rgb(250,250,250); padding-left: 20PX;"> <div class="mb-40" style="padding-top: 50px;"> <li>1. Show content on the top and provide controls on the bottom.</li> <li>2. Show a visual transition effect when changing into or out of Flex mode.</li> <li>3. Avoid positioning interactive elements near the crease in the middle of the screen.</li> <li>4. Some apps or screens may not need to change their layout when the device is partially folded. For example, a list of settings. </li> </div> </div> </details> </div> <div class="navi_btn_wrap"> <ul> <li class="left_btn_box" onclick="location.href='./large_screen_layout.html'"><div><span>Layout design for large screens</span></div></li>  </ul> </div>  <script> function playPause(videoID, videoBtnID) { var oneuiVideo = document.getElementById(videoID); var el = document.getElementById(videoBtnID); if (oneuiVideo.paused) { oneuiVideo.play(); el.className = "video_pause_button"; } else { oneuiVideo.pause(); el.className = "video_playButton"; } } </script> <script> function playPauseCustom(videoID, videoBtnID) { var oneuiVideo = document.getElementById(videoID); var el = document.getElementById(videoBtnID); if (oneuiVideo.paused) { let promise = oneuiVideo.play(); if(promise !== undefined) { promise.then(_ => { // console.log("Success"); }).catch(error => { // console.log(error); el.className = "video_playButton"; }); } el.className = "video_pause_button"; } else { oneuiVideo.pause(); el.className = "video_playButton"; } } const autoplayObjects = document.getElementsByClassName("autoPlay"); for(let i = 0; i < autoplayObjects.length; i++) { playPauseCustom(autoplayObjects[i].id, autoplayObjects[i].id+"_playButton"); } </script>  </body></html> </div> <aside class="etc-aside">  <a href="#app" class="btn-goto-top no-ga"> <span class="sr-only">top of page</span> <span class="icon-top align-middle icon-size-2"> <i class="s-ico s-ico-arrow-top-white"></i> </span> </a> </aside> </div> </main> </div> </div> <footer class="sdp-footer" translate="no" data-component="true"> <div class="sdp-ft-wrap web-d-none"> <a class="navbar-brand" href="/">Samsung Developer</a> </div> <div class="inner-wrap"> <div class="sdp-sitemap"> <div class="sdp-ft-wrap doc-d-none"> <a class="navbar-brand" href="/">Samsung Developer</a> </div> <div class="sdp-ft-wrap"> <div class="ft-header"> <span>Quick Link</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" href="/android-usb-driver"><span>Android USB Driver</span></a> </li> <li class="menu-item"> <a class="item-link" href="/codelab"><span>Code Lab</span></a> </li> <li class="menu-item"> <a class="item-link" href="/galaxy-emulator-skin"><span>Galaxy Emulator Skin</span></a> </li> <li class="menu-item"> <a class="item-link" href="/foldables-and-largescreens"><span>Foldables and Large Screens</span></a> </li> </ul> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" href="/remote-test-lab"><span>Remote Test Lab</span></a> </li> <li class="menu-item"> <a class="item-link" href="/dev-support"><span>Dev Support</span></a> </li> </ul> </div> </div> </div> <div class="sdp-ft-wrap"> <div class="ft-header"> <span>Family Site</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" target="_blank" href="https://bixbydevelopers.com"><span>Bixby</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://developer.samsungknox.com"><span>Knox</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://developer.smartthings.com"><span>SmartThings</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://docs.tizen.org"><span>Tizen</span></a> </li> </ul> <ul class="nav ft-menu-list"> <li class="menu-item"> <a class="item-link" target="_blank" href="https://research.samsung.com"><span>Samsung Research</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://opensource.samsung.com/main"><span>Samsung Open Source</span></a> </li> <li class="menu-item"> <a class="item-link" target="_blank" href="https://www.europe-samsung.com/smsdev/Home/Index"><span>Samsung Dev Spain</span></a> </li> </ul> </div> </div> </div> <div class="sdp-ft-wrap sdp-ft-wrap-w-half"> <div class="ft-header"> <span>Legal</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list"> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <span class="item-link"><span>Terms</span></span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M1.71484 3.85547L6.00056 8.14118L10.2863 3.85547" stroke="currentColor" stroke-width="1.02857"></path> </svg> </div> <ul class="footer-dropdown-list"> <li><a href="/terms">Samsung Developer Terms</a></li> <li><a href="/wallet/terms?type=tos">Samsung Wallet Partner Terms</a></li> <li><a href="/pay/terms?type=tos">Samsung Pay Partner Terms</a></li> </ul> </li> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <span class="item-link"><span>Privacy</span></span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M1.71484 3.85547L6.00056 8.14118L10.2863 3.85547" stroke="currentColor" stroke-width="1.02857"></path> </svg> </div> <ul class="footer-dropdown-list"> <li><a href="/privacy">Samsung Developer Privacy Policy</a></li> <li><a href="/wallet/terms?type=privacy">Samsung Wallet Partner Privacy Policy</a></li> <li><a href="/pay/terms?type=privacy">Samsung Pay Partner Privacy Policy</a></li> </ul> </li> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <a class="item-link" href="/open-source"><span>Open Source License</span></a> </div> </li> <li class="menu-item ft-depth3-inner"> <div class="menu-item-button"> <span class="item-link"><span>Cookie</span></span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M1.71484 3.85547L6.00056 8.14118L10.2863 3.85547" stroke="currentColor" stroke-width="1.02857"></path> </svg> </div> <ul class="footer-dropdown-list"> <li><a href="/cookie-policy">Samsung Developer Cookie Policy</a></li> <li><a href="/wallet/terms?type=cookie">Samsung Wallet Partner Cookie Policy</a></li> <li><a href="/pay/terms?type=cookie">Samsung Pay Partner Cookie Policy</a></li> </ul> </li> </ul> </div> </div> </div>  <div class="sdp-ft-wrap li-mobile"> <div class="ft-header"> <span>Social Communications</span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list ft-sns-list"> <li class="menu-item"> <a class="item-link" href="https://www.facebook.com/samsungdev"><span>Facebook</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://instagram.com/samsung_dev"><span>Instagram</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://twitter.com/samsung_dev"><span>Twitter</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://www.youtube.com/samsungdevelopers"><span>YouTube</span></a> </li> <li class="menu-item"> <a class="item-link" href="/feed"><span>Rss</span></a> </li> <li class="menu-item"> <a class="item-link" href="https://www.linkedin.com/company/samsungdevelopers"><span>Linkedin</span></a> </li> </ul> </div> </div> </div> <div class="sdp-ft-wrap sdp-ft-wrap-w-half"> <div class="ft-header"> <span></span> <button class="toggle-submenu"></button> </div> <div class="ft-depth2-wrap"> <div class="ft-depth2-inner"> <ul class="nav ft-menu-list system-list"> <li class="menu-item"> <a class="item-link" href="/system-status"><span>System Status</span></a> </li> <li class="menu-item"> <a class="item-link" href="/sitemap"><span>Site Map</span></a> </li> </ul> </div> </div> </div> </div> <div class="content"> <ul class="nav ft-menu-list system-list"> <li class="menu-item"> <a class="item-link" href="/system-status"><span>System Status</span></a> </li> <li class="menu-item"> <a class="item-link" href="/sitemap"><span>Site Map</span></a> </li> </ul> <ul class="nav ft-sns-list"> <li class="menu-item"><a class="item-link" href="https://www.facebook.com/samsungdev" target="_blank"><i class="s-ico s-ico-facebook"></i><span class="sr-only">facebook</span></a></li> <li class="menu-item"><a class="item-link" href="https://instagram.com/samsung_dev" target="_blank"><i class="s-ico s-ico-instagram"></i><span class="sr-only">instagram</span></a></li> <li class="menu-item"><a class="item-link" href="https://twitter.com/samsung_dev" target="_blank"><i class="s-ico s-ico-twitter"></i><span class="sr-only">twitter</span></a></li> <li class="menu-item"><a class="item-link" href="https://www.youtube.com/samsungdevelopers" target="_blank"><i class="s-ico s-ico-youtube"></i><span class="sr-only">youtube</span></a></li> <li class="menu-item"><a class="item-link" href="/feed" target="_blank"><i class="s-ico s-ico-rss"></i><span class="sr-only">rss</span></a></li> <li class="menu-item"><a class="item-link" href="https://www.linkedin.com/company/samsungdevelopers" target="_blank"><i class="s-ico s-ico-linkedin"></i><span class="sr-only">linkedin</span></a> </li> </ul> <p class="copyright">Copyright © 2024 SAMSUNG. All rights reserved.</p> </div> </div> </footer> </div> <div id="el-sdp-popup-cookies-wrapper" attr-page-id="cookie-policy-popup">  <article id="el-sdp-popup-cookie" class="base-modal cookie-manager-modal page-modal" data-target="cookieManagerModal"> <section id="modal-main-menu" class="base-modal-dialog"> <div class="base-modal-frame"> <i class="base-modal-close close-button" role="button" data-close="cookieManagerModal"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M1 1L15 15" stroke="black" stroke-width="1.6"/> <path d="M15 1L1 15" stroke="black" stroke-width="1.6"/> </svg> </i> <div class="base-modal-body"> <div class="base-text-group"> <h1 class="text-group-title"> Manage Your Cookies </h1> <p class="text-group-text"> We use cookies to improve your experience on our website and to show you relevant advertising. Manage you settings for our cookies below.</p> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Essential Cookies</h2> <p class="base-section-text"> These cookies are essential as they enable you to move around the website. This category cannot be disabled.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>Samsung Electronics</dd> <dd>.samsungdeveloperconference.com</dd> </dl> </div> </div> </div> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Analytical/Performance Cookies</h2> <p class="base-section-text"> These cookies collect information about how you use our website. for example which pages you visit most often. All information these cookies collect is used to improve how the website works.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> <div class="base-sort" id="performance-select" value="performance"> <label> <input type="radio" name="sort1" hidden checked /> <span class="base-sort-label">NO</span> </label> <label> <input type="radio" name="sort1" hidden /> <span class="base-sort-label">YES</span> </label> </div> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>LinkedIn</dd> <dd>.linkedin.com</dd> <dd>Meta (formerly Facebook)</dd> <dd>.samsungdeveloperconference.com</dd> <dd>Google Inc.</dd> <dd>.samsungdeveloperconference.com</dd> </dl> </div> </div> </div> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Functionality Cookies</h2> <p class="base-section-text"> These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and tailor the website to provide enhanced features and content for you.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> <div class="base-sort" id="functionality-select" value="functionality"> <label> <input type="radio" name="sort2" hidden checked /> <span class="base-sort-label">NO</span> </label> <label> <input type="radio" name="sort2" hidden /> <span class="base-sort-label">YES</span> </label> </div> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>LinkedIn</dd> <dd>.ads.linkedin.com, .linkedin.com</dd> </dl> </div> </div> </div> </div> <div class="base-section"> <div class="base-section-body"> <div class="base-section-panel"> <h2 class="base-section-title">Advertising Cookies</h2> <p class="base-section-text"> These cookies gather information about your browser habits. They remember that you've visited our website and share this information with other organizations such as advertisers.</p> <div class="cookie-manager-cta"> <button type="button" class="cookie-manager-text-button" data-target="cookieButton"> <span>View Cookies</span> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"> <path d="M2 4.5L7 9.5L12 4.5" stroke="#363636" stroke-width="1.2"/> </svg> </button> <div class="base-sort" id="advert-select" value="advert"> <label> <input type="radio" name="sort3" hidden checked /> <span class="base-sort-label">NO</span> </label> <label> <input type="radio" name="sort3" hidden /> <span class="base-sort-label">YES</span> </label> </div> </div> <div class="cookie-manager-table" data-target="cookieTable"> <dl> <dt>Company</dt> <dt>Domain</dt> <dd>LinkedIn</dd> <dd>.linkedin.com</dd> <dd>Meta (formerly Facebook)</dd> <dd>.samsungdeveloperconference.com</dd> <dd>Google Inc.</dd> <dd>.samsungdeveloperconference.com</dd> </dl> </div> </div> </div> </div> </div> <footer class="base-modal-footer"> <button type="button" class="base-button submit-button"> <span>Save Preference</span> </button> </footer> </div> </section> </article>  <article id="el-sdp-popup-submitted" class="base-modal alert" data-target="cookie-submit-popup"> <section class="base-modal-dialog"> <div class="base-modal-frame"> <i class="base-modal-close" role="button" data-close="cookie-submit-popup"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M1 1L15 15" stroke="black" stroke-width="1.6"/> <path d="M15 1L1 15" stroke="black" stroke-width="1.6"/> </svg> </i> <div class="base-modal-body"> <div class="base-text-group"> <h1 class="text-group-title"> Preferences Submitted </h1> <p class="text-group-text"> You have successfully updated your cookie preferences. </p> </div> </div> <footer class="base-modal-footer"> <button type="button" class="base-button" data-close="cookie-submit-popup"> <span>Close</span> </button> </footer> </div> </section> </article> </div> </div> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/js/sdp.common.min.js"></script> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/js/sdp.ui.min.js"></script> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/js/sdp.utils.min.js"></script> <script type="text/javascript" src="https://d3unf4s5rp9dfh.cloudfront.net/public/db5fbba/js/sdp.helpers.min.js"></script>  <script src="/program/OneUI/js/sdp.one-ui.min.js"></script>    </body> </html>

CINXE.COM

Designing for foldables | Samsung Developer