CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Compose Tooling. Compose allows you to build beautiful… | by Chris Arriola | 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="2022-10-07T21:02:38.575Z"/><meta data-rh="true" name="title" content="Compose Tooling. Compose allows you to build beautiful… | by Chris Arriola | Android Developers | Medium"/><meta data-rh="true" property="og:title" content="Compose Tooling"/><meta data-rh="true" property="al:android:url" content="medium://p/42621bd8719b"/><meta data-rh="true" property="al:ios:url" content="medium://p/42621bd8719b"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="Compose allows you to build beautiful UIs quickly. Together with the Android Studio tooling support, you’re able to accelerate the development process even further with faster iteration and better…"/><meta data-rh="true" property="og:description" content="Compose allows you to build beautiful UIs quickly. Together with the Android Studio tooling support, you’re able to accelerate the…"/><meta data-rh="true" property="og:url" content="https://medium.com/androiddevelopers/compose-tooling-42621bd8719b"/><meta data-rh="true" property="al:web:url" content="https://medium.com/androiddevelopers/compose-tooling-42621bd8719b"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1200/1*WVUBQsNgePqQxmrHjaID4g.png"/><meta data-rh="true" property="article:author" content="https://arriolachris.medium.com"/><meta data-rh="true" name="author" content="Chris Arriola"/><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="Compose Tooling"/><meta data-rh="true" name="twitter:site" content="@androiddev"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/42621bd8719b"/><meta data-rh="true" property="twitter:description" content="Compose allows you to build beautiful UIs quickly. Together with the Android Studio tooling support, you’re able to accelerate the…"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1200/1*WVUBQsNgePqQxmrHjaID4g.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:creator" content="@arriolachris"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="7 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://arriolachris.medium.com"/><link data-rh="true" rel="canonical" href="https://medium.com/androiddevelopers/compose-tooling-42621bd8719b"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/42621bd8719b"/><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*WVUBQsNgePqQxmrHjaID4g.png"],"url":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fcompose-tooling-42621bd8719b","dateCreated":"2022-10-07T21:02:38.575Z","datePublished":"2022-10-07T21:02:38.575Z","dateModified":"2023-02-14T00:16:03.096Z","headline":"Compose Tooling - Android Developers - Medium","name":"Compose Tooling - Android Developers - Medium","description":"Compose allows you to build beautiful UIs quickly. Together with the Android Studio tooling support, you’re able to accelerate the development process even further with faster iteration and better…","identifier":"42621bd8719b","author":{"@type":"Person","name":"Chris Arriola","url":"https:\u002F\u002Farriolachris.medium.com"},"creator":["Chris Arriola"],"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\u002Fcompose-tooling-42621bd8719b"}</script><style type="text/css" data-fela-rehydration="577" 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="577" 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="577" 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{margin-left:auto}.gt{margin-right:auto}.gu{max-width:3249px}.ha{clear:both}.hc{cursor:zoom-in}.hd{z-index:auto}.hf{max-width:100%}.hg{height:auto}.hh{line-height:1.23}.hi{letter-spacing:0}.hj{font-style:normal}.hk{font-weight:700}.ip{align-items:baseline}.iq{width:48px}.ir{height:48px}.is{border:2px solid rgba(255, 255, 255, 1)}.it{z-index:0}.iu{box-shadow:none}.iv{border:1px solid rgba(0, 0, 0, 0.05)}.iw{margin-left:-12px}.ix{width:28px}.iy{height:28px}.iz{z-index:1}.ja{width:24px}.jb{margin-bottom:2px}.jc{flex-wrap:nowrap}.jd{font-size:16px}.je{line-height:24px}.jg{margin:0 8px}.jh{display:inline}.ji{color:rgba(132, 132, 136, 1)}.jj{fill:rgba(132, 132, 136, 1)}.jm{flex:0 0 auto}.jp{flex-wrap:wrap}.js{white-space:pre-wrap}.jt{margin-right:4px}.ju{overflow:hidden}.jv{max-height:20px}.jw{text-overflow:ellipsis}.jx{display:-webkit-box}.jy{-webkit-line-clamp:1}.jz{-webkit-box-orient:vertical}.ka{word-break:break-all}.kc{padding-left:8px}.kd{padding-right:8px}.le> *{flex-shrink:0}.lf{overflow-x:scroll}.lg::-webkit-scrollbar{display:none}.lh{scrollbar-width:none}.li{-ms-overflow-style:none}.lj{width:74px}.lk{flex-direction:row}.ll{z-index:2}.lo{-webkit-user-select:none}.lp{border:0}.lq{fill:rgba(117, 117, 117, 1)}.lt{outline:0}.lu{user-select:none}.lv> svg{pointer-events:none}.me{cursor:progress}.mf{margin-left:4px}.mg{margin-top:0px}.mh{opacity:1}.mi{padding:4px 0}.ml{width:16px}.mn{display:inline-flex}.mt{padding:8px 2px}.mu svg{color:#6B6B6B}.nl{line-height:1.58}.nm{letter-spacing:-0.004em}.nn{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.oi{margin-bottom:-0.46em}.oj{text-decoration:underline}.ok{box-shadow:inset 3px 0 0 0 #242424}.ol{padding-left:23px}.om{margin-left:-20px}.on{font-style:italic}.ot{margin:auto}.ou{padding-bottom:56.206088992974244%}.ov{height:0}.ow{line-height:1.12}.ox{letter-spacing:-0.022em}.oy{font-weight:600}.pt{margin-bottom:-0.28em}.pz{padding-bottom:100%}.qa{max-width:640px}.qb{margin-top:10px}.qc{max-width:728px}.qf{padding:2px 4px}.qg{font-size:75%}.qh> strong{font-family:inherit}.qi{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.qj{max-width:1800px}.qk{max-width:960px}.ql{max-width:500px}.qm{max-width:2432px}.qn{max-width:800px}.qo{max-width:3280px}.qp{max-width:2402px}.qq{list-style-type:disc}.qr{margin-left:30px}.qs{padding-left:0px}.qy{margin-bottom:26px}.qz{margin-top:6px}.ra{margin-top:8px}.rb{margin-right:8px}.rc{padding:8px 16px}.rd{border-radius:100px}.re{transition:background 300ms ease}.rg{white-space:nowrap}.rh{border-top:none}.ri{margin-bottom:14px}.rj{height:52px}.rk{max-height:52px}.rl{box-sizing:content-box}.rm{position:static}.ro{max-width:155px}.ru{margin-right:20px}.sa{height:0px}.sb{margin-bottom:40px}.sc{margin-bottom:48px}.sq{border-radius:2px}.ss{height:64px}.st{width:64px}.su{align-self:flex-end}.sv{flex:1 1 auto}.tb{padding-right:4px}.tc{font-weight:500}.tp{margin-top:16px}.tq{color:rgba(255, 255, 255, 1)}.tr{fill:rgba(255, 255, 255, 1)}.ts{background:rgba(25, 25, 25, 1)}.tt{border-color:rgba(25, 25, 25, 1)}.tw:disabled{opacity:0.1}.tx:disabled:hover{background:rgba(25, 25, 25, 1)}.ty:disabled:hover{border-color:rgba(25, 25, 25, 1)}.uh{gap:18px}.ui{fill:rgba(61, 61, 61, 1)}.uk{margin-top:32px}.ul{fill:#242424}.um{background:0}.un{border-color:#242424}.uo:disabled:hover{color:#242424}.up:disabled:hover{fill:#242424}.uq:disabled:hover{border-color:#242424}.vb{border-bottom:solid 1px #E5E5E5}.vc{margin-top:72px}.vd{padding:24px 0}.ve{margin-bottom:0px}.vf{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)}.jf:hover{text-decoration:underline}.jk:hover:not(:disabled){color:rgba(113, 114, 117, 1)}.jl:hover:not(:disabled){fill:rgba(113, 114, 117, 1)}.ls:hover{fill:rgba(8, 8, 8, 1)}.mj:hover{fill:#000000}.mk:hover p{color:#000000}.mm:hover{color:#000000}.mv:hover svg{color:#000000}.rf:hover{background-color:#F2F2F2}.sr:hover{background-color:none}.tu:hover{background:#000000}.tv:hover{border-color:#242424}.uj:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.he:focus{transform:scale(1.01)}.lr:focus{fill:rgba(8, 8, 8, 1)}.mw:focus svg{color:#000000}.lw:active{border-style:none}</style><style type="text/css" data-fela-rehydration="577" 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:68px}.gc{max-width:680px}.gz{margin-top:40px}.if{font-size:42px}.ig{margin-top:1em}.ih{margin-bottom:32px}.ii{line-height:52px}.ij{letter-spacing:-0.011em}.io{align-items:center}.kq{border-top:solid 1px #F2F2F2}.kr{border-bottom:solid 1px #F2F2F2}.ks{margin:32px 0 0}.kt{padding:3px 8px}.lc> *{margin-right:24px}.ld> :last-child{margin-right:0}.md{margin-top:0px}.ms{margin:0}.oe{font-size:20px}.of{margin-top:2.14em}.og{line-height:32px}.oh{letter-spacing:-0.003em}.os{margin-top:56px}.pp{font-size:24px}.pq{margin-top:1.95em}.pr{line-height:30px}.ps{letter-spacing:-0.016em}.py{margin-top:0.94em}.qx{margin-top:1.14em}.rt{display:inline-block}.rz{margin-bottom:104px}.sd{flex-direction:row}.sg{margin-bottom:0}.sh{margin-right:20px}.sw{max-width:500px}.tn{line-height:24px}.to{letter-spacing:0}.ud{margin-bottom:88px}.ug{margin-bottom:72px}.uv{width:min-width}.va{padding-top:72px}</style><style type="text/css" data-fela-rehydration="577" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mc{margin-top:0px}.qd{margin-left:auto}.qe{text-align:center}.rs{display:inline-block}</style><style type="text/css" data-fela-rehydration="577" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.mb{margin-top:0px}.rr{display:inline-block}</style><style type="text/css" data-fela-rehydration="577" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.lz{margin-top:0px}.ma{margin-right:0px}.rq{display:inline-block}</style><style type="text/css" data-fela-rehydration="577" 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:4px}.gv{margin-top:32px}.hl{font-size:32px}.hm{margin-top:1.01em}.hn{margin-bottom:24px}.ho{line-height:38px}.hp{letter-spacing:-0.014em}.ik{align-items:flex-start}.jn{flex-direction:column}.jq{margin-bottom:2px}.ke{margin:24px -24px 0}.kf{padding:0}.ku> *{margin-right:8px}.kv> :last-child{margin-right:24px}.lm{margin-left:0px}.lx{margin-top:0px}.ly{margin-right:0px}.mo{margin:0}.mx{border:1px solid #F2F2F2}.my{border-radius:99em}.mz{padding:0px 16px 0px 12px}.na{height:38px}.nb{align-items:center}.nd svg{margin-right:8px}.no{font-size:18px}.np{margin-top:1.56em}.nq{line-height:28px}.nr{letter-spacing:-0.003em}.oo{margin-top:40px}.oz{font-size:20px}.pa{margin-top:1.2em}.pb{line-height:24px}.pc{letter-spacing:0}.pu{margin-top:0.67em}.qt{margin-top:1.34em}.rp{display:inline-block}.rv{margin-bottom:96px}.so{margin-bottom:20px}.sp{margin-right:0}.ta{max-width:100%}.td{font-size:24px}.te{line-height:30px}.tf{letter-spacing:-0.016em}.tz{margin-bottom:64px}.ur{width:100%}.uw{padding-top:48px}.nc:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="577" 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:68px}.gb{max-width:680px}.gy{margin-top:40px}.ia{font-size:42px}.ib{margin-top:1em}.ic{margin-bottom:32px}.id{line-height:52px}.ie{letter-spacing:-0.011em}.in{align-items:center}.km{border-top:solid 1px #F2F2F2}.kn{border-bottom:solid 1px #F2F2F2}.ko{margin:32px 0 0}.kp{padding:3px 8px}.la> *{margin-right:24px}.lb> :last-child{margin-right:0}.mr{margin:0}.oa{font-size:20px}.ob{margin-top:2.14em}.oc{line-height:32px}.od{letter-spacing:-0.003em}.or{margin-top:56px}.pl{font-size:24px}.pm{margin-top:1.95em}.pn{line-height:30px}.po{letter-spacing:-0.016em}.px{margin-top:0.94em}.qw{margin-top:1.14em}.ry{margin-bottom:104px}.se{flex-direction:row}.si{margin-bottom:0}.sj{margin-right:20px}.sx{max-width:500px}.tl{line-height:24px}.tm{letter-spacing:0}.uc{margin-bottom:88px}.uf{margin-bottom:72px}.uu{width:min-width}.uz{padding-top:72px}</style><style type="text/css" data-fela-rehydration="577" 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:68px}.ga{max-width:680px}.gx{margin-top:40px}.hv{font-size:42px}.hw{margin-top:1em}.hx{margin-bottom:32px}.hy{line-height:52px}.hz{letter-spacing:-0.011em}.im{align-items:center}.ki{border-top:solid 1px #F2F2F2}.kj{border-bottom:solid 1px #F2F2F2}.kk{margin:32px 0 0}.kl{padding:3px 8px}.ky> *{margin-right:24px}.kz> :last-child{margin-right:0}.mq{margin:0}.nw{font-size:20px}.nx{margin-top:2.14em}.ny{line-height:32px}.nz{letter-spacing:-0.003em}.oq{margin-top:56px}.ph{font-size:24px}.pi{margin-top:1.95em}.pj{line-height:30px}.pk{letter-spacing:-0.016em}.pw{margin-top:0.94em}.qv{margin-top:1.14em}.rx{margin-bottom:104px}.sf{flex-direction:row}.sk{margin-bottom:0}.sl{margin-right:20px}.sy{max-width:500px}.tj{line-height:24px}.tk{letter-spacing:0}.ub{margin-bottom:88px}.ue{margin-bottom:72px}.ut{width:min-width}.uy{padding-top:72px}</style><style type="text/css" data-fela-rehydration="577" 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:4px}.gw{margin-top:32px}.hq{font-size:32px}.hr{margin-top:1.01em}.hs{margin-bottom:24px}.ht{line-height:38px}.hu{letter-spacing:-0.014em}.il{align-items:flex-start}.jo{flex-direction:column}.jr{margin-bottom:2px}.kg{margin:24px 0 0}.kh{padding:0}.kw> *{margin-right:8px}.kx> :last-child{margin-right:8px}.ln{margin-left:0px}.mp{margin:0}.ne{border:1px solid #F2F2F2}.nf{border-radius:99em}.ng{padding:0px 16px 0px 12px}.nh{height:38px}.ni{align-items:center}.nk svg{margin-right:8px}.ns{font-size:18px}.nt{margin-top:1.56em}.nu{line-height:28px}.nv{letter-spacing:-0.003em}.op{margin-top:40px}.pd{font-size:20px}.pe{margin-top:1.2em}.pf{line-height:24px}.pg{letter-spacing:0}.pv{margin-top:0.67em}.qu{margin-top:1.34em}.rw{margin-bottom:96px}.sm{margin-bottom:20px}.sn{margin-right:0}.sz{max-width:100%}.tg{font-size:24px}.th{line-height:30px}.ti{letter-spacing:-0.016em}.ua{margin-bottom:64px}.us{width:100%}.ux{padding-top:48px}.nj:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="577" data-fela-type="RULE" media="print">.rn{display:none}</style><style type="text/css" data-fela-rehydration="577" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.hb{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style><style type="text/css" data-fela-rehydration="577" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kb{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%2F42621bd8719b&%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%2Fcompose-tooling-42621bd8719b&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%2Fcompose-tooling-42621bd8719b&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="ab cb"><div class="ci bh fz ga gb gc"><figure class="gv gw gx gy gz ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt gu"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*WVUBQsNgePqQxmrHjaID4g.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*WVUBQsNgePqQxmrHjaID4g.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*WVUBQsNgePqQxmrHjaID4g.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*WVUBQsNgePqQxmrHjaID4g.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*WVUBQsNgePqQxmrHjaID4g.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*WVUBQsNgePqQxmrHjaID4g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*WVUBQsNgePqQxmrHjaID4g.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*WVUBQsNgePqQxmrHjaID4g.png 640w, https://miro.medium.com/v2/resize:fit:720/1*WVUBQsNgePqQxmrHjaID4g.png 720w, https://miro.medium.com/v2/resize:fit:750/1*WVUBQsNgePqQxmrHjaID4g.png 750w, https://miro.medium.com/v2/resize:fit:786/1*WVUBQsNgePqQxmrHjaID4g.png 786w, https://miro.medium.com/v2/resize:fit:828/1*WVUBQsNgePqQxmrHjaID4g.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*WVUBQsNgePqQxmrHjaID4g.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*WVUBQsNgePqQxmrHjaID4g.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 hf hg c" width="700" height="209" loading="eager" role="presentation"/></picture></div></div></figure><div><h1 id="f7e7" class="pw-post-title hh hi hj bf hk hl hm hn ho hp hq hr hs ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij bk" data-testid="storyTitle">Compose Tooling</h1><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="ik il im in io ab"><div><div class="ab ip"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@arriolachris?source=post_page---byline--42621bd8719b--------------------------------"><div class="l iq ir by is it"><div class="l fj"><img alt="Chris Arriola" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*HQyYcSQaYQyLvIeqfpdjrQ.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="iu by l dd de fs n iv ft"></div></div></div></a></div></div><div class="iw ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/androiddevelopers?source=post_page---byline--42621bd8719b--------------------------------" rel="noopener follow"><div class="l ix iy by is iz"><div class="l fj"><img alt="Android Developers" class="l fd by br ja 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="iu by l br ja fs n iv 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="jb ab q"><div class="ab q jc"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b jd je bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jf" data-testid="authorName" rel="noopener follow" href="/@arriolachris?source=post_page---byline--42621bd8719b--------------------------------">Chris Arriola</a></p></div></div></div><span class="jg jh" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b jd je du"><span><a class="ji jj ah ai aj ak al am an ao ap aq ar ex jk jl" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F5e0374fd3b15&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fcompose-tooling-42621bd8719b&user=Chris+Arriola&userId=5e0374fd3b15&source=post_page-5e0374fd3b15--byline--42621bd8719b---------------------post_header-----------">Follow</a></span></p></div></div></span></div></div><div class="l jm"><span class="bf b bg z du"><div class="ab cn jn jo jp"><div class="jq jr ab"><div class="bf b bg z du ab js"><span class="jt l jm">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 jf ab q" data-testid="publicationName" href="https://medium.com/androiddevelopers?source=post_page---byline--42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b bg z ju jv jw jx jy jz ka kb bk">Android Developers</p></a></div></div></div><div class="h k"><span class="jg jh" 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">7 min read</span><div class="kc kd l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Oct 7, 2022</span></div></span></div></span></div></div></div><div class="ab cp ke kf kg kh ki kj kk kl km kn ko kp kq kr ks kt"><div class="h k w fg fh q"><div class="lj l"><div class="ab q lk ll"><div class="pw-multi-vote-icon fj jt lm ln lo"><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%2F42621bd8719b&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fcompose-tooling-42621bd8719b&user=Chris+Arriola&userId=5e0374fd3b15&source=---header_actions--42621bd8719b---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lp ao lq lr ls lt am lu lv lw lo"><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 lx ly lz ma mb mc md"><p class="bf b dv z du"><span class="me">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao lp mh mi ab q fk mj mk" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mg"><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 mf mg">5</span></p></button></div></div></div><div class="ab q ku kv kw kx ky kz la lb lc ld le lf lg lh li"><div class="ml 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%2F42621bd8719b&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fcompose-tooling-42621bd8719b&source=---header_actions--42621bd8719b---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mm" 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 mn cn"><div class="l ae"><div class="ab cb"><div class="mo mp mq mr ms hf ci bh"><div class="ab"><div class="bm bh" 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 mt an ao ap ex mu mv mk mw mx my mz na s nb nc nd ne nf ng nh u ni nj nk"><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 mt an ao ap ex mu mv mk mw mx my mz na s nb nc nd ne nf ng nh u ni nj nk"><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="4888" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">Compose allows you to build beautiful UIs quickly. Together with the Android Studio tooling support, you’re able to accelerate the development process even further with faster iteration and better debugging.</p><p id="a0cb" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">So far we’ve looked at how to implement a single answer option in Jetsurvey, one of our <a class="af oj" href="http://goo.gle/compose-samples" rel="noopener ugc nofollow" target="_blank">Compose samples</a> (<a class="af oj" rel="noopener" href="/p/8d3651228764">previous article</a>). Let’s see how Android Studio can help us write this efficiently.</p><blockquote class="ok ol om"><p id="6d15" class="nl nm on nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">If you’ve got any questions so far from this series on Compose Basics, we will have a live Q&A session on October 13th. Leave a comment here, on YouTube, or using #MADCompose on Twitter to ask your questions.</p></blockquote><p id="14d4" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">You can also watch the accompanying video to this article here:</p><figure class="oo op oq or os ha"><div class="ot ju l fj"><div class="ou ov l"></div></div></figure><h1 id="ce26" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Live Templates</h1><p id="0463" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">When building composable elements for your app, you might find yourself frequently typing:</p><figure class="oo op oq or os ha"><div class="ot ju l fj"><div class="pz ov l"></div></div></figure><p id="8ed3" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">To help save on keystrokes, <a class="af oj" href="https://developer.android.com/jetpack/compose/tooling#live-templates" rel="noopener ugc nofollow" target="_blank">live templates</a> allow you to insert common code snippets by typing an abbreviation. To insert the above code snippet, simply type “comp” followed by hitting the tab or return key to insert a composable function. From there, you can enter the name of the function, and you’re done 🏃♂️💨</p><figure class="oo op oq or os ha gs gt paragraph-image"><div class="gs gt qa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*ByrI2WK7KNweIbshuht3iw.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*ByrI2WK7KNweIbshuht3iw.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*ByrI2WK7KNweIbshuht3iw.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*ByrI2WK7KNweIbshuht3iw.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*ByrI2WK7KNweIbshuht3iw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*ByrI2WK7KNweIbshuht3iw.gif 1100w, https://miro.medium.com/v2/resize:fit:1280/format:webp/1*ByrI2WK7KNweIbshuht3iw.gif 1280w" 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, 640px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*ByrI2WK7KNweIbshuht3iw.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*ByrI2WK7KNweIbshuht3iw.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*ByrI2WK7KNweIbshuht3iw.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*ByrI2WK7KNweIbshuht3iw.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*ByrI2WK7KNweIbshuht3iw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*ByrI2WK7KNweIbshuht3iw.gif 1100w, https://miro.medium.com/v2/resize:fit:1280/1*ByrI2WK7KNweIbshuht3iw.gif 1280w" 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, 640px"/><img alt="" class="bh hf hg c" width="640" height="278" loading="lazy" role="presentation"/></picture></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">“comp” live template to create a composable</figcaption></figure><p id="5b83" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">You can also wrap the current composable with a <code class="cx qf qg qh qi b">Box</code> (or another widget), <code class="cx qf qg qh qi b">Row</code>, or <code class="cx qf qg qh qi b">Column</code> by using the “W”, “WR”, or “WC” abbreviation, respectively. Since we want a <code class="cx qf qg qh qi b">Row</code> in <code class="cx qf qg qh qi b">SurveyAnswer</code>, we’ll use the “WR” abbreviation to generate it.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div class="gs gt qa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*NAaPT0EEVCToEglAWXoFgQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*NAaPT0EEVCToEglAWXoFgQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*NAaPT0EEVCToEglAWXoFgQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*NAaPT0EEVCToEglAWXoFgQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*NAaPT0EEVCToEglAWXoFgQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*NAaPT0EEVCToEglAWXoFgQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1280/format:webp/1*NAaPT0EEVCToEglAWXoFgQ.gif 1280w" 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, 640px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*NAaPT0EEVCToEglAWXoFgQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*NAaPT0EEVCToEglAWXoFgQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*NAaPT0EEVCToEglAWXoFgQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*NAaPT0EEVCToEglAWXoFgQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*NAaPT0EEVCToEglAWXoFgQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*NAaPT0EEVCToEglAWXoFgQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1280/1*NAaPT0EEVCToEglAWXoFgQ.gif 1280w" 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, 640px"/><img alt="" class="bh hf hg c" width="640" height="278" loading="lazy" role="presentation"/></picture></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">“WR” live template to create a Row</figcaption></figure><p id="c152" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">To see the full list of Compose-related live templates, navigate to your Android Studio’s preferences.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qj"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*db8jkJS1xTC0J7EgV6kGXA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*db8jkJS1xTC0J7EgV6kGXA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*db8jkJS1xTC0J7EgV6kGXA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*db8jkJS1xTC0J7EgV6kGXA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*db8jkJS1xTC0J7EgV6kGXA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*db8jkJS1xTC0J7EgV6kGXA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*db8jkJS1xTC0J7EgV6kGXA.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*db8jkJS1xTC0J7EgV6kGXA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*db8jkJS1xTC0J7EgV6kGXA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*db8jkJS1xTC0J7EgV6kGXA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*db8jkJS1xTC0J7EgV6kGXA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*db8jkJS1xTC0J7EgV6kGXA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*db8jkJS1xTC0J7EgV6kGXA.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*db8jkJS1xTC0J7EgV6kGXA.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 hf hg c" width="700" height="333" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Android Studio preferences for Live Templates</figcaption></figure><h1 id="45a2" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Gutter icons</h1><p id="9000" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">The first element within the <code class="cx qf qg qh qi b">Row</code> is an <code class="cx qf qg qh qi b">Image</code> composable. In the snippet below, we are using the <code class="cx qf qg qh qi b">painterResource</code> API to fetch a resource drawable named “lenz” to be displayed in the <code class="cx qf qg qh qi b">Image</code>.</p><figure class="oo op oq or os ha"><div class="ot ju l fj"><div class="pz ov l"></div></div></figure><p id="2de3" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">One of the challenges when working with drawables is that it’s hard to know what the drawable looks like. To help with this, Android Studio shows an icon in the <a class="af oj" href="https://developer.android.com/jetpack/compose/tooling#gutter-icons" rel="noopener ugc nofollow" target="_blank">gutter</a> of the editor making it quick and easy to switch to another image. Let’s go ahead and switch the image to display “Spark”.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qk"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*0LmZZMDGlH5IEu-wv_4a1w.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*0LmZZMDGlH5IEu-wv_4a1w.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*0LmZZMDGlH5IEu-wv_4a1w.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*0LmZZMDGlH5IEu-wv_4a1w.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*0LmZZMDGlH5IEu-wv_4a1w.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*0LmZZMDGlH5IEu-wv_4a1w.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*0LmZZMDGlH5IEu-wv_4a1w.gif 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*0LmZZMDGlH5IEu-wv_4a1w.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*0LmZZMDGlH5IEu-wv_4a1w.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*0LmZZMDGlH5IEu-wv_4a1w.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*0LmZZMDGlH5IEu-wv_4a1w.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*0LmZZMDGlH5IEu-wv_4a1w.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*0LmZZMDGlH5IEu-wv_4a1w.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*0LmZZMDGlH5IEu-wv_4a1w.gif 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 hf hg c" width="700" height="297" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Gutter Icon for drawables</figcaption></figure><p id="5e2f" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">Next, let’s implement the <code class="cx qf qg qh qi b">Text</code> in the <code class="cx qf qg qh qi b">Row</code> and give it a custom color. Let’s also implement the <code class="cx qf qg qh qi b">RadioButton</code> and set it as unselected.</p><figure class="oo op oq or os ha"><div class="ot ju l fj"><div class="pz ov l"></div></div></figure><p id="097b" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">The color should also show up in the editor’s gutter. Clicking it gives us a color picker that we can use to quickly change the color. You can enter RGB, Hex, or easily pick colors out of the material color palette.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qk"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 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*pMOXgPvHuHpLkFw7mEPEhQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*pMOXgPvHuHpLkFw7mEPEhQ.gif 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 hf hg c" width="700" height="280" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Gutter Icon for colors</figcaption></figure><h1 id="5754" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Composable Preview</h1><p id="9fb7" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">With our basic composable function, it’s time to see how this composable actually looks! It would be great to be able to see our composable while we work on it, without having to run the whole app on a device. This is made easy by creating a <a class="af oj" href="https://developer.android.com/jetpack/compose/tooling#preview" rel="noopener ugc nofollow" target="_blank">composable preview</a>.</p><p id="e3fb" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">Using live templates, you can type “prev” followed by pressing tab or return. Doing this will generate a composable function with an extra <code class="cx qf qg qh qi b">@Preview</code> annotation. Let’s call it <code class="cx qf qg qh qi b">SurveyAnswerPreview</code>, invoke the <code class="cx qf qg qh qi b">SurveyAnswer</code> composable wrapped within our app’s custom theme.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div class="gs gt ql"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1000/format:webp/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 1000w" 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, 500px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1000/1*-eMLgRbXAfe5tO2Y25U1YQ.gif 1000w" 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, 500px"/><img alt="" class="bh hf hg c" width="500" height="289" loading="lazy" role="presentation"/></picture></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">“prev” live template to create a preview for a composable</figcaption></figure><p id="19b1" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">The <code class="cx qf qg qh qi b">@Preview</code> annotation tells Android Studio that this composable should be shown in the design view of this file. Tapping the ‘Split’ icon at the top of the editor and clicking ‘Build & Refresh’ should then show the <code class="cx qf qg qh qi b">SurveyAnswerPreview</code> composable!</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qm"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*mI9Sr47ErAWm7bRG5vg38w.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*mI9Sr47ErAWm7bRG5vg38w.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*mI9Sr47ErAWm7bRG5vg38w.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*mI9Sr47ErAWm7bRG5vg38w.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*mI9Sr47ErAWm7bRG5vg38w.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*mI9Sr47ErAWm7bRG5vg38w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*mI9Sr47ErAWm7bRG5vg38w.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*mI9Sr47ErAWm7bRG5vg38w.png 640w, https://miro.medium.com/v2/resize:fit:720/1*mI9Sr47ErAWm7bRG5vg38w.png 720w, https://miro.medium.com/v2/resize:fit:750/1*mI9Sr47ErAWm7bRG5vg38w.png 750w, https://miro.medium.com/v2/resize:fit:786/1*mI9Sr47ErAWm7bRG5vg38w.png 786w, https://miro.medium.com/v2/resize:fit:828/1*mI9Sr47ErAWm7bRG5vg38w.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*mI9Sr47ErAWm7bRG5vg38w.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*mI9Sr47ErAWm7bRG5vg38w.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 hf hg c" width="700" height="217" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Split view showing preview of a composable</figcaption></figure><p id="060d" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">The <code class="cx qf qg qh qi b">@Preview</code> annotation should also have a gutter icon (⚙️) where we can specify all kinds of properties for the preview. For example, we can show the preview with a certain background color in night mode.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div class="gs gt qa"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*LVrWifXfB4dl_8fL8otefg.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*LVrWifXfB4dl_8fL8otefg.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*LVrWifXfB4dl_8fL8otefg.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*LVrWifXfB4dl_8fL8otefg.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*LVrWifXfB4dl_8fL8otefg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*LVrWifXfB4dl_8fL8otefg.gif 1100w, https://miro.medium.com/v2/resize:fit:1280/format:webp/1*LVrWifXfB4dl_8fL8otefg.gif 1280w" 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, 640px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*LVrWifXfB4dl_8fL8otefg.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*LVrWifXfB4dl_8fL8otefg.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*LVrWifXfB4dl_8fL8otefg.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*LVrWifXfB4dl_8fL8otefg.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*LVrWifXfB4dl_8fL8otefg.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*LVrWifXfB4dl_8fL8otefg.gif 1100w, https://miro.medium.com/v2/resize:fit:1280/1*LVrWifXfB4dl_8fL8otefg.gif 1280w" 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, 640px"/><img alt="" class="bh hf hg c" width="640" height="300" loading="lazy" role="presentation"/></picture></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Configuring a preview composable using the gutter icon</figcaption></figure><p id="225f" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">You can add the <code class="cx qf qg qh qi b">@Preview</code> annotation to the same function multiple times to preview a composable with different properties. For example, we can add another preview that shows <code class="cx qf qg qh qi b">SurveyAnswer</code> with an extra large font.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qn"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 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*Lpg4fkorkGlEX0QSTWK7Fw.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Lpg4fkorkGlEX0QSTWK7Fw.gif 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 hf hg c" width="700" height="329" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Multiple preview annotations</figcaption></figure><h1 id="bd6e" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Multipreview</h1><p id="9eb9" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">Oftentimes, you’ll want to see how your composables look in different configurations — in light or dark mode, in different font sizes, and so on. With the <a class="af oj" href="https://developer.android.com/jetpack/compose/tooling#preview-multipreview" rel="noopener ugc nofollow" target="_blank">multipreview feature</a>, you can define an annotation class that itself has multiple preview annotations associated with it.</p><p id="1311" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">For example, we can define a <code class="cx qf qg qh qi b">FontScalePreviews</code> annotation class that has two <code class="cx qf qg qh qi b">@Preview</code> annotations for previewing a composable at different font scales, and a <code class="cx qf qg qh qi b">DarkLightPreviews</code> annotation class that previews a composable in both light and dark mode.</p><figure class="oo op oq or os ha"><div class="ot ju l fj"><div class="pz ov l"></div></div></figure><p id="3f21" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">To view these previews, simply annotate your preview composables with your newly created annotation classes.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qn"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*ht1rFrbji1HwhOINJvFZIA.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*ht1rFrbji1HwhOINJvFZIA.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*ht1rFrbji1HwhOINJvFZIA.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*ht1rFrbji1HwhOINJvFZIA.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*ht1rFrbji1HwhOINJvFZIA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*ht1rFrbji1HwhOINJvFZIA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*ht1rFrbji1HwhOINJvFZIA.gif 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*ht1rFrbji1HwhOINJvFZIA.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*ht1rFrbji1HwhOINJvFZIA.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*ht1rFrbji1HwhOINJvFZIA.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*ht1rFrbji1HwhOINJvFZIA.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*ht1rFrbji1HwhOINJvFZIA.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*ht1rFrbji1HwhOINJvFZIA.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*ht1rFrbji1HwhOINJvFZIA.gif 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 hf hg c" width="700" height="385" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Creating a new multipreview annotation</figcaption></figure><p id="8bfa" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">You can mix and match multipreviews in a way that fits your project. Larger projects might benefit from defining a multipreview annotation for each customisation vector (e.g. <code class="cx qf qg qh qi b">@FontScalePreviews</code>, <code class="cx qf qg qh qi b">@DarkLightPreviews</code>), combining those into use-case based multipreviews (e.g. <code class="cx qf qg qh qi b">@DesignComponentPreviews</code> or <code class="cx qf qg qh qi b">@ScreenPreviews</code>) and annotating preview composables with the most relevant one.</p><h1 id="4209" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Preview on device</h1><p id="c114" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">In addition to viewing previews in Android Studio, you can also deploy your previews directly to an emulator or device. To do so, you can use the run icon in the editor’s gutter. Instead of following the preview’s configuration parameters, this will use the configuration of the device being deployed to.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qn"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 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*l2nnCmIo7W0WV7Ehyk3DJw.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*l2nnCmIo7W0WV7Ehyk3DJw.gif 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 hf hg c" width="700" height="385" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Previewing a composable on a device</figcaption></figure><h1 id="7a5e" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Live edit of literals</h1><p id="239f" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">When you update a composable, typically you have to build & refresh the preview or redeploy to the device to see your changes. With <a class="af oj" href="https://developer.android.com/jetpack/compose/tooling#live-edit-literals" rel="noopener ugc nofollow" target="_blank">Live edit of literals</a>, rebuilding isn’t necessary for certain constant literals like integers, strings, and colors. For example, if we update the name of our super hero, we see the changes being updated immediately. Similarly, we can change the color of the text without needing to rebuild.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qn"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Wg7dasnuXnloPcA0mpS_Tw.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Wg7dasnuXnloPcA0mpS_Tw.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Wg7dasnuXnloPcA0mpS_Tw.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Wg7dasnuXnloPcA0mpS_Tw.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Wg7dasnuXnloPcA0mpS_Tw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Wg7dasnuXnloPcA0mpS_Tw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Wg7dasnuXnloPcA0mpS_Tw.gif 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*Wg7dasnuXnloPcA0mpS_Tw.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*Wg7dasnuXnloPcA0mpS_Tw.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*Wg7dasnuXnloPcA0mpS_Tw.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*Wg7dasnuXnloPcA0mpS_Tw.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*Wg7dasnuXnloPcA0mpS_Tw.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*Wg7dasnuXnloPcA0mpS_Tw.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Wg7dasnuXnloPcA0mpS_Tw.gif 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 hf hg c" width="700" height="385" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Live edit of literals</figcaption></figure><h1 id="2160" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Live Edit</h1><p id="1b1d" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">Live Edit takes this behavior even further and lets you change the contents of a composable without needing to rebuild. Working on our <code class="cx qf qg qh qi b">SurveyAnswer</code>, we can add modifiers, properties, or even remove or add child composables. All these changes are automatically reflected on your device.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qn"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 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*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 640w, https://miro.medium.com/v2/resize:fit:720/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 720w, https://miro.medium.com/v2/resize:fit:750/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 750w, https://miro.medium.com/v2/resize:fit:786/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 786w, https://miro.medium.com/v2/resize:fit:828/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 828w, https://miro.medium.com/v2/resize:fit:1100/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 1100w, https://miro.medium.com/v2/resize:fit:1400/1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif 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 hf hg c" width="700" height="338" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Live edit</figcaption></figure><p id="05cf" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">Live Edit is a new experimental feature, so right now it’s not available by default. Read the <a class="af oj" href="http://goo.gle/compose-live-edit-docs" rel="noopener ugc nofollow" target="_blank">documentation</a> to learn how you can enable it for your project.</p><h1 id="06ae" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Layout Inspector</h1><p id="cabf" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">With previews, multipreview, live edit of literals, and live edit, iterating on your design is a breeze. But, what if there’s something wrong with your composable, and you need to debug it? Android Studio allows you to dig deeper so you can figure out what’s wrong with the <a class="af oj" href="https://developer.android.com/jetpack/compose/tooling#layout-inspector" rel="noopener ugc nofollow" target="_blank">Layout Inspector</a>.</p><p id="8e25" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">The Layout Inspector allows you to explore all the nodes in the UI hierarchy. Highlighting an element also shows you all the attributes set for a particular element. For example, highlighting the <code class="cx qf qg qh qi b">RadioButton</code> in our composable shows which line in our code implements the onClick handler which is quite useful when debugging.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qo"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*7rnKikCcndJwbVz1JPl0Rg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*7rnKikCcndJwbVz1JPl0Rg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*7rnKikCcndJwbVz1JPl0Rg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*7rnKikCcndJwbVz1JPl0Rg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*7rnKikCcndJwbVz1JPl0Rg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*7rnKikCcndJwbVz1JPl0Rg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*7rnKikCcndJwbVz1JPl0Rg.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*7rnKikCcndJwbVz1JPl0Rg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*7rnKikCcndJwbVz1JPl0Rg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*7rnKikCcndJwbVz1JPl0Rg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*7rnKikCcndJwbVz1JPl0Rg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*7rnKikCcndJwbVz1JPl0Rg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*7rnKikCcndJwbVz1JPl0Rg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*7rnKikCcndJwbVz1JPl0Rg.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 hf hg c" width="700" height="228" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Layout Inspector</figcaption></figure><p id="8af5" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">The Layout Inspector also allows you to overlay an image on top of the layout to verify if your implementation is pixel perfect. In our case, we can see that there’s still some work to be done.</p><figure class="oo op oq or os ha gs gt paragraph-image"><div role="button" tabindex="0" class="hb hc fj hd bh he"><div class="gs gt qp"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*mjKEhFL08mkUKJiOqBxpmg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*mjKEhFL08mkUKJiOqBxpmg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*mjKEhFL08mkUKJiOqBxpmg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*mjKEhFL08mkUKJiOqBxpmg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*mjKEhFL08mkUKJiOqBxpmg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*mjKEhFL08mkUKJiOqBxpmg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*mjKEhFL08mkUKJiOqBxpmg.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*mjKEhFL08mkUKJiOqBxpmg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*mjKEhFL08mkUKJiOqBxpmg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*mjKEhFL08mkUKJiOqBxpmg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*mjKEhFL08mkUKJiOqBxpmg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*mjKEhFL08mkUKJiOqBxpmg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*mjKEhFL08mkUKJiOqBxpmg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*mjKEhFL08mkUKJiOqBxpmg.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 hf hg c" width="700" height="263" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qb ff qc gs gt qd qe bf b bg z du">Layout Inspector with Overlay</figcaption></figure><h1 id="d47c" class="ow ox hj bf oy oz pa pb pc pd pe pf pg ph pi pj pk pl pm pn po pp pq pr ps pt bk">Summary</h1><p id="a8db" class="pw-post-body-paragraph nl nm hj nn b no pu nq nr ns pv nu nv nw pw ny nz oa px oc od oe py og oh oi gn bk">That covers a lot of the helpful tooling provided by Android Studio to help us develop apps much faster in Compose.</p><p id="3be2" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">To summarize:</p><ul class=""><li id="76e7" class="nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi qq qr qs bk">With Live templates, we can insert common code snippets much faster using abbreviations</li><li id="cc5d" class="nl nm hj nn b no qt nq nr ns qu nu nv nw qv ny nz oa qw oc od oe qx og oh oi qq qr qs bk">Contextual Gutter icons allow us to quickly change things like images and colors</li><li id="5b99" class="nl nm hj nn b no qt nq nr ns qu nu nv nw qv ny nz oa qw oc od oe qx og oh oi qq qr qs bk">The <code class="cx qf qg qh qi b">@Preview</code> annotation allows us to see our composables without having to deploy the entire app to a device</li><li id="bb41" class="nl nm hj nn b no qt nq nr ns qu nu nv nw qv ny nz oa qw oc od oe qx og oh oi qq qr qs bk">Both the live edit of literals and live edit allow us to see code updates in real time</li></ul><p id="5ad5" class="pw-post-body-paragraph nl nm hj nn b no np nq nr ns nt nu nv nw nx ny nz oa ob oc od oe of og oh oi gn bk">Got any questions? Leave a comment below or use the #MADCompose hashtag on Twitter and we will address your questions in our upcoming live Q&A for the series on October 13. Stay tuned!</p></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qy qz ab jp"><div class="ra ab"><a class="rb ay am ao" rel="noopener follow" href="/tag/android-studio?source=post_page-----42621bd8719b--------------------------------"><div class="rc fj cx rd ge re rf bf b bg z bk rg">Android Studio</div></a></div><div class="ra ab"><a class="rb ay am ao" rel="noopener follow" href="/tag/live-templates?source=post_page-----42621bd8719b--------------------------------"><div class="rc fj cx rd ge re rf bf b bg z bk rg">Live Templates</div></a></div><div class="ra ab"><a class="rb ay am ao" rel="noopener follow" href="/tag/preview?source=post_page-----42621bd8719b--------------------------------"><div class="rc fj cx rd ge re rf bf b bg z bk rg">Preview</div></a></div><div class="ra ab"><a class="rb ay am ao" rel="noopener follow" href="/tag/mad-skills?source=post_page-----42621bd8719b--------------------------------"><div class="rc fj cx rd ge re rf bf b bg z bk rg">Mad Skills</div></a></div></div></div></div><div class="l"></div><footer class="rh ri rj rk rl ab q rm iz c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rn"><div class="ab q lk"><div class="ro l"><span class="l rp rq rr e d"><div class="ab q lk ll"><div class="pw-multi-vote-icon fj jt lm ln lo"><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%2F42621bd8719b&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fcompose-tooling-42621bd8719b&user=Chris+Arriola&userId=5e0374fd3b15&source=---footer_actions--42621bd8719b---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lp ao lq lr ls lt am lu lv lw lo"><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 lx ly lz ma mb mc md"><p class="bf b dv z du"><span class="me">--</span></p></div></div></span><span class="l h g f rs rt"><div class="ab q lk ll"><div class="pw-multi-vote-icon fj jt lm ln lo"><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%2F42621bd8719b&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fcompose-tooling-42621bd8719b&user=Chris+Arriola&userId=5e0374fd3b15&source=---footer_actions--42621bd8719b---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lp ao lq lr ls lt am lu lv lw lo"><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 lx ly lz ma mb mc md"><p class="bf b dv z du"><span class="me">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao lp mh mi ab q fk mj mk" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mg"><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 mf mg">5</span></p></button></div></div></div></div><div class="ab q"><div class="ru l jm"><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%2F42621bd8719b&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fandroiddevelopers%2Fcompose-tooling-42621bd8719b&source=---footer_actions--42621bd8719b---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mm" 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="ru l jm"><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 mt an ao ap ex mu mv mk mw"><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="rv rw rx ry rz l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="sa bh r sb"></div><div class="sc l"><div class="ab sd se sf jo jn"><div class="sg sh si sj sk sl sm sn so sp ab cp"><div class="h k"><a href="https://medium.com/androiddevelopers?source=post_page---post_publication_info--42621bd8719b--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Android Developers" class="sq iq ir cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*4Tg6pPzer7cIarYaszIKaQ.png" width="48" height="48" loading="lazy"/><div class="sq l ir iq fs n fr sr"></div></div></a></div><div class="j i d"><a href="https://medium.com/androiddevelopers?source=post_page---post_publication_info--42621bd8719b--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Android Developers" class="sq st ss cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*4Tg6pPzer7cIarYaszIKaQ.png" width="64" height="64" loading="lazy"/><div class="sq l ss st fs n fr sr"></div></div></a></div><div class="j i d su jm"><div class="ab"></div></div></div><div class="ab co sv"><div class="sw sx sy sz ta 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--42621bd8719b--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf tc td te tf tg th ti nw tj tk oa tl tm oe tn to bk"><span class="gn tb">Published in <!-- -->Android Developers</span></h2></a><div class="ra ab ip"><div class="l jm"><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 jf" rel="noopener follow" href="/androiddevelopers/followers?source=post_page---post_publication_info--42621bd8719b--------------------------------">51K Followers</a></span></div><div class="bf b bg z du ab js"><span class="jg 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 jf" rel="noopener follow" href="/androiddevelopers/test-smarter-not-harder-new-testing-strategies-documentation-255973814ae3?source=post_page---post_publication_info--42621bd8719b--------------------------------">Last published <!-- -->2 days ago</a></div></div><div class="tp 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 sd se sf jo jn"><div class="sg sh si sj sk sl sm sn so sp ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@arriolachris?source=post_page---post_author_info--42621bd8719b--------------------------------"><div class="l fj"><img alt="Chris Arriola" class="l fd by ir iq cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*HQyYcSQaYQyLvIeqfpdjrQ.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l ir iq fs n ay sr"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@arriolachris?source=post_page---post_author_info--42621bd8719b--------------------------------"><div class="l fj"><img alt="Chris Arriola" class="l fd by ss st cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*HQyYcSQaYQyLvIeqfpdjrQ.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l ss st fs n ay sr"></div></div></a></div><div class="j i d su jm"><div class="ab"><span><button class="bf b bg z tq rc tr ts tt tu tv ev ew tw tx ty fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co sv"><div class="sw sx sy sz ta l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@arriolachris?source=post_page---post_author_info--42621bd8719b--------------------------------"><h2 class="pw-author-name bf tc td te tf tg th ti nw tj tk oa tl tm oe tn to bk"><span class="gn tb">Written by <!-- -->Chris Arriola</span></h2></a><div class="ra ab ip"><div class="l jm"><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 jf" rel="noopener follow" href="/@arriolachris/followers?source=post_page---post_author_info--42621bd8719b--------------------------------">1.3K Followers</a></span></div><div class="bf b bg z du ab js"><span class="jg 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 jf" rel="noopener follow" href="/@arriolachris/following?source=post_page---post_author_info--42621bd8719b--------------------------------">437 Following</a></div></div><div class="tp l"><p class="bf b bg z bk"><span class="gn">Android Engineer at Instagram Previously: Android Developer Relations Engineer at Google</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z tq rc tr ts tt tu tv ev ew tw tx ty fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div><div class="tz ua ub uc ud l"><div class="sa bh r tz ua ue uf ug"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf tc oz pb pc pd pf pg ph pj pk pl pn po pp pr ps bk">Responses (<!-- -->5<!-- -->)</h2><div class="ab uh"><div><div class="bm" aria-hidden="false"><a class="ui uj" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--42621bd8719b--------------------------------" 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="uk l"><button class="bf b bg z bk rc ul um un mm mj tv ev ew ex uo up uq fa ur us ut uu uv fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="uw ux uy uz va l bx"><div class="h k j"><div class="sa bh vb vc"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="vd ab lk jp"><div class="ve vf 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-----42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="ve vf 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-----42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="ve vf 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-----42621bd8719b--------------------------------"><p class="bf b dv z du">About</p></a></div><div class="ve vf 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-----42621bd8719b--------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="ve vf l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="pressinquiries@medium.com?source=post_page-----42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="ve vf 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-----42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="ve vf 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-----42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="ve vf 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-----42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="ve vf 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-----42621bd8719b--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="ve 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-----42621bd8719b--------------------------------"><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-20241122-185319-7bcdc08639"</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-42621bd8719b","user-5e0374fd3b15","collection-95b274b437c2"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"lohpSummerUpsellEnabled":false,"publicationHierarchyEnabledWeb":false,"postBottomResponsesEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"3a8c8857-a697-4e44-8008-2fd1f735dc40","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-9b817d84797a55f60dbe3c3d5815e168-61e819b7fb9bcf41-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fcompose-tooling-42621bd8719b","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-20241122-185319-7bcdc08639","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-20241122-185319-7bcdc08639","commit":"7bcdc08639c179dc5172558201a3fd3abc1b5db6"}},"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\":\"42621bd8719b\"})":{"__ref":"Post:42621bd8719b"}},"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,"editors":[{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:e1f26db83092"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:2e0fc9a4a8c2"}},{"__typename":"CollectionMastheadUserItem","user":{"__ref":"User:d5885adb1ddf"}}],"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":51948,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:255973814ae3"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:95b274b437c2-viewerId:lo_6b6d7c93567f"},"twitterUsername":"androiddev","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*5pMw_nx55x_66tk77kutPQ.png"}},"User:e1f26db83092":{"__typename":"User","id":"e1f26db83092"},"User:2e0fc9a4a8c2":{"__typename":"User","id":"2e0fc9a4a8c2"},"User:d5885adb1ddf":{"__typename":"User","id":"d5885adb1ddf"},"ImageMetadata:1*4Tg6pPzer7cIarYaszIKaQ.png":{"__typename":"ImageMetadata","id":"1*4Tg6pPzer7cIarYaszIKaQ.png"},"User:e0a4c9469bb5":{"__typename":"User","id":"e0a4c9469bb5","customDomainState":null,"hasSubdomain":false,"username":"JoseAlcerreca"},"Post:255973814ae3":{"__typename":"Post","id":"255973814ae3","firstPublishedAt":1732208584164,"creator":{"__ref":"User:e0a4c9469bb5"},"collection":{"__ref":"Collection:95b274b437c2"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Ftest-smarter-not-harder-new-testing-strategies-documentation-255973814ae3","sequence":null,"uniqueSlug":"test-smarter-not-harder-new-testing-strategies-documentation-255973814ae3"},"LinkedAccounts:5e0374fd3b15":{"__typename":"LinkedAccounts","mastodon":null,"id":"5e0374fd3b15"},"UserViewerEdge:userId:5e0374fd3b15-viewerId:lo_6b6d7c93567f":{"__typename":"UserViewerEdge","id":"userId:5e0374fd3b15-viewerId:lo_6b6d7c93567f","isFollowing":false,"isUser":false,"isMuting":false},"NewsletterV3:fd53a9567b91":{"__typename":"NewsletterV3","id":"fd53a9567b91","type":"NEWSLETTER_TYPE_AUTHOR","slug":"5e0374fd3b15","name":"5e0374fd3b15","collection":null,"user":{"__ref":"User:5e0374fd3b15"}},"User:5e0374fd3b15":{"__typename":"User","id":"5e0374fd3b15","name":"Chris Arriola","username":"arriolachris","newsletterV3":{"__ref":"NewsletterV3:fd53a9567b91"},"linkedAccounts":{"__ref":"LinkedAccounts:5e0374fd3b15"},"isSuspended":false,"imageId":"1*HQyYcSQaYQyLvIeqfpdjrQ.jpeg","mediumMemberAt":0,"verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":1344,"followingCount":399,"collectionFollowingCount":38},"customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"arriolachris.medium.com"}},"hasSubdomain":true,"bio":"Android Engineer at Instagram Previously: Android Developer Relations Engineer at Google","isPartnerProgramEnrolled":false,"viewerEdge":{"__ref":"UserViewerEdge:userId:5e0374fd3b15-viewerId:lo_6b6d7c93567f"},"viewerIsUser":false,"postSubscribeMembershipUpsellShownAt":0,"membership":null,"allowNotes":true,"twitterScreenName":"arriolachris"},"Topic:64756708407c":{"__typename":"Topic","slug":"android-development","id":"64756708407c","name":"Android Dev"},"ImageMetadata:1*WVUBQsNgePqQxmrHjaID4g.png":{"__typename":"ImageMetadata","id":"1*WVUBQsNgePqQxmrHjaID4g.png","originalHeight":968,"originalWidth":3249,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_0":{"__typename":"Paragraph","id":"134d860f440b_0","name":"383c","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*WVUBQsNgePqQxmrHjaID4g.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_1":{"__typename":"Paragraph","id":"134d860f440b_1","name":"f7e7","type":"H3","href":null,"layout":null,"metadata":null,"text":"Compose Tooling","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_2":{"__typename":"Paragraph","id":"134d860f440b_2","name":"4888","type":"P","href":null,"layout":null,"metadata":null,"text":"Compose allows you to build beautiful UIs quickly. Together with the Android Studio tooling support, you’re able to accelerate the development process even further with faster iteration and better debugging.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_3":{"__typename":"Paragraph","id":"134d860f440b_3","name":"a0cb","type":"P","href":null,"layout":null,"metadata":null,"text":"So far we’ve looked at how to implement a single answer option in Jetsurvey, one of our Compose samples (previous article). Let’s see how Android Studio can help us write this efficiently.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":88,"end":103,"href":"http:\u002F\u002Fgoo.gle\u002Fcompose-samples","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":105,"end":121,"href":"https:\u002F\u002Fmedium.com\u002Fp\u002F8d3651228764","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_4":{"__typename":"Paragraph","id":"134d860f440b_4","name":"6d15","type":"BQ","href":null,"layout":null,"metadata":null,"text":"If you’ve got any questions so far from this series on Compose Basics, we will have a live Q&A session on October 13th. Leave a comment here, on YouTube, or using #MADCompose on Twitter to ask your questions.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_5":{"__typename":"Paragraph","id":"134d860f440b_5","name":"14d4","type":"P","href":null,"layout":null,"metadata":null,"text":"You can also watch the accompanying video to this article here:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:471d24de3a04f56c136983ec770ad577":{"__typename":"MediaResource","id":"471d24de3a04f56c136983ec770ad577","iframeSrc":"https:\u002F\u002Fcdn.embedly.com\u002Fwidgets\u002Fmedia.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F8XJfLaAOxD0%3Flist%3DPLWz5rJ2EKKc-CG9riunK996aI6cRhXFDC&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8XJfLaAOxD0&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F8XJfLaAOxD0%2Fhqdefault.jpg&key=a19fcc184b9711e1b4764040d3dc5c07&type=text%2Fhtml&schema=youtube","iframeHeight":480,"iframeWidth":854,"title":"Accelerate development: Compose tooling - MAD Skills"},"Paragraph:134d860f440b_6":{"__typename":"Paragraph","id":"134d860f440b_6","name":"a4ae","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:471d24de3a04f56c136983ec770ad577"}},"mixtapeMetadata":null},"Paragraph:134d860f440b_7":{"__typename":"Paragraph","id":"134d860f440b_7","name":"ce26","type":"H3","href":null,"layout":null,"metadata":null,"text":"Live Templates","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_8":{"__typename":"Paragraph","id":"134d860f440b_8","name":"0463","type":"P","href":null,"layout":null,"metadata":null,"text":"When building composable elements for your app, you might find yourself frequently typing:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:04087cc23dff47470b4c54bf91e4c08b":{"__typename":"MediaResource","id":"04087cc23dff47470b4c54bf91e4c08b","iframeSrc":"","iframeHeight":0,"iframeWidth":0,"title":"ComposeTooling_live_template.kt"},"Paragraph:134d860f440b_9":{"__typename":"Paragraph","id":"134d860f440b_9","name":"b104","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:04087cc23dff47470b4c54bf91e4c08b"}},"mixtapeMetadata":null},"Paragraph:134d860f440b_10":{"__typename":"Paragraph","id":"134d860f440b_10","name":"8ed3","type":"P","href":null,"layout":null,"metadata":null,"text":"To help save on keystrokes, live templates allow you to insert common code snippets by typing an abbreviation. To insert the above code snippet, simply type “comp” followed by hitting the tab or return key to insert a composable function. From there, you can enter the name of the function, and you’re done 🏃♂️💨","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":28,"end":42,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose\u002Ftooling#live-templates","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*ByrI2WK7KNweIbshuht3iw.gif":{"__typename":"ImageMetadata","id":"1*ByrI2WK7KNweIbshuht3iw.gif","originalHeight":278,"originalWidth":640,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_11":{"__typename":"Paragraph","id":"134d860f440b_11","name":"ab32","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*ByrI2WK7KNweIbshuht3iw.gif"},"text":"“comp” live template to create a composable","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_12":{"__typename":"Paragraph","id":"134d860f440b_12","name":"5b83","type":"P","href":null,"layout":null,"metadata":null,"text":"You can also wrap the current composable with a Box (or another widget), Row, or Column by using the “W”, “WR”, or “WC” abbreviation, respectively. Since we want a Row in SurveyAnswer, we’ll use the “WR” abbreviation to generate it.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":48,"end":51,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":73,"end":76,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":81,"end":87,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":164,"end":167,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":171,"end":183,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*NAaPT0EEVCToEglAWXoFgQ.gif":{"__typename":"ImageMetadata","id":"1*NAaPT0EEVCToEglAWXoFgQ.gif","originalHeight":278,"originalWidth":640,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_13":{"__typename":"Paragraph","id":"134d860f440b_13","name":"3e20","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*NAaPT0EEVCToEglAWXoFgQ.gif"},"text":"“WR” live template to create a Row","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_14":{"__typename":"Paragraph","id":"134d860f440b_14","name":"c152","type":"P","href":null,"layout":null,"metadata":null,"text":"To see the full list of Compose-related live templates, navigate to your Android Studio’s preferences.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*db8jkJS1xTC0J7EgV6kGXA.png":{"__typename":"ImageMetadata","id":"1*db8jkJS1xTC0J7EgV6kGXA.png","originalHeight":856,"originalWidth":1800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_15":{"__typename":"Paragraph","id":"134d860f440b_15","name":"38d3","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*db8jkJS1xTC0J7EgV6kGXA.png"},"text":"Android Studio preferences for Live Templates","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_16":{"__typename":"Paragraph","id":"134d860f440b_16","name":"45a2","type":"H3","href":null,"layout":null,"metadata":null,"text":"Gutter icons","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_17":{"__typename":"Paragraph","id":"134d860f440b_17","name":"9000","type":"P","href":null,"layout":null,"metadata":null,"text":"The first element within the Row is an Image composable. In the snippet below, we are using the painterResource API to fetch a resource drawable named “lenz” to be displayed in the Image.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":29,"end":32,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":39,"end":44,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":96,"end":111,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":181,"end":186,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:5fae87ce5ca4ad222d956c4523c26481":{"__typename":"MediaResource","id":"5fae87ce5ca4ad222d956c4523c26481","iframeSrc":"","iframeHeight":0,"iframeWidth":0,"title":"ComposeTooling_gutter_icons.kt"},"Paragraph:134d860f440b_18":{"__typename":"Paragraph","id":"134d860f440b_18","name":"5281","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:5fae87ce5ca4ad222d956c4523c26481"}},"mixtapeMetadata":null},"Paragraph:134d860f440b_19":{"__typename":"Paragraph","id":"134d860f440b_19","name":"2de3","type":"P","href":null,"layout":null,"metadata":null,"text":"One of the challenges when working with drawables is that it’s hard to know what the drawable looks like. To help with this, Android Studio shows an icon in the gutter of the editor making it quick and easy to switch to another image. Let’s go ahead and switch the image to display “Spark”.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":161,"end":167,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose\u002Ftooling#gutter-icons","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*0LmZZMDGlH5IEu-wv_4a1w.gif":{"__typename":"ImageMetadata","id":"1*0LmZZMDGlH5IEu-wv_4a1w.gif","originalHeight":407,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_20":{"__typename":"Paragraph","id":"134d860f440b_20","name":"665c","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*0LmZZMDGlH5IEu-wv_4a1w.gif"},"text":"Gutter Icon for drawables","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_21":{"__typename":"Paragraph","id":"134d860f440b_21","name":"5e2f","type":"P","href":null,"layout":null,"metadata":null,"text":"Next, let’s implement the Text in the Row and give it a custom color. Let’s also implement the RadioButton and set it as unselected.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":26,"end":30,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":38,"end":41,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":95,"end":106,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:6fe18b8cc0aca93b3dd7155e7958ca52":{"__typename":"MediaResource","id":"6fe18b8cc0aca93b3dd7155e7958ca52","iframeSrc":"","iframeHeight":0,"iframeWidth":0,"title":"ComposeTooling_gutter_icons2.kt"},"Paragraph:134d860f440b_22":{"__typename":"Paragraph","id":"134d860f440b_22","name":"7043","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:6fe18b8cc0aca93b3dd7155e7958ca52"}},"mixtapeMetadata":null},"Paragraph:134d860f440b_23":{"__typename":"Paragraph","id":"134d860f440b_23","name":"097b","type":"P","href":null,"layout":null,"metadata":null,"text":"The color should also show up in the editor’s gutter. Clicking it gives us a color picker that we can use to quickly change the color. You can enter RGB, Hex, or easily pick colors out of the material color palette.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*pMOXgPvHuHpLkFw7mEPEhQ.gif":{"__typename":"ImageMetadata","id":"1*pMOXgPvHuHpLkFw7mEPEhQ.gif","originalHeight":383,"originalWidth":960,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_24":{"__typename":"Paragraph","id":"134d860f440b_24","name":"fbad","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*pMOXgPvHuHpLkFw7mEPEhQ.gif"},"text":"Gutter Icon for colors","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_25":{"__typename":"Paragraph","id":"134d860f440b_25","name":"5754","type":"H3","href":null,"layout":null,"metadata":null,"text":"Composable Preview","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_26":{"__typename":"Paragraph","id":"134d860f440b_26","name":"9fb7","type":"P","href":null,"layout":null,"metadata":null,"text":"With our basic composable function, it’s time to see how this composable actually looks! It would be great to be able to see our composable while we work on it, without having to run the whole app on a device. This is made easy by creating a composable preview.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":242,"end":260,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose\u002Ftooling#preview","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_27":{"__typename":"Paragraph","id":"134d860f440b_27","name":"e3fb","type":"P","href":null,"layout":null,"metadata":null,"text":"Using live templates, you can type “prev” followed by pressing tab or return. Doing this will generate a composable function with an extra @Preview annotation. Let’s call it SurveyAnswerPreview, invoke the SurveyAnswer composable wrapped within our app’s custom theme.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":139,"end":147,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":174,"end":193,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":206,"end":218,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*-eMLgRbXAfe5tO2Y25U1YQ.gif":{"__typename":"ImageMetadata","id":"1*-eMLgRbXAfe5tO2Y25U1YQ.gif","originalHeight":289,"originalWidth":500,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_28":{"__typename":"Paragraph","id":"134d860f440b_28","name":"08cf","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*-eMLgRbXAfe5tO2Y25U1YQ.gif"},"text":"“prev” live template to create a preview for a composable","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_29":{"__typename":"Paragraph","id":"134d860f440b_29","name":"19b1","type":"P","href":null,"layout":null,"metadata":null,"text":"The @Preview annotation tells Android Studio that this composable should be shown in the design view of this file. Tapping the ‘Split’ icon at the top of the editor and clicking ‘Build & Refresh’ should then show the SurveyAnswerPreview composable!","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":4,"end":12,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":217,"end":236,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*mI9Sr47ErAWm7bRG5vg38w.png":{"__typename":"ImageMetadata","id":"1*mI9Sr47ErAWm7bRG5vg38w.png","originalHeight":752,"originalWidth":2432,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_30":{"__typename":"Paragraph","id":"134d860f440b_30","name":"2d05","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*mI9Sr47ErAWm7bRG5vg38w.png"},"text":"Split view showing preview of a composable","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_31":{"__typename":"Paragraph","id":"134d860f440b_31","name":"060d","type":"P","href":null,"layout":null,"metadata":null,"text":"The @Preview annotation should also have a gutter icon (⚙️) where we can specify all kinds of properties for the preview. For example, we can show the preview with a certain background color in night mode.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":4,"end":12,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*LVrWifXfB4dl_8fL8otefg.gif":{"__typename":"ImageMetadata","id":"1*LVrWifXfB4dl_8fL8otefg.gif","originalHeight":300,"originalWidth":640,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_32":{"__typename":"Paragraph","id":"134d860f440b_32","name":"db9f","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*LVrWifXfB4dl_8fL8otefg.gif"},"text":"Configuring a preview composable using the gutter icon","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_33":{"__typename":"Paragraph","id":"134d860f440b_33","name":"225f","type":"P","href":null,"layout":null,"metadata":null,"text":"You can add the @Preview annotation to the same function multiple times to preview a composable with different properties. For example, we can add another preview that shows SurveyAnswer with an extra large font.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":16,"end":24,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":174,"end":186,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Lpg4fkorkGlEX0QSTWK7Fw.gif":{"__typename":"ImageMetadata","id":"1*Lpg4fkorkGlEX0QSTWK7Fw.gif","originalHeight":375,"originalWidth":800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_34":{"__typename":"Paragraph","id":"134d860f440b_34","name":"83a9","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Lpg4fkorkGlEX0QSTWK7Fw.gif"},"text":"Multiple preview annotations","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_35":{"__typename":"Paragraph","id":"134d860f440b_35","name":"bd6e","type":"H3","href":null,"layout":null,"metadata":null,"text":"Multipreview","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_36":{"__typename":"Paragraph","id":"134d860f440b_36","name":"9eb9","type":"P","href":null,"layout":null,"metadata":null,"text":"Oftentimes, you’ll want to see how your composables look in different configurations — in light or dark mode, in different font sizes, and so on. With the multipreview feature, you can define an annotation class that itself has multiple preview annotations associated with it.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":155,"end":175,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose\u002Ftooling#preview-multipreview","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_37":{"__typename":"Paragraph","id":"134d860f440b_37","name":"1311","type":"P","href":null,"layout":null,"metadata":null,"text":"For example, we can define a FontScalePreviews annotation class that has two @Preview annotations for previewing a composable at different font scales, and a DarkLightPreviews annotation class that previews a composable in both light and dark mode.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":29,"end":46,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":77,"end":85,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":158,"end":175,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"MediaResource:7430070cec77bd4f1ae0eccc7cf58cd5":{"__typename":"MediaResource","id":"7430070cec77bd4f1ae0eccc7cf58cd5","iframeSrc":"","iframeHeight":0,"iframeWidth":0,"title":"ComposeTooling_multipreview.kt"},"Paragraph:134d860f440b_38":{"__typename":"Paragraph","id":"134d860f440b_38","name":"a970","type":"IFRAME","href":null,"layout":"INSET_CENTER","metadata":null,"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":{"__typename":"Iframe","mediaResource":{"__ref":"MediaResource:7430070cec77bd4f1ae0eccc7cf58cd5"}},"mixtapeMetadata":null},"Paragraph:134d860f440b_39":{"__typename":"Paragraph","id":"134d860f440b_39","name":"3f21","type":"P","href":null,"layout":null,"metadata":null,"text":"To view these previews, simply annotate your preview composables with your newly created annotation classes.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*ht1rFrbji1HwhOINJvFZIA.gif":{"__typename":"ImageMetadata","id":"1*ht1rFrbji1HwhOINJvFZIA.gif","originalHeight":439,"originalWidth":800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_40":{"__typename":"Paragraph","id":"134d860f440b_40","name":"b3bd","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*ht1rFrbji1HwhOINJvFZIA.gif"},"text":"Creating a new multipreview annotation","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_41":{"__typename":"Paragraph","id":"134d860f440b_41","name":"8bfa","type":"P","href":null,"layout":null,"metadata":null,"text":"You can mix and match multipreviews in a way that fits your project. Larger projects might benefit from defining a multipreview annotation for each customisation vector (e.g. @FontScalePreviews, @DarkLightPreviews), combining those into use-case based multipreviews (e.g. @DesignComponentPreviews or @ScreenPreviews) and annotating preview composables with the most relevant one.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":175,"end":193,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":195,"end":213,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":272,"end":296,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":300,"end":315,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_42":{"__typename":"Paragraph","id":"134d860f440b_42","name":"4209","type":"H3","href":null,"layout":null,"metadata":null,"text":"Preview on device","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_43":{"__typename":"Paragraph","id":"134d860f440b_43","name":"c114","type":"P","href":null,"layout":null,"metadata":null,"text":"In addition to viewing previews in Android Studio, you can also deploy your previews directly to an emulator or device. To do so, you can use the run icon in the editor’s gutter. Instead of following the preview’s configuration parameters, this will use the configuration of the device being deployed to.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*l2nnCmIo7W0WV7Ehyk3DJw.gif":{"__typename":"ImageMetadata","id":"1*l2nnCmIo7W0WV7Ehyk3DJw.gif","originalHeight":439,"originalWidth":800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_44":{"__typename":"Paragraph","id":"134d860f440b_44","name":"b0c0","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*l2nnCmIo7W0WV7Ehyk3DJw.gif"},"text":"Previewing a composable on a device","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_45":{"__typename":"Paragraph","id":"134d860f440b_45","name":"7a5e","type":"H3","href":null,"layout":null,"metadata":null,"text":"Live edit of literals","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_46":{"__typename":"Paragraph","id":"134d860f440b_46","name":"239f","type":"P","href":null,"layout":null,"metadata":null,"text":"When you update a composable, typically you have to build & refresh the preview or redeploy to the device to see your changes. With Live edit of literals, rebuilding isn’t necessary for certain constant literals like integers, strings, and colors. For example, if we update the name of our super hero, we see the changes being updated immediately. Similarly, we can change the color of the text without needing to rebuild.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":132,"end":153,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose\u002Ftooling#live-edit-literals","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Wg7dasnuXnloPcA0mpS_Tw.gif":{"__typename":"ImageMetadata","id":"1*Wg7dasnuXnloPcA0mpS_Tw.gif","originalHeight":439,"originalWidth":800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_47":{"__typename":"Paragraph","id":"134d860f440b_47","name":"e25e","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Wg7dasnuXnloPcA0mpS_Tw.gif"},"text":"Live edit of literals","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_48":{"__typename":"Paragraph","id":"134d860f440b_48","name":"2160","type":"H3","href":null,"layout":null,"metadata":null,"text":"Live Edit","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_49":{"__typename":"Paragraph","id":"134d860f440b_49","name":"1b1d","type":"P","href":null,"layout":null,"metadata":null,"text":"Live Edit takes this behavior even further and lets you change the contents of a composable without needing to rebuild. Working on our SurveyAnswer, we can add modifiers, properties, or even remove or add child composables. All these changes are automatically reflected on your device.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":135,"end":147,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif":{"__typename":"ImageMetadata","id":"1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif","originalHeight":386,"originalWidth":800,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_50":{"__typename":"Paragraph","id":"134d860f440b_50","name":"ba14","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*Tnh1EWrLQ-rWSPC3KtDHwQ.gif"},"text":"Live edit","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_51":{"__typename":"Paragraph","id":"134d860f440b_51","name":"05cf","type":"P","href":null,"layout":null,"metadata":null,"text":"Live Edit is a new experimental feature, so right now it’s not available by default. Read the documentation to learn how you can enable it for your project.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":94,"end":107,"href":"http:\u002F\u002Fgoo.gle\u002Fcompose-live-edit-docs","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_52":{"__typename":"Paragraph","id":"134d860f440b_52","name":"06ae","type":"H3","href":null,"layout":null,"metadata":null,"text":"Layout Inspector","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_53":{"__typename":"Paragraph","id":"134d860f440b_53","name":"cabf","type":"P","href":null,"layout":null,"metadata":null,"text":"With previews, multipreview, live edit of literals, and live edit, iterating on your design is a breeze. But, what if there’s something wrong with your composable, and you need to debug it? Android Studio allows you to dig deeper so you can figure out what’s wrong with the Layout Inspector.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":274,"end":290,"href":"https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose\u002Ftooling#layout-inspector","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_54":{"__typename":"Paragraph","id":"134d860f440b_54","name":"8e25","type":"P","href":null,"layout":null,"metadata":null,"text":"The Layout Inspector allows you to explore all the nodes in the UI hierarchy. Highlighting an element also shows you all the attributes set for a particular element. For example, highlighting the RadioButton in our composable shows which line in our code implements the onClick handler which is quite useful when debugging.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":196,"end":207,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*7rnKikCcndJwbVz1JPl0Rg.png":{"__typename":"ImageMetadata","id":"1*7rnKikCcndJwbVz1JPl0Rg.png","originalHeight":1064,"originalWidth":3280,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_55":{"__typename":"Paragraph","id":"134d860f440b_55","name":"e37c","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*7rnKikCcndJwbVz1JPl0Rg.png"},"text":"Layout Inspector","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_56":{"__typename":"Paragraph","id":"134d860f440b_56","name":"8af5","type":"P","href":null,"layout":null,"metadata":null,"text":"The Layout Inspector also allows you to overlay an image on top of the layout to verify if your implementation is pixel perfect. In our case, we can see that there’s still some work to be done.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*mjKEhFL08mkUKJiOqBxpmg.png":{"__typename":"ImageMetadata","id":"1*mjKEhFL08mkUKJiOqBxpmg.png","originalHeight":900,"originalWidth":2402,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:134d860f440b_57":{"__typename":"Paragraph","id":"134d860f440b_57","name":"ec18","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*mjKEhFL08mkUKJiOqBxpmg.png"},"text":"Layout Inspector with Overlay","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_58":{"__typename":"Paragraph","id":"134d860f440b_58","name":"d47c","type":"H3","href":null,"layout":null,"metadata":null,"text":"Summary","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_59":{"__typename":"Paragraph","id":"134d860f440b_59","name":"a8db","type":"P","href":null,"layout":null,"metadata":null,"text":"That covers a lot of the helpful tooling provided by Android Studio to help us develop apps much faster in Compose.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_60":{"__typename":"Paragraph","id":"134d860f440b_60","name":"3be2","type":"P","href":null,"layout":null,"metadata":null,"text":"To summarize:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_61":{"__typename":"Paragraph","id":"134d860f440b_61","name":"76e7","type":"ULI","href":null,"layout":null,"metadata":null,"text":"With Live templates, we can insert common code snippets much faster using abbreviations","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_62":{"__typename":"Paragraph","id":"134d860f440b_62","name":"cc5d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Contextual Gutter icons allow us to quickly change things like images and colors","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_63":{"__typename":"Paragraph","id":"134d860f440b_63","name":"5b99","type":"ULI","href":null,"layout":null,"metadata":null,"text":"The @Preview annotation allows us to see our composables without having to deploy the entire app to a device","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":4,"end":12,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_64":{"__typename":"Paragraph","id":"134d860f440b_64","name":"bb41","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Both the live edit of literals and live edit allow us to see code updates in real time","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:134d860f440b_65":{"__typename":"Paragraph","id":"134d860f440b_65","name":"5ad5","type":"P","href":null,"layout":null,"metadata":null,"text":"Got any questions? Leave a comment below or use the #MADCompose hashtag on Twitter and we will address your questions in our upcoming live Q&A for the series on October 13. Stay tuned!","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:95b274b437c2-viewerId:lo_6b6d7c93567f":{"__typename":"CollectionViewerEdge","id":"collectionId:95b274b437c2-viewerId:lo_6b6d7c93567f","isEditor":false,"isMuting":false},"ImageMetadata:1*5pMw_nx55x_66tk77kutPQ.png":{"__typename":"ImageMetadata","id":"1*5pMw_nx55x_66tk77kutPQ.png","originalWidth":600,"originalHeight":72},"PostViewerEdge:postId:42621bd8719b-viewerId:lo_6b6d7c93567f":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:42621bd8719b-viewerId:lo_6b6d7c93567f"},"Tag:android-studio":{"__typename":"Tag","id":"android-studio","displayTitle":"Android Studio","normalizedTagSlug":"android-studio"},"Tag:live-templates":{"__typename":"Tag","id":"live-templates","displayTitle":"Live Templates","normalizedTagSlug":"live-templates"},"Tag:preview":{"__typename":"Tag","id":"preview","displayTitle":"Preview","normalizedTagSlug":"preview"},"Tag:mad-skills":{"__typename":"Tag","id":"mad-skills","displayTitle":"Mad Skills","normalizedTagSlug":"mad-skills"},"Post:42621bd8719b":{"__typename":"Post","id":"42621bd8719b","collection":{"__ref":"Collection:95b274b437c2"},"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"9836","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:134d860f440b_0"},{"__ref":"Paragraph:134d860f440b_1"},{"__ref":"Paragraph:134d860f440b_2"},{"__ref":"Paragraph:134d860f440b_3"},{"__ref":"Paragraph:134d860f440b_4"},{"__ref":"Paragraph:134d860f440b_5"},{"__ref":"Paragraph:134d860f440b_6"},{"__ref":"Paragraph:134d860f440b_7"},{"__ref":"Paragraph:134d860f440b_8"},{"__ref":"Paragraph:134d860f440b_9"},{"__ref":"Paragraph:134d860f440b_10"},{"__ref":"Paragraph:134d860f440b_11"},{"__ref":"Paragraph:134d860f440b_12"},{"__ref":"Paragraph:134d860f440b_13"},{"__ref":"Paragraph:134d860f440b_14"},{"__ref":"Paragraph:134d860f440b_15"},{"__ref":"Paragraph:134d860f440b_16"},{"__ref":"Paragraph:134d860f440b_17"},{"__ref":"Paragraph:134d860f440b_18"},{"__ref":"Paragraph:134d860f440b_19"},{"__ref":"Paragraph:134d860f440b_20"},{"__ref":"Paragraph:134d860f440b_21"},{"__ref":"Paragraph:134d860f440b_22"},{"__ref":"Paragraph:134d860f440b_23"},{"__ref":"Paragraph:134d860f440b_24"},{"__ref":"Paragraph:134d860f440b_25"},{"__ref":"Paragraph:134d860f440b_26"},{"__ref":"Paragraph:134d860f440b_27"},{"__ref":"Paragraph:134d860f440b_28"},{"__ref":"Paragraph:134d860f440b_29"},{"__ref":"Paragraph:134d860f440b_30"},{"__ref":"Paragraph:134d860f440b_31"},{"__ref":"Paragraph:134d860f440b_32"},{"__ref":"Paragraph:134d860f440b_33"},{"__ref":"Paragraph:134d860f440b_34"},{"__ref":"Paragraph:134d860f440b_35"},{"__ref":"Paragraph:134d860f440b_36"},{"__ref":"Paragraph:134d860f440b_37"},{"__ref":"Paragraph:134d860f440b_38"},{"__ref":"Paragraph:134d860f440b_39"},{"__ref":"Paragraph:134d860f440b_40"},{"__ref":"Paragraph:134d860f440b_41"},{"__ref":"Paragraph:134d860f440b_42"},{"__ref":"Paragraph:134d860f440b_43"},{"__ref":"Paragraph:134d860f440b_44"},{"__ref":"Paragraph:134d860f440b_45"},{"__ref":"Paragraph:134d860f440b_46"},{"__ref":"Paragraph:134d860f440b_47"},{"__ref":"Paragraph:134d860f440b_48"},{"__ref":"Paragraph:134d860f440b_49"},{"__ref":"Paragraph:134d860f440b_50"},{"__ref":"Paragraph:134d860f440b_51"},{"__ref":"Paragraph:134d860f440b_52"},{"__ref":"Paragraph:134d860f440b_53"},{"__ref":"Paragraph:134d860f440b_54"},{"__ref":"Paragraph:134d860f440b_55"},{"__ref":"Paragraph:134d860f440b_56"},{"__ref":"Paragraph:134d860f440b_57"},{"__ref":"Paragraph:134d860f440b_58"},{"__ref":"Paragraph:134d860f440b_59"},{"__ref":"Paragraph:134d860f440b_60"},{"__ref":"Paragraph:134d860f440b_61"},{"__ref":"Paragraph:134d860f440b_62"},{"__ref":"Paragraph:134d860f440b_63"},{"__ref":"Paragraph:134d860f440b_64"},{"__ref":"Paragraph:134d860f440b_65"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:5e0374fd3b15"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fmedium.com\u002Fandroiddevelopers\u002Fcompose-tooling-42621bd8719b","primaryTopic":{"__ref":"Topic:64756708407c"},"topics":[{"__typename":"Topic","slug":"android-development"}],"isPublished":true,"latestPublishedVersion":"134d860f440b","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":5},"clapCount":267,"allowResponses":true,"isLimitedState":false,"title":"Compose Tooling","isSeries":false,"sequence":null,"uniqueSlug":"compose-tooling-42621bd8719b","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1665176558575,"readingTime":6.089622641509433,"previewContent":{"__typename":"PreviewContent","subtitle":"Compose allows you to build beautiful UIs quickly. Together with the Android Studio tooling support, you’re able to accelerate the…"},"previewImage":{"__ref":"ImageMetadata:1*WVUBQsNgePqQxmrHjaID4g.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1665176558575,"updatedAt":1676333763096,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:42621bd8719b-viewerId:lo_6b6d7c93567f"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:android-studio"},{"__ref":"Tag:live-templates"},{"__ref":"Tag:preview"},{"__ref":"Tag:mad-skills"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":1203,"layerCake":3,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"EXPIRED"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.b2314f6d.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.24534aeb.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.d9108df7.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/4810.6318add7.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/2707.b0942613.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.5b3eb23a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.1ab63137.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5250.9f9e01d2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6349.b071a958.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.826a25fb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7079.67349d50.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3735.afb7e926.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.a2d9f6a1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.cd03f950.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.08de95de.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7346.72622eb9.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2420.2a5e2d95.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.ca7937c2.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.d195c6f1.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2106.21ff89d3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.3d049572.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2961.00a48598.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.c4082863.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4391.59acaed3.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.c8a11795.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.6565ad5f.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.a0afad8a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.36c2ecf4.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:'8e74cdab5bfc44b2',t:'MTczMjQwMzEyMS4wMDAwMDA='};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>