CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Preview and test your app’s edge-to-edge UI | by Meghan Mehta | Android Developers | Medium</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2024-09-05T16:36:52.272Z"/><meta data-rh="true" name="title" content="Preview and test your app’s edge-to-edge UI | by Meghan Mehta | Android Developers | Medium"/><meta data-rh="true" property="og:title" content="Preview and test your app’s edge-to-edge UI"/><meta data-rh="true" property="al:android:url" content="medium://p/da645c905d78"/><meta data-rh="true" property="al:ios:url" content="medium://p/da645c905d78"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="This blog post is part of our series: Spotlight Week on Android 15, where we provide resources — blog posts, videos, sample code, and more — all designed to help you prepare your apps and take…"/><meta data-rh="true" property="og:description" content="Test and adapt your app’s UI using Compose Previews to ensure a seamless transition to Android 15’s edge-to-edge UI requirements."/><meta data-rh="true" property="og:url" content="https://medium.com/androiddevelopers/preview-and-test-your-apps-edge-to-edge-ui-da645c905d78"/><meta data-rh="true" property="al:web:url" content="https://medium.com/androiddevelopers/preview-and-test-your-apps-edge-to-edge-ui-da645c905d78"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*cbWmzhcQsly95rHdfYZA1g.png"/><meta data-rh="true" property="article:author" content="https://medium.com/@magicalmeghan"/><meta data-rh="true" name="author" content="Meghan Mehta"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Preview and test your app’s edge-to-edge UI"/><meta data-rh="true" name="twitter:site" content="@androiddev"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/da645c905d78"/><meta data-rh="true" property="twitter:description" content="Test and adapt your app’s UI using Compose Previews to ensure a seamless transition to Android 15’s edge-to-edge UI requirements."/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*cbWmzhcQsly95rHdfYZA1g.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="9 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@magicalmeghan"/><link data-rh="true" rel="canonical" href="https://medium.com/androiddevelopers/preview-and-test-your-apps-edge-to-edge-ui-da645c905d78"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/da645c905d78"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*cbWmzhcQsly95rHdfYZA1g.png"],"url":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78","dateCreated":"2024-09-04T20:46:36.602Z","datePublished":"2024-09-04T20:46:36.602Z","dateModified":"2024-11-17T05:20:03.768Z","headline":"Preview and test your app’s edge-to-edge UI - Android Developers - Medium","name":"Preview and test your app’s edge-to-edge UI - Android Developers - Medium","description":"This blog post is part of our series: Spotlight Week on Android 15, where we provide resources — blog posts, videos, sample code, and more — all designed to help you prepare your apps and take…","identifier":"da645c905d78","author":{"@type":"Person","name":"Meghan Mehta","url":"https:\u002F\u002Fmedium.com\u002F@magicalmeghan"},"creator":["Meghan Mehta"],"publisher":{"@type":"Organization","name":"Android Developers","url":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers","logo":{"@type":"ImageObject","width":500,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1000\u002F1*5pMw_nx55x_66tk77kutPQ.png"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78"}</script><style type="text/css" data-fela-rehydration="606" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="606" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(132, 132, 136, 1)}.es{border-color:rgba(132, 132, 136, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(132, 132, 136, 1)}.ez:disabled:hover{border-color:rgba(132, 132, 136, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{clear:both}.hb{margin-left:auto}.hc{margin-right:auto}.hd{max-width:17538px}.hj{padding-top:5px}.hk{padding-bottom:5px}.hm{cursor:zoom-in}.hn{z-index:auto}.hp{max-width:100%}.hq{height:auto}.hr{line-height:1.23}.hs{letter-spacing:0}.ht{font-style:normal}.hu{font-weight:700}.iz{align-items:baseline}.ja{width:48px}.jb{height:48px}.jc{border:2px solid rgba(255, 255, 255, 1)}.jd{z-index:0}.je{box-shadow:none}.jf{border:1px solid rgba(0, 0, 0, 0.05)}.jg{margin-left:-12px}.jh{width:28px}.ji{height:28px}.jj{z-index:1}.jk{width:24px}.jl{margin-bottom:2px}.jm{flex-wrap:nowrap}.jn{font-size:16px}.jo{line-height:24px}.jq{margin:0 8px}.jr{display:inline}.js{color:rgba(132, 132, 136, 1)}.jt{fill:rgba(132, 132, 136, 1)}.jw{flex:0 0 auto}.jz{flex-wrap:wrap}.ka{white-space:pre-wrap}.kb{margin-right:4px}.kc{overflow:hidden}.kd{max-height:20px}.ke{text-overflow:ellipsis}.kf{display:-webkit-box}.kg{-webkit-line-clamp:1}.kh{-webkit-box-orient:vertical}.ki{word-break:break-all}.kk{padding-left:8px}.kl{padding-right:8px}.lm> *{flex-shrink:0}.ln{overflow-x:scroll}.lo::-webkit-scrollbar{display:none}.lp{scrollbar-width:none}.lq{-ms-overflow-style:none}.lr{width:74px}.ls{flex-direction:row}.lt{z-index:2}.lw{-webkit-user-select:none}.lx{border:0}.ly{fill:rgba(117, 117, 117, 1)}.mb{outline:0}.mc{user-select:none}.md> svg{pointer-events:none}.mm{cursor:progress}.mn{margin-left:4px}.mo{margin-top:0px}.mp{opacity:1}.mq{padding:4px 0}.mt{width:16px}.mv{display:inline-flex}.my{padding:8px 2px}.mz svg{color:#6B6B6B}.nq{line-height:1.58}.nr{letter-spacing:-0.004em}.ns{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.on{margin-bottom:-0.46em}.oo{font-style:italic}.op{text-decoration:underline}.oq{margin-top:32px}.or{margin-bottom:14px}.os{padding-top:24px}.ot{padding-bottom:10px}.ou{background-color:#000000}.ov{height:3px}.ow{width:3px}.ox{margin-right:20px}.oy{max-width:1800px}.pe{line-height:1.18}.pf{letter-spacing:-0.022em}.pg{font-weight:600}.pw{margin-bottom:-0.31em}.qc{max-width:960px}.qd{line-height:1.12}.qw{margin-bottom:-0.28em}.qx{list-style-type:disc}.qy{margin-left:30px}.qz{padding-left:0px}.ra{padding:2px 4px}.rb{font-size:75%}.rc> strong{font-family:inherit}.rd{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.rj{max-width:1504px}.rk{overflow-x:auto}.rl{padding:32px}.rm{border:1px solid #E5E5E5}.rn{line-height:1.4}.ro{margin-top:-0.2em}.rp{margin-bottom:-0.2em}.rq{white-space:pre}.rr{min-width:fit-content}.rs{max-width:1502px}.rt{max-width:444px}.ru{max-width:993px}.rv{max-width:270px}.rw{max-width:1574px}.rx{max-width:1580px}.ry{max-width:564px}.rz{max-width:1770px}.sa{max-width:1840px}.sb{max-width:1999px}.sc{max-width:1576px}.sd{margin-top:16px}.se{max-width:1876px}.sf{max-width:913px}.sg{margin-top:10px}.sh{max-width:728px}.sk{font-style:inherit}.sl{max-width:1350px}.sm{list-style-type:decimal}.sn{margin-bottom:26px}.so{margin-top:6px}.sp{margin-top:8px}.sq{margin-right:8px}.sr{padding:8px 16px}.ss{border-radius:100px}.st{transition:background 300ms ease}.sv{white-space:nowrap}.sw{border-top:none}.sx{margin-bottom:50px}.sy{height:52px}.sz{max-height:52px}.ta{box-sizing:content-box}.tb{position:static}.td{max-width:155px}.tj{margin-bottom:64px}.tk{margin-bottom:48px}.ty{border-radius:2px}.ua{height:64px}.ub{width:64px}.uc{align-self:flex-end}.ud{flex:1 1 auto}.uh{padding-right:4px}.ui{font-weight:500}.up{color:rgba(255, 255, 255, 1)}.uq{fill:rgba(255, 255, 255, 1)}.ur{background:rgba(25, 25, 25, 1)}.us{border-color:rgba(25, 25, 25, 1)}.uv:disabled{opacity:0.1}.uw:disabled:hover{background:rgba(25, 25, 25, 1)}.ux:disabled:hover{border-color:rgba(25, 25, 25, 1)}.vd{height:0px}.ve{gap:18px}.vf{fill:rgba(61, 61, 61, 1)}.vh{padding-bottom:6px}.vi{border-bottom:1px solid #F2F2F2}.vo{fill:#242424}.vp{background:0}.vq{border-color:#242424}.vr:disabled:hover{color:#242424}.vs:disabled:hover{fill:#242424}.vt:disabled:hover{border-color:#242424}.we{border-bottom:solid 1px #E5E5E5}.wf{margin-top:72px}.wg{padding:24px 0}.wh{margin-bottom:0px}.wi{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(113, 114, 117, 1)}.eu:hover{border-color:rgba(113, 114, 117, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.jp:hover{text-decoration:underline}.ju:hover:not(:disabled){color:rgba(113, 114, 117, 1)}.jv:hover:not(:disabled){fill:rgba(113, 114, 117, 1)}.ma:hover{fill:rgba(8, 8, 8, 1)}.mr:hover{fill:#000000}.ms:hover p{color:#000000}.mu:hover{color:#000000}.na:hover svg{color:#000000}.su:hover{background-color:#F2F2F2}.tz:hover{background-color:none}.ut:hover{background:#000000}.uu:hover{border-color:#242424}.vg:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.ho:focus{transform:scale(1.01)}.lz:focus{fill:rgba(8, 8, 8, 1)}.nb:focus svg{color:#000000}.me:active{border-style:none}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:50px}.gc{max-width:680px}.ha{max-width:1192px}.hi{margin-top:40px}.ip{font-size:42px}.iq{margin-top:1em}.ir{margin-bottom:32px}.is{line-height:52px}.it{letter-spacing:-0.011em}.iy{align-items:center}.ky{border-top:solid 1px #F2F2F2}.kz{border-bottom:solid 1px #F2F2F2}.la{margin:32px 0 0}.lb{padding:3px 8px}.lk> *{margin-right:24px}.ll> :last-child{margin-right:0}.ml{margin-top:0px}.mx{margin:0}.oj{font-size:20px}.ok{margin-top:2.14em}.ol{line-height:32px}.om{letter-spacing:-0.003em}.pd{margin-top:56px}.pt{margin-top:1.72em}.pu{line-height:24px}.pv{letter-spacing:0}.qb{margin-top:0.94em}.qs{font-size:24px}.qt{margin-top:1.95em}.qu{line-height:30px}.qv{letter-spacing:-0.016em}.ri{margin-top:1.14em}.ti{display:inline-block}.tl{flex-direction:row}.to{margin-bottom:0}.tp{margin-right:20px}.ue{max-width:500px}.vc{margin-bottom:88px}.vn{margin:40px 0 16px}.vy{width:min-width}.wd{padding-top:72px}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mk{margin-top:0px}.si{margin-left:auto}.sj{text-align:center}.th{display:inline-block}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.mj{margin-top:0px}.tg{display:inline-block}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.mh{margin-top:0px}.mi{margin-right:0px}.tf{display:inline-block}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:2px}.gt{margin:0}.gu{max-width:100%}.he{margin-top:32px}.hv{font-size:32px}.hw{margin-top:1.01em}.hx{margin-bottom:24px}.hy{line-height:38px}.hz{letter-spacing:-0.014em}.iu{align-items:flex-start}.jx{flex-direction:column}.km{margin:24px -24px 0}.kn{padding:0}.lc> *{margin-right:8px}.ld> :last-child{margin-right:24px}.lu{margin-left:0px}.mf{margin-top:0px}.mg{margin-right:0px}.nc{border:1px solid #F2F2F2}.nd{border-radius:99em}.ne{padding:0px 16px 0px 12px}.nf{height:38px}.ng{align-items:center}.ni svg{margin-right:8px}.nt{font-size:18px}.nu{margin-top:1.56em}.nv{line-height:28px}.nw{letter-spacing:-0.003em}.oz{margin-top:40px}.ph{font-size:16px}.pi{margin-top:1.23em}.pj{letter-spacing:0}.px{margin-top:0.67em}.qe{font-size:20px}.qf{margin-top:1.2em}.qg{line-height:24px}.re{margin-top:1.34em}.te{display:inline-block}.tw{margin-bottom:20px}.tx{margin-right:0}.uj{font-size:24px}.uk{line-height:30px}.ul{letter-spacing:-0.016em}.uy{margin-bottom:64px}.vj{margin:32px 0 16px}.vu{width:100%}.vz{padding-top:48px}.nh:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:50px}.gb{max-width:680px}.gz{max-width:1192px}.hh{margin-top:40px}.ik{font-size:42px}.il{margin-top:1em}.im{margin-bottom:32px}.in{line-height:52px}.io{letter-spacing:-0.011em}.ix{align-items:center}.ku{border-top:solid 1px #F2F2F2}.kv{border-bottom:solid 1px #F2F2F2}.kw{margin:32px 0 0}.kx{padding:3px 8px}.li> *{margin-right:24px}.lj> :last-child{margin-right:0}.mw{margin:0}.of{font-size:20px}.og{margin-top:2.14em}.oh{line-height:32px}.oi{letter-spacing:-0.003em}.pc{margin-top:56px}.pq{margin-top:1.72em}.pr{line-height:24px}.ps{letter-spacing:0}.qa{margin-top:0.94em}.qo{font-size:24px}.qp{margin-top:1.95em}.qq{line-height:30px}.qr{letter-spacing:-0.016em}.rh{margin-top:1.14em}.tm{flex-direction:row}.tq{margin-bottom:0}.tr{margin-right:20px}.uf{max-width:500px}.vb{margin-bottom:88px}.vm{margin:40px 0 16px}.vx{width:min-width}.wc{padding-top:72px}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:50px}.ga{max-width:680px}.gx{margin:0}.gy{max-width:100%}.hg{margin-top:40px}.if{font-size:42px}.ig{margin-top:1em}.ih{margin-bottom:32px}.ii{line-height:52px}.ij{letter-spacing:-0.011em}.iw{align-items:center}.kq{border-top:solid 1px #F2F2F2}.kr{border-bottom:solid 1px #F2F2F2}.ks{margin:32px 0 0}.kt{padding:3px 8px}.lg> *{margin-right:24px}.lh> :last-child{margin-right:0}.ob{font-size:20px}.oc{margin-top:2.14em}.od{line-height:32px}.oe{letter-spacing:-0.003em}.pb{margin-top:56px}.pn{margin-top:1.72em}.po{line-height:24px}.pp{letter-spacing:0}.pz{margin-top:0.94em}.qk{font-size:24px}.ql{margin-top:1.95em}.qm{line-height:30px}.qn{letter-spacing:-0.016em}.rg{margin-top:1.14em}.tn{flex-direction:row}.ts{margin-bottom:0}.tt{margin-right:20px}.ug{max-width:500px}.va{margin-bottom:88px}.vl{margin:40px 0 16px}.vw{width:min-width}.wb{padding-top:72px}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:2px}.gv{margin:0}.gw{max-width:100%}.hf{margin-top:32px}.ia{font-size:32px}.ib{margin-top:1.01em}.ic{margin-bottom:24px}.id{line-height:38px}.ie{letter-spacing:-0.014em}.iv{align-items:flex-start}.jy{flex-direction:column}.ko{margin:24px 0 0}.kp{padding:0}.le> *{margin-right:8px}.lf> :last-child{margin-right:8px}.lv{margin-left:0px}.nj{border:1px solid #F2F2F2}.nk{border-radius:99em}.nl{padding:0px 16px 0px 12px}.nm{height:38px}.nn{align-items:center}.np svg{margin-right:8px}.nx{font-size:18px}.ny{margin-top:1.56em}.nz{line-height:28px}.oa{letter-spacing:-0.003em}.pa{margin-top:40px}.pk{font-size:16px}.pl{margin-top:1.23em}.pm{letter-spacing:0}.py{margin-top:0.67em}.qh{font-size:20px}.qi{margin-top:1.2em}.qj{line-height:24px}.rf{margin-top:1.34em}.tu{margin-bottom:20px}.tv{margin-right:0}.um{font-size:24px}.un{line-height:30px}.uo{letter-spacing:-0.016em}.uz{margin-bottom:64px}.vk{margin:32px 0 16px}.vv{width:100%}.wa{padding-top:48px}.no:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="print">.tc{display:none}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hl{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style><style type="text/css" data-fela-rehydration="606" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kj{max-height:none}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Fda645c905d78&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&source=post_page---top_nav_layout_nav-----------------------global_nav------------------">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" rel="noopener follow" href="/?source=---top_nav_layout_nav-----------------------------------------"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" rel="noopener follow" href="/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" rel="noopener follow" href="/search?source=---top_nav_layout_nav-----------------------------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&source=post_page---top_nav_layout_nav-----------------------global_nav------------------">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="gs"><div class="ab cb"><div class="gt gu gv gw gx gy cf gz cg ha ci bh"><figure class="he hf hg hh hi gs hj hk paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc hd"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*cbWmzhcQsly95rHdfYZA1g.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*cbWmzhcQsly95rHdfYZA1g.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*cbWmzhcQsly95rHdfYZA1g.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*cbWmzhcQsly95rHdfYZA1g.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*cbWmzhcQsly95rHdfYZA1g.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*cbWmzhcQsly95rHdfYZA1g.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*cbWmzhcQsly95rHdfYZA1g.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*cbWmzhcQsly95rHdfYZA1g.png 640w, https://miro.medium.com/v2/resize:fit:720/1*cbWmzhcQsly95rHdfYZA1g.png 720w, https://miro.medium.com/v2/resize:fit:750/1*cbWmzhcQsly95rHdfYZA1g.png 750w, https://miro.medium.com/v2/resize:fit:786/1*cbWmzhcQsly95rHdfYZA1g.png 786w, https://miro.medium.com/v2/resize:fit:828/1*cbWmzhcQsly95rHdfYZA1g.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*cbWmzhcQsly95rHdfYZA1g.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*cbWmzhcQsly95rHdfYZA1g.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="" class="bh hp hq c" width="1000" height="298" loading="eager" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="5eaa" class="pw-post-title hr hs ht bf hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ip iq ir is it bk" data-testid="storyTitle">Preview and test your app’s edge-to-edge UI</h1><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="iu iv iw ix iy ab"><div><div class="ab iz"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@magicalmeghan?source=post_page---byline--da645c905d78---------------------------------------"><div class="l ja jb by jc jd"><div class="l fj"><img alt="Meghan Mehta" class="l fd by dd de cx" src="https://miro.medium.com/v2/da:true/resize:fill:88:88/0*eEs786UmP2FQS810" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="je by l dd de fs n jf ft"></div></div></div></a></div></div><div class="jg ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/androiddevelopers?source=post_page---byline--da645c905d78---------------------------------------" rel="noopener follow"><div class="l jh ji by jc jj"><div class="l fj"><img alt="Android Developers" class="l fd by br jk cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*4Tg6pPzer7cIarYaszIKaQ.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="je by l br jk fs n jf ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="jl ab q"><div class="ab q jm"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b jn jo bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jp" data-testid="authorName" rel="noopener follow" href="/@magicalmeghan?source=post_page---byline--da645c905d78---------------------------------------">Meghan Mehta</a></p></div></div></div><span class="jq jr" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b jn jo du"><span><a class="js jt ah ai aj ak al am an ao ap aq ar ex ju jv" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F401951cd4c3e&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&user=Meghan+Mehta&userId=401951cd4c3e&source=post_page-401951cd4c3e--byline--da645c905d78---------------------post_header------------------">Follow</a></span></p></div></div></span></div></div><div class="l jw"><span class="bf b bg z du"><div class="ab cn jx jy jz"><div class="fu fv ab"><div class="bf b bg z du ab ka"><span class="kb l jw">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar jp ab q" data-testid="publicationName" href="https://medium.com/androiddevelopers?source=post_page---byline--da645c905d78---------------------------------------" rel="noopener follow"><p class="bf b bg z kc kd ke kf kg kh ki kj bk">Android Developers</p></a></div></div></div><div class="h k"><span class="jq jr" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">9 min read</span><div class="kk kl l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Sep 4, 2024</span></div></span></div></span></div></div></div><div class="ab cp km kn ko kp kq kr ks kt ku kv kw kx ky kz la lb"><div class="h k w fg fh q"><div class="lr l"><div class="ab q ls lt"><div class="pw-multi-vote-icon fj kb lu lv lw"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fandroiddevelopers%2Fda645c905d78&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&user=Meghan+Mehta&userId=401951cd4c3e&source=---header_actions--da645c905d78---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="lx ao ly lz ma mb am mc md me lw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mf mg mh mi mj mk ml"><p class="bf b dv z du"><span class="mm">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao lx mp mq ab q fk mr ms" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mo"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count mn mo">1</span></p></button></div></div></div><div class="ab q lc ld le lf lg lh li lj lk ll lm ln lo lp lq"><div class="mt k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fda645c905d78&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&source=---header_actions--da645c905d78---------------------bookmark_footer------------------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mu" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd mv cn"><div class="l ae"><div class="ab cb"><div class="gt gv gx mw mx hp ci bh"><div class="ab"><div class="bm" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al my an ao ap ex mz na ms nb nc nd ne nf s ng nh ni nj nk nl nm u nn no np"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al my an ao ap ex mz na ms nb nc nd ne nf s ng nh ni nj nk nl nm u nn no np"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="d96e" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk"><em class="oo">This blog post is part of our series: Spotlight Week on Android 15, where we provide resources — blog posts, videos, sample code, and more — all designed to help you prepare your apps and take advantage of the latest features in Android 15. You can </em><a class="af op" href="https://android-developers.googleblog.com/2024/09/android-15-spotlight-week.html" rel="noopener ugc nofollow" target="_blank"><em class="oo">read more in the overview of Spotlight Week: Android 15 here</em></a><em class="oo">, which will be updated throughout the week.</em></p></div></div></div><div class="ab cb oq or os ot" role="separator"><span class="ou by bm ov ow ox"></span><span class="ou by bm ov ow ox"></span><span class="ou by bm ov ow"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="6af7" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Starting in Android 15, once your app targets API 35, edge-to-edge will be enforced. Edge-to-edge means the status bar at the top and the gesture navigation bar at the bottom will be transparent by default, a look many users prefer.</p></div></div><div class="gs"><div class="ab cb"><div class="gt gu gv gw gx gy cf gz cg ha ci bh"><figure class="oz pa pb pc pd gs hj hk paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc oy"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*01MrpLiWpn3u_bANKyzYGA.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*01MrpLiWpn3u_bANKyzYGA.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*01MrpLiWpn3u_bANKyzYGA.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*01MrpLiWpn3u_bANKyzYGA.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*01MrpLiWpn3u_bANKyzYGA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*01MrpLiWpn3u_bANKyzYGA.gif 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*01MrpLiWpn3u_bANKyzYGA.gif 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*01MrpLiWpn3u_bANKyzYGA.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*01MrpLiWpn3u_bANKyzYGA.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*01MrpLiWpn3u_bANKyzYGA.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*01MrpLiWpn3u_bANKyzYGA.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*01MrpLiWpn3u_bANKyzYGA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*01MrpLiWpn3u_bANKyzYGA.gif 1100w, https://miro.medium.com/v2/resize:fit:2000/1*01MrpLiWpn3u_bANKyzYGA.gif 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="" class="bh hp hq c" width="1000" height="500" loading="eager" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><h2 id="63d8" class="pe pf ht bf pg ph pi dy pj pk pl ea pm ob pn po pp of pq pr ps oj pt pu pv pw bk">How will this affect your apps?</h2><p id="25d8" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">When targeting API 35, your app’s UI might be hidden beneath system bars or display cutouts, causing layout issues. This image shows problems with the status bar, pinhole cutout, and navigation bar. To learn how to address these issues, refer to <a class="af op" rel="noopener" href="/androiddevelopers/insets-handling-tips-for-android-15s-edge-to-edge-enforcement-872774e8839b">Insets handling tips for Android 15’s edge-to-edge enforcement</a>.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc qc"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*095S8QySirLCel5mGyBPPA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*095S8QySirLCel5mGyBPPA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*095S8QySirLCel5mGyBPPA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*095S8QySirLCel5mGyBPPA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*095S8QySirLCel5mGyBPPA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*095S8QySirLCel5mGyBPPA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*095S8QySirLCel5mGyBPPA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*095S8QySirLCel5mGyBPPA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*095S8QySirLCel5mGyBPPA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*095S8QySirLCel5mGyBPPA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*095S8QySirLCel5mGyBPPA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*095S8QySirLCel5mGyBPPA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*095S8QySirLCel5mGyBPPA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*095S8QySirLCel5mGyBPPA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="394" loading="eager" role="presentation"/></picture></div></div></figure><p id="bc18" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Let’s see how Compose Previews can help your app achieve a seamless edge-to-edge layout and provide a high quality user experience.</p><h1 id="2466" class="qd pf ht bf pg qe qf qg pj qh qi qj pm qk ql qm qn qo qp qq qr qs qt qu qv qw bk">Edge-to-edge support in Compose Preview</h1><p id="10ee" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">We have a number of new <a class="af op" href="https://developer.android.com/develop/ui/compose/tooling/previews" rel="noopener ugc nofollow" target="_blank">Compose Preview</a> features for testing edge-to-edge that are available for you to try in the <a class="af op" href="https://developer.android.com/studio/preview" rel="noopener ugc nofollow" target="_blank">latest Canary version</a> of Android Studio Ladybug. Note that these features are still under development, and your feedback is invaluable in making them the best they can be.</p><p id="d67b" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Here is a quick overview of what we will cover:</p><ul class=""><li id="89e1" class="nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on qx qy qz bk">Improvements to <code class="cx ra rb rc rd b">showSystemUI</code></li><li id="ed4f" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Testing your UI on specific devices</li><li id="0c41" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Testing your UI with different types of cutouts</li><li id="8d3d" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Testing your UI with both types of navigation bars</li></ul><p id="4821" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Please share your feedback and suggestions using the instructions <a class="af op" href="https://developer.android.com/studio/report-bugs" rel="noopener ugc nofollow" target="_blank">here</a>.</p><h2 id="cff9" class="pe pf ht bf pg ph pi dy pj pk pl ea pm ob pn po pp of pq pr ps oj pt pu pv pw bk">Improvements to showSystemUI</h2><p id="6103" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">In previous versions of Android Studio, you could view your screen level Compose Preview by using <code class="cx ra rb rc rd b">showSystemUi</code>. However, it would show a system-generated status bar that looks different than it does on the emulator.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc rj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*vKdMfqG1fBX-33DyXG3hPg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*vKdMfqG1fBX-33DyXG3hPg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*vKdMfqG1fBX-33DyXG3hPg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*vKdMfqG1fBX-33DyXG3hPg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*vKdMfqG1fBX-33DyXG3hPg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*vKdMfqG1fBX-33DyXG3hPg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*vKdMfqG1fBX-33DyXG3hPg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*vKdMfqG1fBX-33DyXG3hPg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*vKdMfqG1fBX-33DyXG3hPg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*vKdMfqG1fBX-33DyXG3hPg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*vKdMfqG1fBX-33DyXG3hPg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*vKdMfqG1fBX-33DyXG3hPg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*vKdMfqG1fBX-33DyXG3hPg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*vKdMfqG1fBX-33DyXG3hPg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="796" loading="lazy" role="presentation"/></picture></div></div></figure><p id="d2f1" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">In anticipation of the Android 15 changes, we’ve been fixing this feature so that you can see a more accurate rendering of your UI with the system UI. To see the updated Preview, you can set <code class="cx ra rb rc rd b">showSystemUi</code> to true in code through <a class="af op" href="https://developer.android.com/studio/preview" rel="noopener ugc nofollow" target="_blank">Android Studio Ladybug Feature Drop Canary 1</a> or higher.</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="f8c6" class="rn pf ht rd b bg ro rp l rq rr">@Preview(showSystemUi = true)</span></pre><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc rs"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*caWt09L46UJNntMiMfL0Dg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*caWt09L46UJNntMiMfL0Dg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*caWt09L46UJNntMiMfL0Dg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*caWt09L46UJNntMiMfL0Dg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*caWt09L46UJNntMiMfL0Dg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*caWt09L46UJNntMiMfL0Dg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*caWt09L46UJNntMiMfL0Dg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*caWt09L46UJNntMiMfL0Dg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*caWt09L46UJNntMiMfL0Dg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*caWt09L46UJNntMiMfL0Dg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*caWt09L46UJNntMiMfL0Dg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*caWt09L46UJNntMiMfL0Dg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*caWt09L46UJNntMiMfL0Dg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*caWt09L46UJNntMiMfL0Dg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="810" loading="lazy" role="presentation"/></picture></div></div></figure><p id="dde1" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk"><strong class="ns hu">Note:</strong> Using <code class="cx ra rb rc rd b">showSystemUi</code> will show your app’s UI with edge-to-edge on Compose Preview even if you are targeting SDK 34 or lower. We encourage you to consider the default edge-to-edge behavior when designing your apps.</p><h2 id="3696" class="pe pf ht bf pg ph pi dy pj pk pl ea pm ob pn po pp of pq pr ps oj pt pu pv pw bk">Preview picker</h2><p id="4e87" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">You can also use Compose Preview picker to access the list of new features we added for Android 15.</p><p id="4912" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Preview picker is currently experimental. To turn it on, goto <strong class="ns hu">Android Studio > Settings > Experimental</strong> and check the<strong class="ns hu"> Enable @Preview picker</strong> check box.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div class="hb hc rt"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*fL4ovYsMXOUj5NTVadZohQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*fL4ovYsMXOUj5NTVadZohQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*fL4ovYsMXOUj5NTVadZohQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*fL4ovYsMXOUj5NTVadZohQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*fL4ovYsMXOUj5NTVadZohQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*fL4ovYsMXOUj5NTVadZohQ.png 1100w, https://miro.medium.com/v2/resize:fit:888/format:webp/1*fL4ovYsMXOUj5NTVadZohQ.png 888w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 444px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*fL4ovYsMXOUj5NTVadZohQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*fL4ovYsMXOUj5NTVadZohQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*fL4ovYsMXOUj5NTVadZohQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*fL4ovYsMXOUj5NTVadZohQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*fL4ovYsMXOUj5NTVadZohQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*fL4ovYsMXOUj5NTVadZohQ.png 1100w, https://miro.medium.com/v2/resize:fit:888/1*fL4ovYsMXOUj5NTVadZohQ.png 888w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 444px"/><img alt="" class="bh hp hq c" width="444" height="542" loading="lazy" role="presentation"/></picture></div></figure><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc ru"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*bma3NWe5QfzXCRiGG0eoOg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*bma3NWe5QfzXCRiGG0eoOg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*bma3NWe5QfzXCRiGG0eoOg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*bma3NWe5QfzXCRiGG0eoOg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*bma3NWe5QfzXCRiGG0eoOg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*bma3NWe5QfzXCRiGG0eoOg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*bma3NWe5QfzXCRiGG0eoOg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*bma3NWe5QfzXCRiGG0eoOg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*bma3NWe5QfzXCRiGG0eoOg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*bma3NWe5QfzXCRiGG0eoOg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*bma3NWe5QfzXCRiGG0eoOg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*bma3NWe5QfzXCRiGG0eoOg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*bma3NWe5QfzXCRiGG0eoOg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*bma3NWe5QfzXCRiGG0eoOg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="530" loading="lazy" role="presentation"/></picture></div></div></figure><p id="063d" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Then, you can use the Preview picker, which can be accessed by clicking the gear icon to the left of the Preview annotation.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div class="hb hc rv"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*aaH_JuNxrMT5AzJhTzKxgw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*aaH_JuNxrMT5AzJhTzKxgw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*aaH_JuNxrMT5AzJhTzKxgw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*aaH_JuNxrMT5AzJhTzKxgw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*aaH_JuNxrMT5AzJhTzKxgw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*aaH_JuNxrMT5AzJhTzKxgw.png 1100w, https://miro.medium.com/v2/resize:fit:540/format:webp/1*aaH_JuNxrMT5AzJhTzKxgw.png 540w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 270px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*aaH_JuNxrMT5AzJhTzKxgw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*aaH_JuNxrMT5AzJhTzKxgw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*aaH_JuNxrMT5AzJhTzKxgw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*aaH_JuNxrMT5AzJhTzKxgw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*aaH_JuNxrMT5AzJhTzKxgw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*aaH_JuNxrMT5AzJhTzKxgw.png 1100w, https://miro.medium.com/v2/resize:fit:540/1*aaH_JuNxrMT5AzJhTzKxgw.png 540w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 270px"/><img alt="" class="bh hp hq c" width="270" height="60" loading="lazy" role="presentation"/></picture></div></figure><p id="016f" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">In the Display section, set <strong class="ns hu">showSystemUi</strong> to <strong class="ns hu">true</strong>.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc rw"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*YGeQkPnmoSw6nX64EUflmA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*YGeQkPnmoSw6nX64EUflmA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*YGeQkPnmoSw6nX64EUflmA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*YGeQkPnmoSw6nX64EUflmA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*YGeQkPnmoSw6nX64EUflmA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*YGeQkPnmoSw6nX64EUflmA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*YGeQkPnmoSw6nX64EUflmA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*YGeQkPnmoSw6nX64EUflmA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*YGeQkPnmoSw6nX64EUflmA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*YGeQkPnmoSw6nX64EUflmA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*YGeQkPnmoSw6nX64EUflmA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*YGeQkPnmoSw6nX64EUflmA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*YGeQkPnmoSw6nX64EUflmA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*YGeQkPnmoSw6nX64EUflmA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="f28d" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Now, you can more accurately view how your app’s status and navigation bar will look with edge-to-edge implemented through both code and the Preview picker. You may also want to see how your app looks on a specific device, like a Pixel 8 Pro. Let’s see how you can achieve that through Compose Preview.</p><h2 id="b288" class="pe pf ht bf pg ph pi dy pj pk pl ea pm ob pn po pp of pq pr ps oj pt pu pv pw bk">Test specific devices</h2><p id="2630" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">You can now specify a device you want the Preview to be displayed on. This allows you to view your screen with that device’s specific cutouts and sizing.</p><p id="f566" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Through the Preview picker, you can specify what device you want your Preview to be rendered on in the <strong class="ns hu">Device</strong> dropdown in the <strong class="ns hu">Hardware</strong> section.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc rx"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*rEsqwcjYlJcJJAmKcnpHqQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*rEsqwcjYlJcJJAmKcnpHqQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*rEsqwcjYlJcJJAmKcnpHqQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*rEsqwcjYlJcJJAmKcnpHqQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*rEsqwcjYlJcJJAmKcnpHqQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*rEsqwcjYlJcJJAmKcnpHqQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*rEsqwcjYlJcJJAmKcnpHqQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*rEsqwcjYlJcJJAmKcnpHqQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*rEsqwcjYlJcJJAmKcnpHqQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*rEsqwcjYlJcJJAmKcnpHqQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*rEsqwcjYlJcJJAmKcnpHqQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*rEsqwcjYlJcJJAmKcnpHqQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*rEsqwcjYlJcJJAmKcnpHqQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*rEsqwcjYlJcJJAmKcnpHqQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="edc9" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">To do this manually, add a device parameter to the Preview annotation and set it to <code class="cx ra rb rc rd b">device = “id:pixel_8_pro”</code>. Note that autocomplete will work, so if you type <code class="cx ra rb rc rd b">device = “id:pixel”</code> then it will fill in all of the Pixel options you can test against in your Preview.</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="d694" class="rn pf ht rd b bg ro rp l rq rr">@Preview(device = "id:pixel_8_pro", showSystemUi = true)</span></pre><p id="09fa" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">You can now view your app as it would be displayed on a Pixel 8 Pro through your Preview.</p><p id="3980" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk"><strong class="ns hu">Note:</strong> Your navigation bar color may not be correct in the Preview and the status bar icons padding may also be different from a real device.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div class="hb hc ry"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*GE2rYyK5lIlPPTZ1dY7fFw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*GE2rYyK5lIlPPTZ1dY7fFw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*GE2rYyK5lIlPPTZ1dY7fFw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*GE2rYyK5lIlPPTZ1dY7fFw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*GE2rYyK5lIlPPTZ1dY7fFw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*GE2rYyK5lIlPPTZ1dY7fFw.png 1100w, https://miro.medium.com/v2/resize:fit:1128/format:webp/1*GE2rYyK5lIlPPTZ1dY7fFw.png 1128w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 564px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*GE2rYyK5lIlPPTZ1dY7fFw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*GE2rYyK5lIlPPTZ1dY7fFw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*GE2rYyK5lIlPPTZ1dY7fFw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*GE2rYyK5lIlPPTZ1dY7fFw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*GE2rYyK5lIlPPTZ1dY7fFw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*GE2rYyK5lIlPPTZ1dY7fFw.png 1100w, https://miro.medium.com/v2/resize:fit:1128/1*GE2rYyK5lIlPPTZ1dY7fFw.png 1128w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 564px"/><img alt="" class="bh hp hq c" width="564" height="1240" loading="lazy" role="presentation"/></picture></div></figure><p id="ae15" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Here is how the same app looks on different device types:</p></div></div><div class="gs"><div class="ab cb"><div class="gt gu gv gw gx gy cf gz cg ha ci bh"><figure class="oz pa pb pc pd gs hj hk paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc rz"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*yQEATVJmfdp3cnvI10myUQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*yQEATVJmfdp3cnvI10myUQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*yQEATVJmfdp3cnvI10myUQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*yQEATVJmfdp3cnvI10myUQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*yQEATVJmfdp3cnvI10myUQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*yQEATVJmfdp3cnvI10myUQ.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*yQEATVJmfdp3cnvI10myUQ.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*yQEATVJmfdp3cnvI10myUQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*yQEATVJmfdp3cnvI10myUQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*yQEATVJmfdp3cnvI10myUQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*yQEATVJmfdp3cnvI10myUQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*yQEATVJmfdp3cnvI10myUQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*yQEATVJmfdp3cnvI10myUQ.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*yQEATVJmfdp3cnvI10myUQ.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="" class="bh hp hq c" width="1000" height="768" loading="eager" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><h2 id="e1c8" class="pe pf ht bf pg ph pi dy pj pk pl ea pm ob pn po pp of pq pr ps oj pt pu pv pw bk">Cutouts</h2><p id="8614" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">Instead of testing specific devices, you may want to just test that your app’s UI renders correctly with a specific type of cutout. There are multiple types of cutouts to be aware of. In the table above, you can see that the Pixel 5 and Pixel 6 have different types of cutouts.</p><p id="7cff" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">In Previews, we support testing for the following cutouts:</p><ul class=""><li id="547e" class="nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on qx qy qz bk">Corner</li><li id="f524" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Double</li><li id="67cc" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Punch hole</li><li id="128c" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Tall</li></ul><p id="c785" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk"><strong class="ns hu">Note:</strong> we don’t currently support the center cutout that the Pixel uses in Previews</p></div></div><div class="gs"><div class="ab cb"><div class="gt gu gv gw gx gy cf gz cg ha ci bh"><figure class="oz pa pb pc pd gs hj hk paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc sa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*o_woI6d_r_UkwFfuHU-HMQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*o_woI6d_r_UkwFfuHU-HMQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*o_woI6d_r_UkwFfuHU-HMQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*o_woI6d_r_UkwFfuHU-HMQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*o_woI6d_r_UkwFfuHU-HMQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*o_woI6d_r_UkwFfuHU-HMQ.png 1100w, https://miro.medium.com/v2/resize:fit:2000/format:webp/1*o_woI6d_r_UkwFfuHU-HMQ.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*o_woI6d_r_UkwFfuHU-HMQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*o_woI6d_r_UkwFfuHU-HMQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*o_woI6d_r_UkwFfuHU-HMQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*o_woI6d_r_UkwFfuHU-HMQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*o_woI6d_r_UkwFfuHU-HMQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*o_woI6d_r_UkwFfuHU-HMQ.png 1100w, https://miro.medium.com/v2/resize:fit:2000/1*o_woI6d_r_UkwFfuHU-HMQ.png 2000w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 1000px"/><img alt="" class="bh hp hq c" width="1000" height="572" loading="eager" role="presentation"/></picture></div></div></figure></div></div></div><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="a264" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Here’s how the UI of an app using edge-to-edge can go wrong because of a cutout:</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc sb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Vkku5jUxOGhUB-lAA8RZpA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Vkku5jUxOGhUB-lAA8RZpA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Vkku5jUxOGhUB-lAA8RZpA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Vkku5jUxOGhUB-lAA8RZpA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Vkku5jUxOGhUB-lAA8RZpA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Vkku5jUxOGhUB-lAA8RZpA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Vkku5jUxOGhUB-lAA8RZpA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*Vkku5jUxOGhUB-lAA8RZpA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*Vkku5jUxOGhUB-lAA8RZpA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*Vkku5jUxOGhUB-lAA8RZpA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*Vkku5jUxOGhUB-lAA8RZpA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*Vkku5jUxOGhUB-lAA8RZpA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*Vkku5jUxOGhUB-lAA8RZpA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Vkku5jUxOGhUB-lAA8RZpA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="409" loading="eager" role="presentation"/></picture></div></div></figure><p id="0d40" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Among other issues, this app’s cutout overlaps the list content.</p><p id="c2a3" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">This is why it is important to test how your UI reacts to different types of cutouts through your Compose Preview.</p><p id="7d1a" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">In the Preview picker, under the <strong class="ns hu">Hardware</strong> section, find the <strong class="ns hu">Cutout</strong> dropdown and specify the cutout you would like to test.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc sc"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*BAjQVIFdBYo4OAZfpiu_jg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*BAjQVIFdBYo4OAZfpiu_jg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*BAjQVIFdBYo4OAZfpiu_jg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*BAjQVIFdBYo4OAZfpiu_jg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*BAjQVIFdBYo4OAZfpiu_jg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*BAjQVIFdBYo4OAZfpiu_jg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*BAjQVIFdBYo4OAZfpiu_jg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*BAjQVIFdBYo4OAZfpiu_jg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*BAjQVIFdBYo4OAZfpiu_jg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*BAjQVIFdBYo4OAZfpiu_jg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*BAjQVIFdBYo4OAZfpiu_jg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*BAjQVIFdBYo4OAZfpiu_jg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*BAjQVIFdBYo4OAZfpiu_jg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*BAjQVIFdBYo4OAZfpiu_jg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="390" loading="lazy" role="presentation"/></picture></div></div></figure><p id="6398" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">If you are doing this through code, note that you will first have to specify a device spec either through a specific device or a specific width and height in pixels.</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="27d6" class="rn pf ht rd b bg ro rp l rq rr">@Preview(showSystemUi = true, device = "spec:parent=pixel_8")</span></pre><pre class="sd rk rd rl bp rm bb bk"><span id="d858" class="rn pf ht rd b bg ro rp l rq rr">@Preview(showSystemUi = true, device = "spec:width=1080px,height=2340px")</span></pre><p id="abbc" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Then, within the device spec, you can also add cutout and set it equal to the type of cutout you want to test.</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="be12" class="rn pf ht rd b bg ro rp l rq rr">@Preview(showSystemUi = true, device = <br/>“spec:width=1080px,height=2400px,cutout=punch_hole”)</span></pre><h2 id="fbd9" class="pe pf ht bf pg ph pi dy pj pk pl ea pm ob pn po pp of pq pr ps oj pt pu pv pw bk">Navigation bar</h2><p id="927f" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">For edge-to-edge, there are different UI standards for gesture navigation vs three button navigation.</p><p id="54e5" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk"><strong class="ns hu">Gesture navigation:</strong></p><ul class=""><li id="dd6b" class="nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on qx qy qz bk">Transparent by default</li><li id="cb88" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Bottom offset is disabled, but you can apply insets</li><li id="9409" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk"><code class="cx ra rb rc rd b">setNavigationBarColor</code> is disabled</li></ul><p id="5504" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk"><strong class="ns hu">Three button navigation:</strong></p><ul class=""><li id="7e9d" class="nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on qx qy qz bk">Opacity set to 80% by default</li><li id="f071" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Bottom offset is disabled but you can apply insets</li><li id="33f8" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk">Color is the window background by default</li></ul><p id="e761" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">The navigation bar in <code class="cx ra rb rc rd b">showSystemUi</code> will show you the gesture navigation bar by default, but to test both types of navigation bars in your Preview, you can specify navigation using the Preview picker or through the device parameter.</p><p id="857b" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">To specify through the Preview picker, in the <strong class="ns hu">Hardware</strong> section, find the <strong class="ns hu">Navigation</strong> dropdown and set your Preview’s navigation bar.</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc sc"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*xEc35bhIseZ9c1FgQCJrsg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*xEc35bhIseZ9c1FgQCJrsg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*xEc35bhIseZ9c1FgQCJrsg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*xEc35bhIseZ9c1FgQCJrsg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*xEc35bhIseZ9c1FgQCJrsg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*xEc35bhIseZ9c1FgQCJrsg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*xEc35bhIseZ9c1FgQCJrsg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*xEc35bhIseZ9c1FgQCJrsg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*xEc35bhIseZ9c1FgQCJrsg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*xEc35bhIseZ9c1FgQCJrsg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*xEc35bhIseZ9c1FgQCJrsg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*xEc35bhIseZ9c1FgQCJrsg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*xEc35bhIseZ9c1FgQCJrsg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*xEc35bhIseZ9c1FgQCJrsg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="394" loading="lazy" role="presentation"/></picture></div></div></figure><p id="cb86" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">If you are using code to test the navigation bars, you will need to specify a specific device or a specific width and height in pixels.</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="fc97" class="rn pf ht rd b bg ro rp l rq rr">@Preview(showSystemUi = true, device = "spec:parent=pixel_8")</span></pre><p id="2abf" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Then, you can add navigation and set it to buttons for three button navigation or gesture for gesture navigation.</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="2f19" class="rn pf ht rd b bg ro rp l rq rr">@Preview(showSystemUi = true, device = <br/>"spec:parent=pixel_8,navigation=buttons")</span></pre><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc rj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*hgSrrcLej8RfTaNxOB5evQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*hgSrrcLej8RfTaNxOB5evQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*hgSrrcLej8RfTaNxOB5evQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*hgSrrcLej8RfTaNxOB5evQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*hgSrrcLej8RfTaNxOB5evQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*hgSrrcLej8RfTaNxOB5evQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*hgSrrcLej8RfTaNxOB5evQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*hgSrrcLej8RfTaNxOB5evQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*hgSrrcLej8RfTaNxOB5evQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*hgSrrcLej8RfTaNxOB5evQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*hgSrrcLej8RfTaNxOB5evQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*hgSrrcLej8RfTaNxOB5evQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*hgSrrcLej8RfTaNxOB5evQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*hgSrrcLej8RfTaNxOB5evQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="763" loading="lazy" role="presentation"/></picture></div></div></figure><p id="8623" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Now that you know how to test your app’s UI edge-to-edge implementation through Compose Preview, let’s go over automated testing.</p><h1 id="053a" class="qd pf ht bf pg qe qf qg pj qh qi qj pm qk ql qm qn qo qp qq qr qs qt qu qv qw bk">Automated testing strategies</h1><p id="d7bb" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">Once you have manually tested that your screen handles edge-to-edge as expected, you should consider adding automated tests to catch future regressions.</p><p id="74d8" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">We recommend using screenshot tests to verify your edge-to-edge implementation, as they verify the placement and dimension of your insets and the content that might be drawn behind.</p><p id="2ff4" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">You can use <a class="af op" href="https://developer.android.com/training/testing/instrumented-tests" rel="noopener ugc nofollow" target="_blank">instrumented tests</a> for the highest fidelity on emulators or physical devices. A single foldable emulator can cover most cases, and you can use <a class="af op" href="https://developer.android.com/studio/test/espresso-api" rel="noopener ugc nofollow" target="_blank">Espresso Device</a> to set the different screen orientations and foldable state:</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc se"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*zJW7TPL5LnigFTYygjy3VQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*zJW7TPL5LnigFTYygjy3VQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*zJW7TPL5LnigFTYygjy3VQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*zJW7TPL5LnigFTYygjy3VQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*zJW7TPL5LnigFTYygjy3VQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*zJW7TPL5LnigFTYygjy3VQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*zJW7TPL5LnigFTYygjy3VQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*zJW7TPL5LnigFTYygjy3VQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*zJW7TPL5LnigFTYygjy3VQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*zJW7TPL5LnigFTYygjy3VQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*zJW7TPL5LnigFTYygjy3VQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*zJW7TPL5LnigFTYygjy3VQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*zJW7TPL5LnigFTYygjy3VQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*zJW7TPL5LnigFTYygjy3VQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="298" loading="lazy" role="presentation"/></picture></div></div></figure><p id="aca5" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">To switch between navigation modes, you can use UI Automator to pass <code class="cx ra rb rc rd b">adb</code> commands:</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="4ee5" class="rn pf ht rd b bg ro rp l rq rr">UiDevice.getInstance(InstrumentationRegistry.getInstrumentation()).apply {<br/> executeShellCommand(<br/> "cmd overlay enable-exclusive " +<br/> "com.android.internal.systemui.navbar.gestural", // or .threebutton<br/> )<br/>}</span></pre><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc sf"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*di6xSQNhAB8Ax70G7a02SQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*di6xSQNhAB8Ax70G7a02SQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*di6xSQNhAB8Ax70G7a02SQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*di6xSQNhAB8Ax70G7a02SQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*di6xSQNhAB8Ax70G7a02SQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*di6xSQNhAB8Ax70G7a02SQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*di6xSQNhAB8Ax70G7a02SQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*di6xSQNhAB8Ax70G7a02SQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*di6xSQNhAB8Ax70G7a02SQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*di6xSQNhAB8Ax70G7a02SQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*di6xSQNhAB8Ax70G7a02SQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*di6xSQNhAB8Ax70G7a02SQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*di6xSQNhAB8Ax70G7a02SQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*di6xSQNhAB8Ax70G7a02SQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="153" loading="lazy" role="presentation"/></picture></div></div><figcaption class="sg ff sh hb hc si sj bf b bg z du"><em class="sk">An SDK 35 foldable emulator showing gesture and 3-button navigation, respectively</em></figcaption></figure><p id="65b7" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">The system bar contains a clock and icons that change every minute, breaking screenshot tests. You can enable <a class="af op" href="https://android.googlesource.com/platform/frameworks/base/+/master/packages/SystemUI/docs/demo_mode.md" rel="noopener ugc nofollow" target="_blank">demo mode</a> via adb commands to show the same system bar content every time:</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc sb"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*3-sf1AgOOC09BzoPYRae-A.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*3-sf1AgOOC09BzoPYRae-A.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*3-sf1AgOOC09BzoPYRae-A.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*3-sf1AgOOC09BzoPYRae-A.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*3-sf1AgOOC09BzoPYRae-A.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*3-sf1AgOOC09BzoPYRae-A.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*3-sf1AgOOC09BzoPYRae-A.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*3-sf1AgOOC09BzoPYRae-A.png 640w, https://miro.medium.com/v2/resize:fit:720/1*3-sf1AgOOC09BzoPYRae-A.png 720w, https://miro.medium.com/v2/resize:fit:750/1*3-sf1AgOOC09BzoPYRae-A.png 750w, https://miro.medium.com/v2/resize:fit:786/1*3-sf1AgOOC09BzoPYRae-A.png 786w, https://miro.medium.com/v2/resize:fit:828/1*3-sf1AgOOC09BzoPYRae-A.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*3-sf1AgOOC09BzoPYRae-A.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*3-sf1AgOOC09BzoPYRae-A.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="64" loading="lazy" role="presentation"/></picture></div></div><figcaption class="sg ff sh hb hc si sj bf b bg z du"><em class="sk">Demo mode enabled, showing a fixed time and icons</em></figcaption></figure><p id="86df" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Note that <code class="cx ra rb rc rd b">adb</code> commands are not synchronized, so you might need to implement a mechanism to wait or retry until each test passes. Alternatively, if you use Compose, there is a new wrapper that can help you catch most regressions:</p><h1 id="f05f" class="qd pf ht bf pg qe qf qg pj qh qi qj pm qk ql qm qn qo qp qq qr qs qt qu qv qw bk">Testing insets with Compose</h1><p id="ef9a" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">Compose 1.8.0-alpha01 ui-test includes a new <code class="cx ra rb rc rd b"><a class="af op" href="https://developer.android.com/training/testing/different-screens/tools#deviceconfigurationoverride" rel="noopener ugc nofollow" target="_blank">DeviceConfigurationOverride</a></code> for testing window insets, called <code class="cx ra rb rc rd b"><a class="af op" href="https://developer.android.com/reference/kotlin/androidx/compose/ui/test/DeviceConfigurationOverride.Companion#(androidx.compose.ui.test.DeviceConfigurationOverride.Companion).WindowInsets(androidx.core.view.WindowInsetsCompat)" rel="noopener ugc nofollow" target="_blank">DeviceConfigurationOverride.WindowInsets</a></code>.</p><p id="11ec" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">This allows for specifying an arbitrary <code class="cx ra rb rc rd b">WindowInsetsCompat</code> to apply to the composable under test:</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="2e17" class="rn pf ht rd b bg ro rp l rq rr">composeTestRule.setContent {<br/> DeviceConfigurationOverride(<br/> DeviceConfigurationOverride.WindowInsets(<br/> WindowInsetsCompat.Builder()<br/> .setInsets(<br/> WindowInsetsCompat.Type.statusBars(),<br/> DpRect(<br/> left = 0.dp,<br/> top = 64.dp,<br/> right = 0.dp,<br/> bottom = 0.dp,<br/> ).toAndroidXInsets(),<br/> )<br/> .setInsets(<br/> WindowInsetsCompat.Type.navigationBars(),<br/> DpRect(<br/> left = 64.dp,<br/> top = 0.dp,<br/> right = 64.dp,<br/> bottom = 64.dp,<br/> ).toInsets(),<br/> )<br/> .build(),<br/> ),<br/> )<br/> ) {<br/> Box {<br/> content() // Your content under test<br/> DebugVisibleWindowInsets(Modifier.fillMaxSize()) // Debug overlay (optional)<br/> }<br/> }<br/>}</span></pre><p id="012a" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">This can then be combined with a debug overlay for showing where the insets are:</p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="75cf" class="rn pf ht rd b bg ro rp l rq rr">@Composable<br/>fun DebugVisibleWindowInsets(<br/> modifier: Modifier = Modifier,<br/> debugColor: Color = Color.Magenta.copy(alpha = 0.5f),<br/>) {<br/> Box(modifier = modifier.fillMaxSize()) {<br/> Spacer(<br/> modifier = Modifier<br/> .align(Alignment.CenterStart)<br/> .fillMaxHeight()<br/> .windowInsetsStartWidth(WindowInsets.safeDrawing)<br/> .windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical))<br/> .background(debugColor),<br/> )<br/> Spacer(<br/> modifier = Modifier<br/> .align(Alignment.CenterEnd)<br/> .fillMaxHeight()<br/> .windowInsetsEndWidth(WindowInsets.safeDrawing)<br/> .windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical))<br/> .background(debugColor),<br/> )<br/> Spacer(<br/> modifier = Modifier<br/> .align(Alignment.TopCenter)<br/> .fillMaxWidth()<br/> .windowInsetsTopHeight(WindowInsets.safeDrawing)<br/> .background(debugColor),<br/> )<br/> Spacer(<br/> modifier = Modifier<br/> .align(Alignment.BottomCenter)<br/> .fillMaxWidth()<br/> .windowInsetsBottomHeight(WindowInsets.safeDrawing)<br/> .background(debugColor),<br/> )<br/> }<br/>}</span></pre><p id="9e59" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">Putting both together, a screenshot test can visually show where the insets are, and reveal if there is content that would be obscured by the insets, like the snackbar is below:</p><figure class="oz pa pb pc pd gs hb hc paragraph-image"><div role="button" tabindex="0" class="hl hm fj hn bh ho"><div class="hb hc sl"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*8L3pnhdPaNA-3OlWiX7-CA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*8L3pnhdPaNA-3OlWiX7-CA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*8L3pnhdPaNA-3OlWiX7-CA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*8L3pnhdPaNA-3OlWiX7-CA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*8L3pnhdPaNA-3OlWiX7-CA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*8L3pnhdPaNA-3OlWiX7-CA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*8L3pnhdPaNA-3OlWiX7-CA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*8L3pnhdPaNA-3OlWiX7-CA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*8L3pnhdPaNA-3OlWiX7-CA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*8L3pnhdPaNA-3OlWiX7-CA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*8L3pnhdPaNA-3OlWiX7-CA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*8L3pnhdPaNA-3OlWiX7-CA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*8L3pnhdPaNA-3OlWiX7-CA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*8L3pnhdPaNA-3OlWiX7-CA.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh hp hq c" width="700" height="700" loading="lazy" role="presentation"/></picture></div></div><figcaption class="sg ff sh hb hc si sj bf b bg z du"><em class="sk">A screenshot test for the Now In Android app, identifying an issue with the snackbar</em></figcaption></figure><p id="a4c4" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">For an example of this in action, check out this Now in Android PR, which adds screenshot tests with applying insets: <a class="af op" href="https://github.com/android/nowinandroid/pull/1498/" rel="noopener ugc nofollow" target="_blank">https://github.com/android/nowinandroid/pull/1498/</a></p><h1 id="e799" class="qd pf ht bf pg qe qf qg pj qh qi qj pm qk ql qm qn qo qp qq qr qs qt qu qv qw bk">QA Testing</h1><p id="1e70" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">Your app might decide to create a QA team to test every screen, or at least your most important screens.</p><p id="858b" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk">There are three approaches to assist your QA team in seeing the impacts of the edge-to-edge enforcement:</p><ol class=""><li id="6dcc" class="nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on sm qy qz bk">Distribute APKs that are targeting SDK 35 on Android 15 devices or emulators.</li><li id="6a76" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on sm qy qz bk">OR, enable the <code class="cx ra rb rc rd b"><a class="af op" href="https://developer.android.com/about/versions/15/reference/compat-framework-changes#enforce_edge_to_edge" rel="noopener ugc nofollow" target="_blank">ENFORCE_EDGE_TO_EDGE</a></code> flag in the <a class="af op" href="https://developer.android.com/guide/app-compatibility/test-debug" rel="noopener ugc nofollow" target="_blank">App Compatibility Change Developer Option</a> on an Android 15 device without having to target SDK 35.</li><li id="bfd9" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on sm qy qz bk">OR, call <code class="cx ra rb rc rd b"><a class="af op" href="https://developer.android.com/reference/androidx/activity/ComponentActivity#(androidx.activity.ComponentActivity).enableEdgeToEdge(androidx.activity.SystemBarStyle,androidx.activity.SystemBarStyle)" rel="noopener ugc nofollow" target="_blank">enableEdgeToEdge</a></code> on each Activity to simulate the Android 15 platform enforcement without having to target SDK 35 and without needing an Android 15 device.</li></ol><h1 id="c4d3" class="qd pf ht bf pg qe qf qg pj qh qi qj pm qk ql qm qn qo qp qq qr qs qt qu qv qw bk">Summary</h1><p id="4ea8" class="pw-post-body-paragraph nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on gn bk">Apps targeting API35 will be edge-to-edge by default in order to give your users a more satisfying and high quality experience. You can test your UI, including cutouts and navigation bars, using Compose Preview in the Canary version of Android Studio Ladybug, and in automating testing with the new <code class="cx ra rb rc rd b">DeviceConfigurationOverride</code>. Please be sure to leave us any feedback using <a class="af op" href="https://developer.android.com/studio/report-bugs" rel="noopener ugc nofollow" target="_blank">these instructions</a>.</p><h1 id="9a8c" class="qd pf ht bf pg qe qf qg pj qh qi qj pm qk ql qm qn qo qp qq qr qs qt qu qv qw bk">Additional Resources</h1><ul class=""><li id="1974" class="nq nr ht ns b nt px nv nw nx py nz oa ob pz od oe of qa oh oi oj qb ol om on qx qy qz bk"><a class="af op" href="https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge" rel="noopener ugc nofollow" target="_blank">Android 15 Edge to Edge Enforcement</a> documentation</li><li id="f4d9" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk"><a class="af op" href="https://developer.android.com/codelabs/edge-to-edge?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fimprove-user-experience%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fedge-to-edge#0" rel="noopener ugc nofollow" target="_blank">Handle edge-to-edge enforcements in Android 15 Codelab</a></li><li id="cfdf" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk"><a class="af op" href="https://developer.android.com/develop/ui/compose/layouts/insets" rel="noopener ugc nofollow" target="_blank">Edge-to-Edge</a> (Compose documentation)</li><li id="e269" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk"><a class="af op" href="https://developer.android.com/develop/ui/views/layout/edge-to-edge" rel="noopener ugc nofollow" target="_blank">Edge-to-Edge</a> (Views documentation)</li><li id="c9ec" class="nq nr ht ns b nt re nv nw nx rf nz oa ob rg od oe of rh oh oi oj ri ol om on qx qy qz bk"><a class="af op" href="https://www.youtube.com/watch?v=QRzepC9gHj4&t=2s" rel="noopener ugc nofollow" target="_blank">Edge-to-Edge & Insets: Compose Delightful Tips</a> (Video)</li></ul></div></div></div><div class="ab cb oq or os ot" role="separator"><span class="ou by bm ov ow ox"></span><span class="ou by bm ov ow ox"></span><span class="ou by bm ov ow"></span></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><p id="f9f7" class="pw-post-body-paragraph nq nr ht ns b nt nu nv nw nx ny nz oa ob oc od oe of og oh oi oj ok ol om on gn bk"><em class="oo">The code snippets in this blog have the following license:</em></p><pre class="oz pa pb pc pd rk rd rl bp rm bb bk"><span id="f01d" class="rn pf ht rd b bg ro rp l rq rr">//Copyright 2024 Google LLC. SPDX-License-Identifier: Apache-2.0</span></pre></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="sn so ab jz"><div class="sp ab"><a class="sq ay am ao" rel="noopener follow" href="/tag/edge-to-edge?source=post_page-----da645c905d78---------------------------------------"><div class="sr fj cx ss ge st su bf b bg z bk sv">Edge To Edge</div></a></div><div class="sp ab"><a class="sq ay am ao" rel="noopener follow" href="/tag/android-15?source=post_page-----da645c905d78---------------------------------------"><div class="sr fj cx ss ge st su bf b bg z bk sv">Android 15</div></a></div><div class="sp ab"><a class="sq ay am ao" rel="noopener follow" href="/tag/android-15-new-features?source=post_page-----da645c905d78---------------------------------------"><div class="sr fj cx ss ge st su bf b bg z bk sv">Android 15 New Features</div></a></div><div class="sp ab"><a class="sq ay am ao" rel="noopener follow" href="/tag/best-practices?source=post_page-----da645c905d78---------------------------------------"><div class="sr fj cx ss ge st su bf b bg z bk sv">Best Practices</div></a></div></div></div></div><div class="l"></div><footer class="sw sx sy sz ta ab q tb jj c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp tc"><div class="ab q ls"><div class="td l"><span class="l te tf tg e d"><div class="ab q ls lt"><div class="pw-multi-vote-icon fj kb lu lv lw"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fandroiddevelopers%2Fda645c905d78&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&user=Meghan+Mehta&userId=401951cd4c3e&source=---footer_actions--da645c905d78---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="lx ao ly lz ma mb am mc md me lw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mf mg mh mi mj mk ml"><p class="bf b dv z du"><span class="mm">--</span></p></div></div></span><span class="l h g f th ti"><div class="ab q ls lt"><div class="pw-multi-vote-icon fj kb lu lv lw"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fandroiddevelopers%2Fda645c905d78&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&user=Meghan+Mehta&userId=401951cd4c3e&source=---footer_actions--da645c905d78---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="lx ao ly lz ma mb am mc md me lw"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l mf mg mh mi mj mk ml"><p class="bf b dv z du"><span class="mm">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao lx mp mq ab q fk mr ms" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mo"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count mn mo">1</span></p></button></div></div></div></div><div class="ab q"><div class="ox l jw"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fda645c905d78&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78&source=---footer_actions--da645c905d78---------------------bookmark_footer------------------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mu" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="ox l jw"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al my an ao ap ex mz na ms nb"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="tj l"><div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="tk l"><div class="ab tl tm tn jy jx"><div class="to tp tq tr ts tt tu tv tw tx ab cp"><div class="h k"><a href="https://medium.com/androiddevelopers?source=post_page---post_publication_info--da645c905d78---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Android Developers" class="ty ja jb cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*4Tg6pPzer7cIarYaszIKaQ.png" width="48" height="48" loading="lazy"/><div class="ty l jb ja fs n fr tz"></div></div></a></div><div class="j i d"><a href="https://medium.com/androiddevelopers?source=post_page---post_publication_info--da645c905d78---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Android Developers" class="ty ub ua cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*4Tg6pPzer7cIarYaszIKaQ.png" width="64" height="64" loading="lazy"/><div class="ty l ua ub fs n fr tz"></div></div></a></div><div class="j i d uc jw"><div class="ab"></div></div></div><div class="ab co ud"><div class="ue uf ug gw gu l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/androiddevelopers?source=post_page---post_publication_info--da645c905d78---------------------------------------" rel="noopener follow"><h2 class="pw-author-name bf ui uj uk ul um un uo ob po pp of pr ps oj pu pv bk"><span class="gn uh">Published in <!-- -->Android Developers</span></h2></a><div class="sp ab iz"><div class="l jw"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jp" rel="noopener follow" href="/androiddevelopers/followers?source=post_page---post_publication_info--da645c905d78---------------------------------------">53K Followers</a></span></div><div class="bf b bg z du ab ka"><span class="jq l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jp" rel="noopener follow" href="/androiddevelopers/now-in-android-113-d6617517df62?source=post_page---post_publication_info--da645c905d78---------------------------------------">Last published <span>Jan 23, 2025</span></a></div></div><div class="sd l"><p class="bf b bg z bk"><span class="gn">Articles on modern tools and resources to help you build experiences that people love, faster and easier, across every Android device.</span></p></div></div></div><div class="h k"><div class="ab"></div></div></div></div><div class="ab tl tm tn jy jx"><div class="to tp tq tr ts tt tu tv tw tx ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@magicalmeghan?source=post_page---post_author_info--da645c905d78---------------------------------------"><div class="l fj"><img alt="Meghan Mehta" class="l fd by jb ja cx" src="https://miro.medium.com/v2/resize:fill:96:96/0*eEs786UmP2FQS810" width="48" height="48" loading="lazy"/><div class="fr by l jb ja fs n ay tz"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@magicalmeghan?source=post_page---post_author_info--da645c905d78---------------------------------------"><div class="l fj"><img alt="Meghan Mehta" class="l fd by ua ub cx" src="https://miro.medium.com/v2/resize:fill:128:128/0*eEs786UmP2FQS810" width="64" height="64" loading="lazy"/><div class="fr by l ua ub fs n ay tz"></div></div></a></div><div class="j i d uc jw"><div class="ab"><span><button class="bf b bg z up sr uq ur us ut uu ev ew uv uw ux fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co ud"><div class="ue uf ug gw gu l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@magicalmeghan?source=post_page---post_author_info--da645c905d78---------------------------------------"><h2 class="pw-author-name bf ui uj uk ul um un uo ob po pp of pr ps oj pu pv bk"><span class="gn uh">Written by <!-- -->Meghan Mehta</span></h2></a><div class="sp ab iz"><div class="l jw"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar jp" rel="noopener follow" href="/@magicalmeghan/followers?source=post_page---post_author_info--da645c905d78---------------------------------------">1.8K Followers</a></span></div><div class="bf b bg z du ab ka"><span class="jq l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar jp" rel="noopener follow" href="/@magicalmeghan/following?source=post_page---post_author_info--da645c905d78---------------------------------------">5 Following</a></div></div><div class="sd l"></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z up sr uq ur us ut uu ev ew uv uw ux fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div></div><div class="uy uz va vb vc l"><div class="vd bh r tj"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf ui qe qg pj qh qj pm qk qm qn qo qq qr qs qu qv bk">Responses (<!-- -->1<!-- -->)</h2><div class="ab ve"><div><div class="bm" aria-hidden="false"><a class="vf vg" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--da645c905d78---------------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="vh vi vj vk vl vm vn l"></div><div class="oq l"><button class="bf b bg z bk sr vo vp vq mu mr uu ev ew ex vr vs vt fa vu vv vw vx vy fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="vz wa wb wc wd l bx"><div class="h k j"><div class="vd bh we wf"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="wg ab ls jz"><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----da645c905d78---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----da645c905d78---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/about?autoplay=1&source=post_page-----da645c905d78---------------------------------------"><p class="bf b dv z du">About</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----da645c905d78---------------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="mailto:pressinquiries@medium.com" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----da645c905d78---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----da645c905d78---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----da645c905d78---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="wh wi l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----da645c905d78---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="wh l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/business?source=post_page-----da645c905d78---------------------------------------"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20250214-225023-b6ac233ec4"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCachePosts","post-da645c905d78","user-401951cd4c3e","collection-95b274b437c2"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"pubFeaturingPostPageLabelEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"1decd81f-d2d9-4680-990d-6cecaf01cc1c","requestTag":"","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-ff4a220116670d396f7c58ed69cb3615-4e84da60c3da03da-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20250214-225023-b6ac233ec4","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20250214-225023-b6ac233ec4","commit":"b6ac233ec4e33c48e304b373b7df8c338a410ef2"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"androiddevelopers\"})":{"__ref":"Collection:95b274b437c2"},"postResult({\"id\":\"da645c905d78\"})":{"__ref":"Post:da645c905d78"}},"ImageMetadata:":{"__typename":"ImageMetadata","id":""},"Collection:95b274b437c2":{"__typename":"Collection","id":"95b274b437c2","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFF4F2F3","point":0},{"__typename":"ColorPoint","color":"#FFF2F0F1","point":0.1},{"__typename":"ColorPoint","color":"#FFF0EEEF","point":0.2},{"__typename":"ColorPoint","color":"#FFEEECEE","point":0.3},{"__typename":"ColorPoint","color":"#FFECEAEC","point":0.4},{"__typename":"ColorPoint","color":"#FFEAE8EA","point":0.5},{"__typename":"ColorPoint","color":"#FFE8E7E9","point":0.6},{"__typename":"ColorPoint","color":"#FFE6E5E7","point":0.7},{"__typename":"ColorPoint","color":"#FFE4E3E5","point":0.8},{"__typename":"ColorPoint","color":"#FFE2E1E4","point":0.9},{"__typename":"ColorPoint","color":"#FFE0DFE2","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF848488","point":0},{"__typename":"ColorPoint","color":"#FF7B7B7E","point":0.1},{"__typename":"ColorPoint","color":"#FF717275","point":0.2},{"__typename":"ColorPoint","color":"#FF68686B","point":0.3},{"__typename":"ColorPoint","color":"#FF5E5E60","point":0.4},{"__typename":"ColorPoint","color":"#FF545456","point":0.5},{"__typename":"ColorPoint","color":"#FF4A494B","point":0.6},{"__typename":"ColorPoint","color":"#FF3F3E40","point":0.7},{"__typename":"ColorPoint","color":"#FF333334","point":0.8},{"__typename":"ColorPoint","color":"#FF272728","point":0.9},{"__typename":"ColorPoint","color":"#FF1A1A1A","point":1}]},"tintBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FF202124","colorPoints":[{"__typename":"ColorPoint","color":"#FF202124","point":0},{"__typename":"ColorPoint","color":"#FF3D3E41","point":0.1},{"__typename":"ColorPoint","color":"#FF58585B","point":0.2},{"__typename":"ColorPoint","color":"#FF707073","point":0.3},{"__typename":"ColorPoint","color":"#FF878689","point":0.4},{"__typename":"ColorPoint","color":"#FF9D9C9E","point":0.5},{"__typename":"ColorPoint","color":"#FFB2B1B2","point":0.6},{"__typename":"ColorPoint","color":"#FFC6C5C6","point":0.7},{"__typename":"ColorPoint","color":"#FFDAD8DA","point":0.8},{"__typename":"ColorPoint","color":"#FFEEEBEC","point":0.9},{"__typename":"ColorPoint","color":"#FFFFFEFF","point":1}]}},"domain":null,"slug":"androiddevelopers","googleAnalyticsId":null,"name":"Android Developers","avatar":{"__ref":"ImageMetadata:1*4Tg6pPzer7cIarYaszIKaQ.png"},"description":"Articles on modern tools and resources to help you build experiences that people love, faster and easier, across every Android device.","subscriberCount":53879,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:d6617517df62"}]},"isAuroraVisible":false,"tintColor":"#FF202124","newsletterV3":null,"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:95b274b437c2-viewerId:lo_ab77f5918a88"},"twitterUsername":"androiddev","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*5pMw_nx55x_66tk77kutPQ.png"}},"ImageMetadata:1*4Tg6pPzer7cIarYaszIKaQ.png":{"__typename":"ImageMetadata","id":"1*4Tg6pPzer7cIarYaszIKaQ.png"},"User:06594c43b26a":{"__typename":"User","id":"06594c43b26a","customDomainState":null,"hasSubdomain":false,"username":"trambui09"},"Post:d6617517df62":{"__typename":"Post","id":"d6617517df62","firstPublishedAt":1737675843592,"creator":{"__ref":"User:06594c43b26a"},"collection":{"__ref":"Collection:95b274b437c2"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fnow-in-android-113-d6617517df62","sequence":null,"uniqueSlug":"now-in-android-113-d6617517df62"},"LinkedAccounts:401951cd4c3e":{"__typename":"LinkedAccounts","mastodon":null,"id":"401951cd4c3e"},"User:401951cd4c3e":{"__typename":"User","id":"401951cd4c3e","linkedAccounts":{"__ref":"LinkedAccounts:401951cd4c3e"},"isSuspended":false,"name":"Meghan Mehta","imageId":"0*eEs786UmP2FQS810","customDomainState":null,"hasSubdomain":false,"username":"magicalmeghan","verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":1883,"followingCount":5,"collectionFollowingCount":0},"bio":"","membership":null,"allowNotes":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:401951cd4c3e-viewerId:lo_ab77f5918a88"},"twitterScreenName":""},"ImageMetadata:1*cbWmzhcQsly95rHdfYZA1g.png":{"__typename":"ImageMetadata","id":"1*cbWmzhcQsly95rHdfYZA1g.png","originalHeight":5221,"originalWidth":17538,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_0":{"__typename":"Paragraph","id":"83096223f2bc_0","name":"b01c","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*cbWmzhcQsly95rHdfYZA1g.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_1":{"__typename":"Paragraph","id":"83096223f2bc_1","name":"5eaa","type":"H3","href":null,"layout":null,"metadata":null,"text":"Preview and test your app’s edge-to-edge UI","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_2":{"__typename":"Paragraph","id":"83096223f2bc_2","name":"d96e","type":"P","href":null,"layout":null,"metadata":null,"text":"This blog post is part of our series: Spotlight Week on Android 15, where we provide resources — blog posts, videos, sample code, and more — all designed to help you prepare your apps and take advantage of the latest features in Android 15. You can read more in the overview of Spotlight Week: Android 15 here, which will be updated throughout the week.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":249,"end":309,"href":"https:\u002F\u002Fandroid-developers.googleblog.com\u002F2024\u002F09\u002Fandroid-15-spotlight-week.html","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":0,"end":353,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_3":{"__typename":"Paragraph","id":"83096223f2bc_3","name":"6af7","type":"P","href":null,"layout":null,"metadata":null,"text":"Starting in Android 15, once your app targets API 35, edge-to-edge will be enforced. Edge-to-edge means the status bar at the top and the gesture navigation bar at the bottom will be transparent by default, a look many users prefer.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*01MrpLiWpn3u_bANKyzYGA.gif":{"__typename":"ImageMetadata","id":"1*01MrpLiWpn3u_bANKyzYGA.gif","originalHeight":900,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_4":{"__typename":"Paragraph","id":"83096223f2bc_4","name":"1528","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*01MrpLiWpn3u_bANKyzYGA.gif"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_5":{"__typename":"Paragraph","id":"83096223f2bc_5","name":"63d8","type":"H4","href":null,"layout":null,"metadata":null,"text":"How will this affect your apps?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_6":{"__typename":"Paragraph","id":"83096223f2bc_6","name":"25d8","type":"P","href":null,"layout":null,"metadata":null,"text":"When targeting API 35, your app’s UI might be hidden beneath system bars or display cutouts, causing layout issues. This image shows problems with the status bar, pinhole cutout, and navigation bar. To learn how to address these issues, refer to Insets handling tips for Android 15’s edge-to-edge enforcement.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":246,"end":308,"href":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Finsets-handling-tips-for-android-15s-edge-to-edge-enforcement-872774e8839b","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*095S8QySirLCel5mGyBPPA.png":{"__typename":"ImageMetadata","id":"1*095S8QySirLCel5mGyBPPA.png","originalHeight":540,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_7":{"__typename":"Paragraph","id":"83096223f2bc_7","name":"a02b","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*095S8QySirLCel5mGyBPPA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_8":{"__typename":"Paragraph","id":"83096223f2bc_8","name":"bc18","type":"P","href":null,"layout":null,"metadata":null,"text":"Let’s see how Compose Previews can help your app achieve a seamless edge-to-edge layout and provide a high quality user experience.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_9":{"__typename":"Paragraph","id":"83096223f2bc_9","name":"2466","type":"H3","href":null,"layout":null,"metadata":null,"text":"Edge-to-edge support in Compose Preview","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_10":{"__typename":"Paragraph","id":"83096223f2bc_10","name":"10ee","type":"P","href":null,"layout":null,"metadata":null,"text":"We have a number of new Compose Preview features for testing edge-to-edge that are available for you to try in the latest Canary version of Android Studio Ladybug. Note that these features are still under development, and your feedback is invaluable in making them the best they can be.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":24,"end":39,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fui\u002Fcompose\u002Ftooling\u002Fpreviews","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":115,"end":136,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fstudio\u002Fpreview","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_11":{"__typename":"Paragraph","id":"83096223f2bc_11","name":"d67b","type":"P","href":null,"layout":null,"metadata":null,"text":"Here is a quick overview of what we will cover:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_12":{"__typename":"Paragraph","id":"83096223f2bc_12","name":"89e1","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Improvements to showSystemUI","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":16,"end":28,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_13":{"__typename":"Paragraph","id":"83096223f2bc_13","name":"ed4f","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Testing your UI on specific devices","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_14":{"__typename":"Paragraph","id":"83096223f2bc_14","name":"0c41","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Testing your UI with different types of cutouts","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_15":{"__typename":"Paragraph","id":"83096223f2bc_15","name":"8d3d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Testing your UI with both types of navigation bars","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_16":{"__typename":"Paragraph","id":"83096223f2bc_16","name":"4821","type":"P","href":null,"layout":null,"metadata":null,"text":"Please share your feedback and suggestions using the instructions here.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":66,"end":70,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fstudio\u002Freport-bugs","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_17":{"__typename":"Paragraph","id":"83096223f2bc_17","name":"cff9","type":"H4","href":null,"layout":null,"metadata":null,"text":"Improvements to showSystemUI","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_18":{"__typename":"Paragraph","id":"83096223f2bc_18","name":"6103","type":"P","href":null,"layout":null,"metadata":null,"text":"In previous versions of Android Studio, you could view your screen level Compose Preview by using showSystemUi. However, it would show a system-generated status bar that looks different than it does on the emulator.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":98,"end":110,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*vKdMfqG1fBX-33DyXG3hPg.png":{"__typename":"ImageMetadata","id":"1*vKdMfqG1fBX-33DyXG3hPg.png","originalHeight":1710,"originalWidth":1504,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_19":{"__typename":"Paragraph","id":"83096223f2bc_19","name":"3d77","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*vKdMfqG1fBX-33DyXG3hPg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_20":{"__typename":"Paragraph","id":"83096223f2bc_20","name":"d2f1","type":"P","href":null,"layout":null,"metadata":null,"text":"In anticipation of the Android 15 changes, we’ve been fixing this feature so that you can see a more accurate rendering of your UI with the system UI. To see the updated Preview, you can set showSystemUi to true in code through Android Studio Ladybug Feature Drop Canary 1 or higher.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":191,"end":203,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":228,"end":272,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fstudio\u002Fpreview","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_21":{"__typename":"Paragraph","id":"83096223f2bc_21","name":"f8c6","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Preview(showSystemUi = true)","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"graphql"},"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*caWt09L46UJNntMiMfL0Dg.png":{"__typename":"ImageMetadata","id":"1*caWt09L46UJNntMiMfL0Dg.png","originalHeight":1738,"originalWidth":1502,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_22":{"__typename":"Paragraph","id":"83096223f2bc_22","name":"b8fd","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*caWt09L46UJNntMiMfL0Dg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_23":{"__typename":"Paragraph","id":"83096223f2bc_23","name":"dde1","type":"P","href":null,"layout":null,"metadata":null,"text":"Note: Using showSystemUi will show your app’s UI with edge-to-edge on Compose Preview even if you are targeting SDK 34 or lower. We encourage you to consider the default edge-to-edge behavior when designing your apps.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":12,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":0,"end":5,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_24":{"__typename":"Paragraph","id":"83096223f2bc_24","name":"3696","type":"H4","href":null,"layout":null,"metadata":null,"text":"Preview picker","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_25":{"__typename":"Paragraph","id":"83096223f2bc_25","name":"4e87","type":"P","href":null,"layout":null,"metadata":null,"text":"You can also use Compose Preview picker to access the list of new features we added for Android 15.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_26":{"__typename":"Paragraph","id":"83096223f2bc_26","name":"4912","type":"P","href":null,"layout":null,"metadata":null,"text":"Preview picker is currently experimental. To turn it on, goto Android Studio \u003E Settings \u003E Experimental and check the Enable @Preview picker check box.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":62,"end":102,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":116,"end":139,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*fL4ovYsMXOUj5NTVadZohQ.png":{"__typename":"ImageMetadata","id":"1*fL4ovYsMXOUj5NTVadZohQ.png","originalHeight":542,"originalWidth":444,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_27":{"__typename":"Paragraph","id":"83096223f2bc_27","name":"0ae2","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*fL4ovYsMXOUj5NTVadZohQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*bma3NWe5QfzXCRiGG0eoOg.png":{"__typename":"ImageMetadata","id":"1*bma3NWe5QfzXCRiGG0eoOg.png","originalHeight":751,"originalWidth":993,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_28":{"__typename":"Paragraph","id":"83096223f2bc_28","name":"d084","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*bma3NWe5QfzXCRiGG0eoOg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_29":{"__typename":"Paragraph","id":"83096223f2bc_29","name":"063d","type":"P","href":null,"layout":null,"metadata":null,"text":"Then, you can use the Preview picker, which can be accessed by clicking the gear icon to the left of the Preview annotation.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*aaH_JuNxrMT5AzJhTzKxgw.png":{"__typename":"ImageMetadata","id":"1*aaH_JuNxrMT5AzJhTzKxgw.png","originalHeight":60,"originalWidth":270,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_30":{"__typename":"Paragraph","id":"83096223f2bc_30","name":"bd0c","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*aaH_JuNxrMT5AzJhTzKxgw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_31":{"__typename":"Paragraph","id":"83096223f2bc_31","name":"016f","type":"P","href":null,"layout":null,"metadata":null,"text":"In the Display section, set showSystemUi to true.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":28,"end":40,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":44,"end":48,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*YGeQkPnmoSw6nX64EUflmA.png":{"__typename":"ImageMetadata","id":"1*YGeQkPnmoSw6nX64EUflmA.png","originalHeight":884,"originalWidth":1574,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_32":{"__typename":"Paragraph","id":"83096223f2bc_32","name":"0be0","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*YGeQkPnmoSw6nX64EUflmA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_33":{"__typename":"Paragraph","id":"83096223f2bc_33","name":"f28d","type":"P","href":null,"layout":null,"metadata":null,"text":"Now, you can more accurately view how your app’s status and navigation bar will look with edge-to-edge implemented through both code and the Preview picker. You may also want to see how your app looks on a specific device, like a Pixel 8 Pro. Let’s see how you can achieve that through Compose Preview.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_34":{"__typename":"Paragraph","id":"83096223f2bc_34","name":"b288","type":"H4","href":null,"layout":null,"metadata":null,"text":"Test specific devices","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_35":{"__typename":"Paragraph","id":"83096223f2bc_35","name":"2630","type":"P","href":null,"layout":null,"metadata":null,"text":"You can now specify a device you want the Preview to be displayed on. This allows you to view your screen with that device’s specific cutouts and sizing.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_36":{"__typename":"Paragraph","id":"83096223f2bc_36","name":"f566","type":"P","href":null,"layout":null,"metadata":null,"text":"Through the Preview picker, you can specify what device you want your Preview to be rendered on in the Device dropdown in the Hardware section.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":103,"end":109,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":126,"end":134,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*rEsqwcjYlJcJJAmKcnpHqQ.png":{"__typename":"ImageMetadata","id":"1*rEsqwcjYlJcJJAmKcnpHqQ.png","originalHeight":888,"originalWidth":1580,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_37":{"__typename":"Paragraph","id":"83096223f2bc_37","name":"44d1","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*rEsqwcjYlJcJJAmKcnpHqQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_38":{"__typename":"Paragraph","id":"83096223f2bc_38","name":"edc9","type":"P","href":null,"layout":null,"metadata":null,"text":"To do this manually, add a device parameter to the Preview annotation and set it to device = “id:pixel_8_pro”. Note that autocomplete will work, so if you type device = “id:pixel” then it will fill in all of the Pixel options you can test against in your Preview.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":84,"end":109,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":160,"end":179,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_39":{"__typename":"Paragraph","id":"83096223f2bc_39","name":"d694","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Preview(device = \"id:pixel_8_pro\", showSystemUi = true)","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"graphql"},"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_40":{"__typename":"Paragraph","id":"83096223f2bc_40","name":"09fa","type":"P","href":null,"layout":null,"metadata":null,"text":"You can now view your app as it would be displayed on a Pixel 8 Pro through your Preview.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_41":{"__typename":"Paragraph","id":"83096223f2bc_41","name":"3980","type":"P","href":null,"layout":null,"metadata":null,"text":"Note: Your navigation bar color may not be correct in the Preview and the status bar icons padding may also be different from a real device.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":5,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*GE2rYyK5lIlPPTZ1dY7fFw.png":{"__typename":"ImageMetadata","id":"1*GE2rYyK5lIlPPTZ1dY7fFw.png","originalHeight":1240,"originalWidth":564,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_42":{"__typename":"Paragraph","id":"83096223f2bc_42","name":"29f9","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*GE2rYyK5lIlPPTZ1dY7fFw.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_43":{"__typename":"Paragraph","id":"83096223f2bc_43","name":"ae15","type":"P","href":null,"layout":null,"metadata":null,"text":"Here is how the same app looks on different device types:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*yQEATVJmfdp3cnvI10myUQ.png":{"__typename":"ImageMetadata","id":"1*yQEATVJmfdp3cnvI10myUQ.png","originalHeight":1358,"originalWidth":1770,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_44":{"__typename":"Paragraph","id":"83096223f2bc_44","name":"e69d","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*yQEATVJmfdp3cnvI10myUQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_45":{"__typename":"Paragraph","id":"83096223f2bc_45","name":"e1c8","type":"H4","href":null,"layout":null,"metadata":null,"text":"Cutouts","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_46":{"__typename":"Paragraph","id":"83096223f2bc_46","name":"8614","type":"P","href":null,"layout":null,"metadata":null,"text":"Instead of testing specific devices, you may want to just test that your app’s UI renders correctly with a specific type of cutout. There are multiple types of cutouts to be aware of. In the table above, you can see that the Pixel 5 and Pixel 6 have different types of cutouts.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_47":{"__typename":"Paragraph","id":"83096223f2bc_47","name":"7cff","type":"P","href":null,"layout":null,"metadata":null,"text":"In Previews, we support testing for the following cutouts:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_48":{"__typename":"Paragraph","id":"83096223f2bc_48","name":"547e","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Corner","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_49":{"__typename":"Paragraph","id":"83096223f2bc_49","name":"f524","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Double","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_50":{"__typename":"Paragraph","id":"83096223f2bc_50","name":"67cc","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Punch hole","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_51":{"__typename":"Paragraph","id":"83096223f2bc_51","name":"128c","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Tall","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_52":{"__typename":"Paragraph","id":"83096223f2bc_52","name":"c785","type":"P","href":null,"layout":null,"metadata":null,"text":"Note: we don’t currently support the center cutout that the Pixel uses in Previews","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":5,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*o_woI6d_r_UkwFfuHU-HMQ.png":{"__typename":"ImageMetadata","id":"1*o_woI6d_r_UkwFfuHU-HMQ.png","originalHeight":1052,"originalWidth":1840,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_53":{"__typename":"Paragraph","id":"83096223f2bc_53","name":"e93d","type":"IMG","href":null,"layout":"OUTSET_CENTER","metadata":{"__ref":"ImageMetadata:1*o_woI6d_r_UkwFfuHU-HMQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_54":{"__typename":"Paragraph","id":"83096223f2bc_54","name":"a264","type":"P","href":null,"layout":null,"metadata":null,"text":"Here’s how the UI of an app using edge-to-edge can go wrong because of a cutout:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Vkku5jUxOGhUB-lAA8RZpA.png":{"__typename":"ImageMetadata","id":"1*Vkku5jUxOGhUB-lAA8RZpA.png","originalHeight":1167,"originalWidth":1999,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_55":{"__typename":"Paragraph","id":"83096223f2bc_55","name":"e442","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Vkku5jUxOGhUB-lAA8RZpA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_56":{"__typename":"Paragraph","id":"83096223f2bc_56","name":"0d40","type":"P","href":null,"layout":null,"metadata":null,"text":"Among other issues, this app’s cutout overlaps the list content.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_57":{"__typename":"Paragraph","id":"83096223f2bc_57","name":"c2a3","type":"P","href":null,"layout":null,"metadata":null,"text":"This is why it is important to test how your UI reacts to different types of cutouts through your Compose Preview.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_58":{"__typename":"Paragraph","id":"83096223f2bc_58","name":"7d1a","type":"P","href":null,"layout":null,"metadata":null,"text":"In the Preview picker, under the Hardware section, find the Cutout dropdown and specify the cutout you would like to test.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":33,"end":41,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":60,"end":66,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*BAjQVIFdBYo4OAZfpiu_jg.png":{"__typename":"ImageMetadata","id":"1*BAjQVIFdBYo4OAZfpiu_jg.png","originalHeight":876,"originalWidth":1576,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_59":{"__typename":"Paragraph","id":"83096223f2bc_59","name":"b679","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*BAjQVIFdBYo4OAZfpiu_jg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_60":{"__typename":"Paragraph","id":"83096223f2bc_60","name":"6398","type":"P","href":null,"layout":null,"metadata":null,"text":"If you are doing this through code, note that you will first have to specify a device spec either through a specific device or a specific width and height in pixels.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_61":{"__typename":"Paragraph","id":"83096223f2bc_61","name":"27d6","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Preview(showSystemUi = true, device = \"spec:parent=pixel_8\")","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"graphql"},"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_62":{"__typename":"Paragraph","id":"83096223f2bc_62","name":"d858","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Preview(showSystemUi = true, device = \"spec:width=1080px,height=2340px\")","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"graphql"},"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_63":{"__typename":"Paragraph","id":"83096223f2bc_63","name":"abbc","type":"P","href":null,"layout":null,"metadata":null,"text":"Then, within the device spec, you can also add cutout and set it equal to the type of cutout you want to test.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_64":{"__typename":"Paragraph","id":"83096223f2bc_64","name":"be12","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Preview(showSystemUi = true, device = \n“spec:width=1080px,height=2400px,cutout=punch_hole”)","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"css"},"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_65":{"__typename":"Paragraph","id":"83096223f2bc_65","name":"fbd9","type":"H4","href":null,"layout":null,"metadata":null,"text":"Navigation bar","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_66":{"__typename":"Paragraph","id":"83096223f2bc_66","name":"927f","type":"P","href":null,"layout":null,"metadata":null,"text":"For edge-to-edge, there are different UI standards for gesture navigation vs three button navigation.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_67":{"__typename":"Paragraph","id":"83096223f2bc_67","name":"54e5","type":"P","href":null,"layout":null,"metadata":null,"text":"Gesture navigation:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":19,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_68":{"__typename":"Paragraph","id":"83096223f2bc_68","name":"dd6b","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Transparent by default","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_69":{"__typename":"Paragraph","id":"83096223f2bc_69","name":"cb88","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Bottom offset is disabled, but you can apply insets","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_70":{"__typename":"Paragraph","id":"83096223f2bc_70","name":"9409","type":"ULI","href":null,"layout":null,"metadata":null,"text":"setNavigationBarColor is disabled","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":0,"end":21,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_71":{"__typename":"Paragraph","id":"83096223f2bc_71","name":"5504","type":"P","href":null,"layout":null,"metadata":null,"text":"Three button navigation:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":0,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_72":{"__typename":"Paragraph","id":"83096223f2bc_72","name":"7e9d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Opacity set to 80% by default","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_73":{"__typename":"Paragraph","id":"83096223f2bc_73","name":"f071","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Bottom offset is disabled but you can apply insets","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_74":{"__typename":"Paragraph","id":"83096223f2bc_74","name":"33f8","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Color is the window background by default","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_75":{"__typename":"Paragraph","id":"83096223f2bc_75","name":"e761","type":"P","href":null,"layout":null,"metadata":null,"text":"The navigation bar in showSystemUi will show you the gesture navigation bar by default, but to test both types of navigation bars in your Preview, you can specify navigation using the Preview picker or through the device parameter.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":22,"end":34,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_76":{"__typename":"Paragraph","id":"83096223f2bc_76","name":"857b","type":"P","href":null,"layout":null,"metadata":null,"text":"To specify through the Preview picker, in the Hardware section, find the Navigation dropdown and set your Preview’s navigation bar.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":46,"end":54,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":73,"end":83,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*xEc35bhIseZ9c1FgQCJrsg.png":{"__typename":"ImageMetadata","id":"1*xEc35bhIseZ9c1FgQCJrsg.png","originalHeight":886,"originalWidth":1576,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_77":{"__typename":"Paragraph","id":"83096223f2bc_77","name":"7962","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*xEc35bhIseZ9c1FgQCJrsg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_78":{"__typename":"Paragraph","id":"83096223f2bc_78","name":"cb86","type":"P","href":null,"layout":null,"metadata":null,"text":"If you are using code to test the navigation bars, you will need to specify a specific device or a specific width and height in pixels.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_79":{"__typename":"Paragraph","id":"83096223f2bc_79","name":"fc97","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Preview(showSystemUi = true, device = \"spec:parent=pixel_8\")","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"graphql"},"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_80":{"__typename":"Paragraph","id":"83096223f2bc_80","name":"2abf","type":"P","href":null,"layout":null,"metadata":null,"text":"Then, you can add navigation and set it to buttons for three button navigation or gesture for gesture navigation.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_81":{"__typename":"Paragraph","id":"83096223f2bc_81","name":"2f19","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Preview(showSystemUi = true, device = \n\"spec:parent=pixel_8,navigation=buttons\")","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"graphql"},"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*hgSrrcLej8RfTaNxOB5evQ.png":{"__typename":"ImageMetadata","id":"1*hgSrrcLej8RfTaNxOB5evQ.png","originalHeight":1638,"originalWidth":1504,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_82":{"__typename":"Paragraph","id":"83096223f2bc_82","name":"59f0","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*hgSrrcLej8RfTaNxOB5evQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_83":{"__typename":"Paragraph","id":"83096223f2bc_83","name":"8623","type":"P","href":null,"layout":null,"metadata":null,"text":"Now that you know how to test your app’s UI edge-to-edge implementation through Compose Preview, let’s go over automated testing.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_84":{"__typename":"Paragraph","id":"83096223f2bc_84","name":"053a","type":"H3","href":null,"layout":null,"metadata":null,"text":"Automated testing strategies","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_85":{"__typename":"Paragraph","id":"83096223f2bc_85","name":"d7bb","type":"P","href":null,"layout":null,"metadata":null,"text":"Once you have manually tested that your screen handles edge-to-edge as expected, you should consider adding automated tests to catch future regressions.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_86":{"__typename":"Paragraph","id":"83096223f2bc_86","name":"74d8","type":"P","href":null,"layout":null,"metadata":null,"text":"We recommend using screenshot tests to verify your edge-to-edge implementation, as they verify the placement and dimension of your insets and the content that might be drawn behind.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_87":{"__typename":"Paragraph","id":"83096223f2bc_87","name":"2ff4","type":"P","href":null,"layout":null,"metadata":null,"text":"You can use instrumented tests for the highest fidelity on emulators or physical devices. A single foldable emulator can cover most cases, and you can use Espresso Device to set the different screen orientations and foldable state:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":12,"end":30,"href":"https:\u002F\u002Fdeveloper.android.com\u002Ftraining\u002Ftesting\u002Finstrumented-tests","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":155,"end":170,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fstudio\u002Ftest\u002Fespresso-api","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*zJW7TPL5LnigFTYygjy3VQ.png":{"__typename":"ImageMetadata","id":"1*zJW7TPL5LnigFTYygjy3VQ.png","originalHeight":798,"originalWidth":1876,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_88":{"__typename":"Paragraph","id":"83096223f2bc_88","name":"bf85","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*zJW7TPL5LnigFTYygjy3VQ.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_89":{"__typename":"Paragraph","id":"83096223f2bc_89","name":"aca5","type":"P","href":null,"layout":null,"metadata":null,"text":"To switch between navigation modes, you can use UI Automator to pass adb commands:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":69,"end":72,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_90":{"__typename":"Paragraph","id":"83096223f2bc_90","name":"4ee5","type":"PRE","href":null,"layout":null,"metadata":null,"text":"UiDevice.getInstance(InstrumentationRegistry.getInstrumentation()).apply {\n executeShellCommand(\n \"cmd overlay enable-exclusive \" +\n \"com.android.internal.systemui.navbar.gestural\", \u002F\u002F or .threebutton\n )\n}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"less"},"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*di6xSQNhAB8Ax70G7a02SQ.png":{"__typename":"ImageMetadata","id":"1*di6xSQNhAB8Ax70G7a02SQ.png","originalHeight":199,"originalWidth":913,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_91":{"__typename":"Paragraph","id":"83096223f2bc_91","name":"e7ee","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*di6xSQNhAB8Ax70G7a02SQ.png"},"text":"An SDK 35 foldable emulator showing gesture and 3-button navigation, respectively","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":81,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_92":{"__typename":"Paragraph","id":"83096223f2bc_92","name":"65b7","type":"P","href":null,"layout":null,"metadata":null,"text":"The system bar contains a clock and icons that change every minute, breaking screenshot tests. You can enable demo mode via adb commands to show the same system bar content every time:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":110,"end":119,"href":"https:\u002F\u002Fandroid.googlesource.com\u002Fplatform\u002Fframeworks\u002Fbase\u002F+\u002Fmaster\u002Fpackages\u002FSystemUI\u002Fdocs\u002Fdemo_mode.md","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*3-sf1AgOOC09BzoPYRae-A.png":{"__typename":"ImageMetadata","id":"1*3-sf1AgOOC09BzoPYRae-A.png","originalHeight":182,"originalWidth":1999,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_93":{"__typename":"Paragraph","id":"83096223f2bc_93","name":"92f2","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*3-sf1AgOOC09BzoPYRae-A.png"},"text":"Demo mode enabled, showing a fixed time and icons","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":49,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_94":{"__typename":"Paragraph","id":"83096223f2bc_94","name":"86df","type":"P","href":null,"layout":null,"metadata":null,"text":"Note that adb commands are not synchronized, so you might need to implement a mechanism to wait or retry until each test passes. Alternatively, if you use Compose, there is a new wrapper that can help you catch most regressions:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":10,"end":13,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_95":{"__typename":"Paragraph","id":"83096223f2bc_95","name":"f05f","type":"H3","href":null,"layout":null,"metadata":null,"text":"Testing insets with Compose","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_96":{"__typename":"Paragraph","id":"83096223f2bc_96","name":"ef9a","type":"P","href":null,"layout":null,"metadata":null,"text":"Compose 1.8.0-alpha01 ui-test includes a new DeviceConfigurationOverride for testing window insets, called DeviceConfigurationOverride.WindowInsets.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":45,"end":72,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":107,"end":147,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":45,"end":72,"href":"https:\u002F\u002Fdeveloper.android.com\u002Ftraining\u002Ftesting\u002Fdifferent-screens\u002Ftools#deviceconfigurationoverride","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":107,"end":147,"href":"https:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fkotlin\u002Fandroidx\u002Fcompose\u002Fui\u002Ftest\u002FDeviceConfigurationOverride.Companion#(androidx.compose.ui.test.DeviceConfigurationOverride.Companion).WindowInsets(androidx.core.view.WindowInsetsCompat)","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_97":{"__typename":"Paragraph","id":"83096223f2bc_97","name":"11ec","type":"P","href":null,"layout":null,"metadata":null,"text":"This allows for specifying an arbitrary WindowInsetsCompat to apply to the composable under test:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":40,"end":58,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_98":{"__typename":"Paragraph","id":"83096223f2bc_98","name":"2e17","type":"PRE","href":null,"layout":null,"metadata":null,"text":"composeTestRule.setContent {\n DeviceConfigurationOverride(\n DeviceConfigurationOverride.WindowInsets(\n WindowInsetsCompat.Builder()\n .setInsets(\n WindowInsetsCompat.Type.statusBars(),\n DpRect(\n left = 0.dp,\n top = 64.dp,\n right = 0.dp,\n bottom = 0.dp,\n ).toAndroidXInsets(),\n )\n .setInsets(\n WindowInsetsCompat.Type.navigationBars(),\n DpRect(\n left = 64.dp,\n top = 0.dp,\n right = 64.dp,\n bottom = 64.dp,\n ).toInsets(),\n )\n .build(),\n ),\n )\n ) {\n Box {\n content() \u002F\u002F Your content under test\n DebugVisibleWindowInsets(Modifier.fillMaxSize()) \u002F\u002F Debug overlay (optional)\n }\n }\n}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"scss"},"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_99":{"__typename":"Paragraph","id":"83096223f2bc_99","name":"012a","type":"P","href":null,"layout":null,"metadata":null,"text":"This can then be combined with a debug overlay for showing where the insets are:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_100":{"__typename":"Paragraph","id":"83096223f2bc_100","name":"75cf","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Composable\nfun DebugVisibleWindowInsets(\n modifier: Modifier = Modifier,\n debugColor: Color = Color.Magenta.copy(alpha = 0.5f),\n) {\n Box(modifier = modifier.fillMaxSize()) {\n Spacer(\n modifier = Modifier\n .align(Alignment.CenterStart)\n .fillMaxHeight()\n .windowInsetsStartWidth(WindowInsets.safeDrawing)\n .windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical))\n .background(debugColor),\n )\n Spacer(\n modifier = Modifier\n .align(Alignment.CenterEnd)\n .fillMaxHeight()\n .windowInsetsEndWidth(WindowInsets.safeDrawing)\n .windowInsetsPadding(WindowInsets.safeDrawing.only(WindowInsetsSides.Vertical))\n .background(debugColor),\n )\n Spacer(\n modifier = Modifier\n .align(Alignment.TopCenter)\n .fillMaxWidth()\n .windowInsetsTopHeight(WindowInsets.safeDrawing)\n .background(debugColor),\n )\n Spacer(\n modifier = Modifier\n .align(Alignment.BottomCenter)\n .fillMaxWidth()\n .windowInsetsBottomHeight(WindowInsets.safeDrawing)\n .background(debugColor),\n )\n }\n}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"AUTO","lang":"scss"},"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_101":{"__typename":"Paragraph","id":"83096223f2bc_101","name":"9e59","type":"P","href":null,"layout":null,"metadata":null,"text":"Putting both together, a screenshot test can visually show where the insets are, and reveal if there is content that would be obscured by the insets, like the snackbar is below:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*8L3pnhdPaNA-3OlWiX7-CA.png":{"__typename":"ImageMetadata","id":"1*8L3pnhdPaNA-3OlWiX7-CA.png","originalHeight":1350,"originalWidth":1350,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:83096223f2bc_102":{"__typename":"Paragraph","id":"83096223f2bc_102","name":"d798","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*8L3pnhdPaNA-3OlWiX7-CA.png"},"text":"A screenshot test for the Now In Android app, identifying an issue with the snackbar","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":84,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_103":{"__typename":"Paragraph","id":"83096223f2bc_103","name":"a4c4","type":"P","href":null,"layout":null,"metadata":null,"text":"For an example of this in action, check out this Now in Android PR, which adds screenshot tests with applying insets: https:\u002F\u002Fgithub.com\u002Fandroid\u002Fnowinandroid\u002Fpull\u002F1498\u002F","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":118,"end":168,"href":"https:\u002F\u002Fgithub.com\u002Fandroid\u002Fnowinandroid\u002Fpull\u002F1498\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_104":{"__typename":"Paragraph","id":"83096223f2bc_104","name":"e799","type":"H3","href":null,"layout":null,"metadata":null,"text":"QA Testing","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_105":{"__typename":"Paragraph","id":"83096223f2bc_105","name":"1e70","type":"P","href":null,"layout":null,"metadata":null,"text":"Your app might decide to create a QA team to test every screen, or at least your most important screens.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_106":{"__typename":"Paragraph","id":"83096223f2bc_106","name":"858b","type":"P","href":null,"layout":null,"metadata":null,"text":"There are three approaches to assist your QA team in seeing the impacts of the edge-to-edge enforcement:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_107":{"__typename":"Paragraph","id":"83096223f2bc_107","name":"6dcc","type":"OLI","href":null,"layout":null,"metadata":null,"text":"Distribute APKs that are targeting SDK 35 on Android 15 devices or emulators.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_108":{"__typename":"Paragraph","id":"83096223f2bc_108","name":"6a76","type":"OLI","href":null,"layout":null,"metadata":null,"text":"OR, enable the ENFORCE_EDGE_TO_EDGE flag in the App Compatibility Change Developer Option on an Android 15 device without having to target SDK 35.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":15,"end":35,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":15,"end":35,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fabout\u002Fversions\u002F15\u002Freference\u002Fcompat-framework-changes#enforce_edge_to_edge","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":48,"end":89,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fguide\u002Fapp-compatibility\u002Ftest-debug","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_109":{"__typename":"Paragraph","id":"83096223f2bc_109","name":"bfd9","type":"OLI","href":null,"layout":null,"metadata":null,"text":"OR, call enableEdgeToEdge on each Activity to simulate the Android 15 platform enforcement without having to target SDK 35 and without needing an Android 15 device.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":9,"end":25,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":9,"end":25,"href":"https:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fandroidx\u002Factivity\u002FComponentActivity#(androidx.activity.ComponentActivity).enableEdgeToEdge(androidx.activity.SystemBarStyle,androidx.activity.SystemBarStyle)","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_110":{"__typename":"Paragraph","id":"83096223f2bc_110","name":"c4d3","type":"H3","href":null,"layout":null,"metadata":null,"text":"Summary","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_111":{"__typename":"Paragraph","id":"83096223f2bc_111","name":"4ea8","type":"P","href":null,"layout":null,"metadata":null,"text":"Apps targeting API35 will be edge-to-edge by default in order to give your users a more satisfying and high quality experience. You can test your UI, including cutouts and navigation bars, using Compose Preview in the Canary version of Android Studio Ladybug, and in automating testing with the new DeviceConfigurationOverride. Please be sure to leave us any feedback using these instructions.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":299,"end":326,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":374,"end":392,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fstudio\u002Freport-bugs","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_112":{"__typename":"Paragraph","id":"83096223f2bc_112","name":"9a8c","type":"H3","href":null,"layout":null,"metadata":null,"text":"Additional Resources","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_113":{"__typename":"Paragraph","id":"83096223f2bc_113","name":"1974","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Android 15 Edge to Edge Enforcement documentation","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":35,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fabout\u002Fversions\u002F15\u002Fbehavior-changes-15#edge-to-edge","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_114":{"__typename":"Paragraph","id":"83096223f2bc_114","name":"f4d9","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Handle edge-to-edge enforcements in Android 15 Codelab","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":54,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fcodelabs\u002Fedge-to-edge?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fimprove-user-experience%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fedge-to-edge#0","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_115":{"__typename":"Paragraph","id":"83096223f2bc_115","name":"cfdf","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Edge-to-Edge (Compose documentation)","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":12,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fui\u002Fcompose\u002Flayouts\u002Finsets","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_116":{"__typename":"Paragraph","id":"83096223f2bc_116","name":"e269","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Edge-to-Edge (Views documentation)","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":12,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fui\u002Fviews\u002Flayout\u002Fedge-to-edge","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_117":{"__typename":"Paragraph","id":"83096223f2bc_117","name":"c9ec","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Edge-to-Edge & Insets: Compose Delightful Tips (Video)","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":0,"end":46,"href":"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=QRzepC9gHj4&t=2s","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_118":{"__typename":"Paragraph","id":"83096223f2bc_118","name":"f9f7","type":"P","href":null,"layout":null,"metadata":null,"text":"The code snippets in this blog have the following license:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":0,"end":58,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:83096223f2bc_119":{"__typename":"Paragraph","id":"83096223f2bc_119","name":"f01d","type":"PRE","href":null,"layout":null,"metadata":null,"text":"\u002F\u002FCopyright 2024 Google LLC. SPDX-License-Identifier: Apache-2.0","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"EXPLICIT","lang":"typescript"},"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:95b274b437c2-viewerId:lo_ab77f5918a88":{"__typename":"CollectionViewerEdge","id":"collectionId:95b274b437c2-viewerId:lo_ab77f5918a88","isEditor":false,"isMuting":false},"UserViewerEdge:userId:401951cd4c3e-viewerId:lo_ab77f5918a88":{"__typename":"UserViewerEdge","id":"userId:401951cd4c3e-viewerId:lo_ab77f5918a88","isMuting":false},"ImageMetadata:1*5pMw_nx55x_66tk77kutPQ.png":{"__typename":"ImageMetadata","id":"1*5pMw_nx55x_66tk77kutPQ.png","originalWidth":600,"originalHeight":72},"PostViewerEdge:postId:da645c905d78-viewerId:lo_ab77f5918a88":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:da645c905d78-viewerId:lo_ab77f5918a88"},"Tag:edge-to-edge":{"__typename":"Tag","id":"edge-to-edge","displayTitle":"Edge To Edge","normalizedTagSlug":"edge-to-edge"},"Tag:android-15":{"__typename":"Tag","id":"android-15","displayTitle":"Android 15","normalizedTagSlug":"android-15"},"Tag:android-15-new-features":{"__typename":"Tag","id":"android-15-new-features","displayTitle":"Android 15 New Features","normalizedTagSlug":"android-15-new-features"},"Tag:best-practices":{"__typename":"Tag","id":"best-practices","displayTitle":"Best Practices","normalizedTagSlug":"best-practices"},"Post:da645c905d78":{"__typename":"Post","id":"da645c905d78","collection":{"__ref":"Collection:95b274b437c2"},"content({\"postMeteringOptions\":{\"referrer\":\"\"}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"bbdd","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"57bf","startIndex":3,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null},{"__typename":"Section","name":"5100","startIndex":118,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:83096223f2bc_0"},{"__ref":"Paragraph:83096223f2bc_1"},{"__ref":"Paragraph:83096223f2bc_2"},{"__ref":"Paragraph:83096223f2bc_3"},{"__ref":"Paragraph:83096223f2bc_4"},{"__ref":"Paragraph:83096223f2bc_5"},{"__ref":"Paragraph:83096223f2bc_6"},{"__ref":"Paragraph:83096223f2bc_7"},{"__ref":"Paragraph:83096223f2bc_8"},{"__ref":"Paragraph:83096223f2bc_9"},{"__ref":"Paragraph:83096223f2bc_10"},{"__ref":"Paragraph:83096223f2bc_11"},{"__ref":"Paragraph:83096223f2bc_12"},{"__ref":"Paragraph:83096223f2bc_13"},{"__ref":"Paragraph:83096223f2bc_14"},{"__ref":"Paragraph:83096223f2bc_15"},{"__ref":"Paragraph:83096223f2bc_16"},{"__ref":"Paragraph:83096223f2bc_17"},{"__ref":"Paragraph:83096223f2bc_18"},{"__ref":"Paragraph:83096223f2bc_19"},{"__ref":"Paragraph:83096223f2bc_20"},{"__ref":"Paragraph:83096223f2bc_21"},{"__ref":"Paragraph:83096223f2bc_22"},{"__ref":"Paragraph:83096223f2bc_23"},{"__ref":"Paragraph:83096223f2bc_24"},{"__ref":"Paragraph:83096223f2bc_25"},{"__ref":"Paragraph:83096223f2bc_26"},{"__ref":"Paragraph:83096223f2bc_27"},{"__ref":"Paragraph:83096223f2bc_28"},{"__ref":"Paragraph:83096223f2bc_29"},{"__ref":"Paragraph:83096223f2bc_30"},{"__ref":"Paragraph:83096223f2bc_31"},{"__ref":"Paragraph:83096223f2bc_32"},{"__ref":"Paragraph:83096223f2bc_33"},{"__ref":"Paragraph:83096223f2bc_34"},{"__ref":"Paragraph:83096223f2bc_35"},{"__ref":"Paragraph:83096223f2bc_36"},{"__ref":"Paragraph:83096223f2bc_37"},{"__ref":"Paragraph:83096223f2bc_38"},{"__ref":"Paragraph:83096223f2bc_39"},{"__ref":"Paragraph:83096223f2bc_40"},{"__ref":"Paragraph:83096223f2bc_41"},{"__ref":"Paragraph:83096223f2bc_42"},{"__ref":"Paragraph:83096223f2bc_43"},{"__ref":"Paragraph:83096223f2bc_44"},{"__ref":"Paragraph:83096223f2bc_45"},{"__ref":"Paragraph:83096223f2bc_46"},{"__ref":"Paragraph:83096223f2bc_47"},{"__ref":"Paragraph:83096223f2bc_48"},{"__ref":"Paragraph:83096223f2bc_49"},{"__ref":"Paragraph:83096223f2bc_50"},{"__ref":"Paragraph:83096223f2bc_51"},{"__ref":"Paragraph:83096223f2bc_52"},{"__ref":"Paragraph:83096223f2bc_53"},{"__ref":"Paragraph:83096223f2bc_54"},{"__ref":"Paragraph:83096223f2bc_55"},{"__ref":"Paragraph:83096223f2bc_56"},{"__ref":"Paragraph:83096223f2bc_57"},{"__ref":"Paragraph:83096223f2bc_58"},{"__ref":"Paragraph:83096223f2bc_59"},{"__ref":"Paragraph:83096223f2bc_60"},{"__ref":"Paragraph:83096223f2bc_61"},{"__ref":"Paragraph:83096223f2bc_62"},{"__ref":"Paragraph:83096223f2bc_63"},{"__ref":"Paragraph:83096223f2bc_64"},{"__ref":"Paragraph:83096223f2bc_65"},{"__ref":"Paragraph:83096223f2bc_66"},{"__ref":"Paragraph:83096223f2bc_67"},{"__ref":"Paragraph:83096223f2bc_68"},{"__ref":"Paragraph:83096223f2bc_69"},{"__ref":"Paragraph:83096223f2bc_70"},{"__ref":"Paragraph:83096223f2bc_71"},{"__ref":"Paragraph:83096223f2bc_72"},{"__ref":"Paragraph:83096223f2bc_73"},{"__ref":"Paragraph:83096223f2bc_74"},{"__ref":"Paragraph:83096223f2bc_75"},{"__ref":"Paragraph:83096223f2bc_76"},{"__ref":"Paragraph:83096223f2bc_77"},{"__ref":"Paragraph:83096223f2bc_78"},{"__ref":"Paragraph:83096223f2bc_79"},{"__ref":"Paragraph:83096223f2bc_80"},{"__ref":"Paragraph:83096223f2bc_81"},{"__ref":"Paragraph:83096223f2bc_82"},{"__ref":"Paragraph:83096223f2bc_83"},{"__ref":"Paragraph:83096223f2bc_84"},{"__ref":"Paragraph:83096223f2bc_85"},{"__ref":"Paragraph:83096223f2bc_86"},{"__ref":"Paragraph:83096223f2bc_87"},{"__ref":"Paragraph:83096223f2bc_88"},{"__ref":"Paragraph:83096223f2bc_89"},{"__ref":"Paragraph:83096223f2bc_90"},{"__ref":"Paragraph:83096223f2bc_91"},{"__ref":"Paragraph:83096223f2bc_92"},{"__ref":"Paragraph:83096223f2bc_93"},{"__ref":"Paragraph:83096223f2bc_94"},{"__ref":"Paragraph:83096223f2bc_95"},{"__ref":"Paragraph:83096223f2bc_96"},{"__ref":"Paragraph:83096223f2bc_97"},{"__ref":"Paragraph:83096223f2bc_98"},{"__ref":"Paragraph:83096223f2bc_99"},{"__ref":"Paragraph:83096223f2bc_100"},{"__ref":"Paragraph:83096223f2bc_101"},{"__ref":"Paragraph:83096223f2bc_102"},{"__ref":"Paragraph:83096223f2bc_103"},{"__ref":"Paragraph:83096223f2bc_104"},{"__ref":"Paragraph:83096223f2bc_105"},{"__ref":"Paragraph:83096223f2bc_106"},{"__ref":"Paragraph:83096223f2bc_107"},{"__ref":"Paragraph:83096223f2bc_108"},{"__ref":"Paragraph:83096223f2bc_109"},{"__ref":"Paragraph:83096223f2bc_110"},{"__ref":"Paragraph:83096223f2bc_111"},{"__ref":"Paragraph:83096223f2bc_112"},{"__ref":"Paragraph:83096223f2bc_113"},{"__ref":"Paragraph:83096223f2bc_114"},{"__ref":"Paragraph:83096223f2bc_115"},{"__ref":"Paragraph:83096223f2bc_116"},{"__ref":"Paragraph:83096223f2bc_117"},{"__ref":"Paragraph:83096223f2bc_118"},{"__ref":"Paragraph:83096223f2bc_119"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:401951cd4c3e"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fpreview-and-test-your-apps-edge-to-edge-ui-da645c905d78","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"android-development"}],"isLimitedState":false,"isPublished":true,"allowResponses":true,"latestPublishedVersion":"83096223f2bc","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":1},"responseDistribution":"NOT_DISTRIBUTED","clapCount":216,"title":"Preview and test your app’s edge-to-edge UI","isSeries":false,"sequence":null,"uniqueSlug":"preview-and-test-your-apps-edge-to-edge-ui-da645c905d78","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1725554212272,"readingTime":8.547169811320755,"previewContent":{"__typename":"PreviewContent","subtitle":"Test and adapt your app’s UI using Compose Previews to ensure a seamless transition to Android 15’s edge-to-edge UI requirements."},"previewImage":{"__ref":"ImageMetadata:1*cbWmzhcQsly95rHdfYZA1g.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1725482796602,"updatedAt":1731820803768,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:da645c905d78-viewerId:lo_ab77f5918a88"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:edge-to-edge"},{"__ref":"Tag:android-15"},{"__ref":"Tag:android-15-new-features"},{"__ref":"Tag:best-practices"}],"isFeaturedInPublishedPublication":false,"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":1788,"layerCake":6,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"HIT"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.8b67b313.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.94ea62ed.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.5bef8967.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4505.6dfaf853.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9380.fb176dee.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.dc8dbee4.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.933c1c9a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.68bc318b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3045.1cc3d8cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6349.3329b100.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.a4ecfb83.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6428.36238b5a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6199.6da73f3b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.7d9f7f3d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.67eb283b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.8aa8d357.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4492.0c3e1a1d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2571.6814b962.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.1c286b32.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6128.f8800a13.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2135.2e8dc177.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.60bcefe8.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/144.86429b48.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5240.6281357f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8819.c627c2bf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.d0637ed0.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.c3ee9367.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.0d800846.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.18a8996d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.e1e580cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/responses.editor.e89462cb.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'91354d24d9f8eba1',t:'MTczOTc5MDMxNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>