CINXE.COM

<!doctype html><html lang="en"><head><title data-rh="true">Jetpack Compose Custom Layout Made Easy | by Elye - A One Eye Dev By His Grace | Mobile App Development Publication | 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="2023-06-18T10:24:11.367Z"/><meta data-rh="true" name="title" content="Jetpack Compose Custom Layout Made Easy | by Elye - A One Eye Dev By His Grace | Mobile App Development Publication | Medium"/><meta data-rh="true" property="og:title" content="Jetpack Compose Custom Layout Made Easy"/><meta data-rh="true" property="al:android:url" content="medium://p/b5743f8cc82c"/><meta data-rh="true" property="al:ios:url" content="medium://p/b5743f8cc82c"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="Jetpack Compose provided us with simple components like Columns and Rows. What if we want something different from it? E.g. we want to have a Custom layout that automatically layout the provided…"/><meta data-rh="true" property="og:description" content="Make your own custom component other than what Google’s provided"/><meta data-rh="true" property="og:url" content="https://medium.com/mobile-app-development-publication/jetpack-compose-custom-layout-made-easy-b5743f8cc82c"/><meta data-rh="true" property="al:web:url" content="https://medium.com/mobile-app-development-publication/jetpack-compose-custom-layout-made-easy-b5743f8cc82c"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/da:true/resize:fit:1200/0*v07Y9cRhzQzLJM4i"/><meta data-rh="true" property="article:author" content="https://elye-project.medium.com"/><meta data-rh="true" name="author" content="Elye - A One Eye Dev By His Grace"/><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="Jetpack Compose Custom Layout Made Easy"/><meta data-rh="true" name="twitter:site" content="@elye_project"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/b5743f8cc82c"/><meta data-rh="true" property="twitter:description" content="Make your own custom component other than what Google’s provided"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/da:true/resize:fit:1200/0*v07Y9cRhzQzLJM4i"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:creator" content="@elye_project"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="4 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://elye-project.medium.com"/><link data-rh="true" rel="canonical" href="https://medium.com/mobile-app-development-publication/jetpack-compose-custom-layout-made-easy-b5743f8cc82c"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/b5743f8cc82c"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fda:true\u002Fresize:fit:1200\u002F0*v07Y9cRhzQzLJM4i"],"url":"https:\u002F\u002Fmedium.com\u002Fmobile-app-development-publication\u002Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c","dateCreated":"2023-06-18T10:19:02.817Z","datePublished":"2023-06-18T10:19:02.817Z","dateModified":"2023-06-18T11:26:39.193Z","headline":"Jetpack Compose Custom Layout Made Easy - Mobile App Development Publication - Medium","name":"Jetpack Compose Custom Layout Made Easy - Mobile App Development Publication - Medium","description":"Jetpack Compose provided us with simple components like Columns and Rows. What if we want something different from it? E.g. we want to have a Custom layout that automatically layout the provided…","identifier":"b5743f8cc82c","author":{"@type":"Person","name":"Elye - A One Eye Dev By His Grace","url":"https:\u002F\u002Felye-project.medium.com"},"creator":["Elye - A One Eye Dev By His Grace"],"publisher":{"@type":"Organization","name":"Mobile App Development Publication","url":"https:\u002F\u002Fmedium.com\u002Fmobile-app-development-publication","logo":{"@type":"ImageObject","width":272,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:544\u002F7*V1_7XP4snlmqrc_0Njontw.png"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Fmobile-app-development-publication\u002Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c","isAccessibleForFree":"False","hasPart":{"@type":"WebPageElement","isAccessibleForFree":"False","cssSelector":".meteredContent"}}</script><style type="text/css" data-fela-rehydration="587" 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="587" 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="587" 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(26, 137, 23, 1)}.es{border-color:rgba(26, 137, 23, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(26, 137, 23, 1)}.ez:disabled:hover{border-color:rgba(26, 137, 23, 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}.gs{gap:12px}.gt{margin-right:4px}.gu{margin-top:2px}.gv{box-sizing:content-box}.gw{word-break:break-word}.gx{word-wrap:break-word}.gy:after{display:block}.gz:after{content:""}.ha:after{clear:both}.hb{line-height:18px}.hc{letter-spacing:0.077em}.hd{font-style:normal}.hj{margin-bottom:-0.31em}.hk{text-transform:uppercase}.hl{line-height:1.23}.hm{letter-spacing:0}.hn{font-weight:700}.id{margin-top:12px}.ie{margin-bottom:-0.27em}.if{line-height:1.394}.ja{align-items:baseline}.jb{width:48px}.jc{height:48px}.jd{border:2px solid rgba(255, 255, 255, 1)}.je{z-index:0}.jf{box-shadow:none}.jg{border:1px solid rgba(0, 0, 0, 0.05)}.jh{margin-left:-12px}.ji{width:28px}.jj{height:28px}.jk{z-index:1}.jl{width:24px}.jm{margin-bottom:2px}.jn{flex-wrap:nowrap}.jo{font-size:16px}.jp{line-height:24px}.jr{margin:0 8px}.js{display:inline}.jt{color:rgba(26, 137, 23, 1)}.ju{fill:rgba(26, 137, 23, 1)}.jx{flex:0 0 auto}.ka{flex-wrap:wrap}.kd{white-space:pre-wrap}.ke{overflow:hidden}.kf{max-height:20px}.kg{text-overflow:ellipsis}.kh{display:-webkit-box}.ki{-webkit-line-clamp:1}.kj{-webkit-box-orient:vertical}.kk{word-break:break-all}.km{padding-left:8px}.kn{padding-right:8px}.lo> *{flex-shrink:0}.lp{overflow-x:scroll}.lq::-webkit-scrollbar{display:none}.lr{scrollbar-width:none}.ls{-ms-overflow-style:none}.lt{width:74px}.lu{flex-direction:row}.lv{z-index:2}.ly{-webkit-user-select:none}.lz{border:0}.ma{fill:rgba(117, 117, 117, 1)}.md{outline:0}.me{user-select:none}.mf> svg{pointer-events:none}.mo{cursor:progress}.mp{margin-left:4px}.mq{margin-top:0px}.mr{opacity:1}.ms{padding:4px 0}.mv{width:16px}.mx{display:inline-flex}.nd{max-width:100%}.ne{padding:8px 2px}.nf svg{color:#6B6B6B}.nw{margin-left:auto}.nx{margin-right:auto}.ny{max-width:3984px}.oe{clear:both}.og{cursor:zoom-in}.oh{z-index:auto}.oj{height:auto}.ok{margin-top:10px}.ol{max-width:728px}.oo{text-decoration:underline}.op{line-height:1.58}.oq{letter-spacing:-0.004em}.or{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.pk{margin-bottom:-0.46em}.pl{clear:left}.pm{float:left}.pn{font-size:66px}.po{line-height:.83}.pu{font-style:italic}.pv{overflow-x:auto}.pw{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.px{padding:32px}.py{border:1px solid #E5E5E5}.pz{line-height:1.4}.qa{letter-spacing:-0.022em}.qb{margin-top:-0.2em}.qc{margin-bottom:-0.2em}.qd{white-space:pre}.qe{min-width:fit-content}.qf{max-width:356px}.qg{line-height:1.12}.qh{font-weight:600}.ra{margin-bottom:-0.28em}.rg{padding:2px 4px}.rh{font-size:75%}.ri> strong{font-family:inherit}.rj{border-top:none}.rk{margin-bottom:14px}.rl{height:52px}.rm{max-height:52px}.rn{position:static}.rp{max-width:155px}.rv{margin-right:20px}.sb{height:0px}.sc{margin-bottom:40px}.sd{margin-bottom:48px}.sr{border-radius:2px}.st{height:64px}.su{width:64px}.sv{align-self:flex-end}.sw{flex:1 1 auto}.tc{padding-right:4px}.td{font-weight:500}.tq{margin-top:8px}.tr{margin-top:16px}.ts{color:rgba(255, 255, 255, 1)}.tt{padding:8px 16px}.tu{fill:rgba(255, 255, 255, 1)}.tv{background:rgba(25, 25, 25, 1)}.tw{border-color:rgba(25, 25, 25, 1)}.tz:disabled{opacity:0.1}.ua:disabled:hover{background:rgba(25, 25, 25, 1)}.ub:disabled:hover{border-color:rgba(25, 25, 25, 1)}.uk{gap:18px}.ul{fill:rgba(61, 61, 61, 1)}.un{padding-bottom:6px}.uo{border-bottom:1px solid #F2F2F2}.uu{margin-top:32px}.uv{fill:#242424}.uw{background:0}.ux{border-color:#242424}.uy:disabled:hover{color:#242424}.uz:disabled:hover{fill:#242424}.va:disabled:hover{border-color:#242424}.vl{border-bottom:solid 1px #E5E5E5}.vm{margin-top:72px}.vn{padding:24px 0}.vo{margin-bottom:0px}.vp{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(15, 115, 12, 1)}.eu:hover{border-color:rgba(15, 115, 12, 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)}.jq:hover{text-decoration:underline}.jv:hover:not(:disabled){color:rgba(15, 115, 12, 1)}.jw:hover:not(:disabled){fill:rgba(15, 115, 12, 1)}.mc:hover{fill:rgba(8, 8, 8, 1)}.mt:hover{fill:#000000}.mu:hover p{color:#000000}.mw:hover{color:#000000}.ng:hover svg{color:#000000}.ss:hover{background-color:none}.tx:hover{background:#000000}.ty:hover{border-color:#242424}.um:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.mb:focus{fill:rgba(8, 8, 8, 1)}.nh:focus svg{color:#000000}.oi:focus{transform:scale(1.01)}.mg:active{border-style:none}</style><style type="text/css" data-fela-rehydration="587" 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}.gr{margin-top:40px}.hi{margin-top:16px}.ia{font-size:42px}.ib{line-height:52px}.ic{letter-spacing:-0.011em}.is{font-size:22px}.it{margin-top:0.92em}.iu{line-height:28px}.iz{align-items:center}.la{border-top:solid 1px #F2F2F2}.lb{border-bottom:solid 1px #F2F2F2}.lc{margin:32px 0 0}.ld{padding:3px 8px}.lm> *{margin-right:24px}.ln> :last-child{margin-right:0}.mn{margin-top:0px}.nc{margin:0}.od{margin-top:56px}.pg{font-size:20px}.ph{margin-top:2.14em}.pi{line-height:32px}.pj{letter-spacing:-0.003em}.pt{padding-top:7px}.qw{font-size:24px}.qx{margin-top:1.95em}.qy{line-height:30px}.qz{letter-spacing:-0.016em}.rf{margin-top:0.94em}.ru{display:inline-block}.sa{margin-bottom:104px}.se{flex-direction:row}.sh{margin-bottom:0}.si{margin-right:20px}.sx{max-width:500px}.to{line-height:24px}.tp{letter-spacing:0}.ug{margin-bottom:88px}.uj{margin-bottom:72px}.ut{margin:40px 0 16px}.vf{width:min-width}.vk{padding-top:72px}</style><style type="text/css" data-fela-rehydration="587" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.mm{margin-top:0px}.om{margin-left:auto}.on{text-align:center}.rt{display:inline-block}</style><style type="text/css" data-fela-rehydration="587" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.ml{margin-top:0px}.rs{display:inline-block}</style><style type="text/css" data-fela-rehydration="587" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.mj{margin-top:0px}.mk{margin-right:0px}.rr{display:inline-block}</style><style type="text/css" data-fela-rehydration="587" 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}.gn{margin-top:32px}.he{margin-top:8px}.ho{font-size:32px}.hp{line-height:38px}.hq{letter-spacing:-0.014em}.ig{font-size:18px}.ih{margin-top:0.79em}.ii{line-height:24px}.iv{align-items:flex-start}.jy{flex-direction:column}.kb{margin-bottom:2px}.ko{margin:24px -24px 0}.kp{padding:0}.le> *{margin-right:8px}.lf> :last-child{margin-right:24px}.lw{margin-left:0px}.mh{margin-top:0px}.mi{margin-right:0px}.my{margin:0}.ni{border:1px solid #F2F2F2}.nj{border-radius:99em}.nk{padding:0px 16px 0px 12px}.nl{height:38px}.nm{align-items:center}.no svg{margin-right:8px}.nz{margin-top:40px}.os{margin-top:1.56em}.ot{line-height:28px}.ou{letter-spacing:-0.003em}.pp{padding-top:0}.qi{font-size:20px}.qj{margin-top:1.2em}.qk{letter-spacing:0}.rb{margin-top:0.67em}.rq{display:inline-block}.rw{margin-bottom:96px}.sp{margin-bottom:20px}.sq{margin-right:0}.tb{max-width:100%}.te{font-size:24px}.tf{line-height:30px}.tg{letter-spacing:-0.016em}.uc{margin-bottom:64px}.up{margin:32px 0 16px}.vb{width:100%}.vg{padding-top:48px}.nn:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="587" 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}.gq{margin-top:40px}.hh{margin-top:16px}.hx{font-size:42px}.hy{line-height:52px}.hz{letter-spacing:-0.011em}.ip{font-size:22px}.iq{margin-top:0.92em}.ir{line-height:28px}.iy{align-items:center}.kw{border-top:solid 1px #F2F2F2}.kx{border-bottom:solid 1px #F2F2F2}.ky{margin:32px 0 0}.kz{padding:3px 8px}.lk> *{margin-right:24px}.ll> :last-child{margin-right:0}.nb{margin:0}.oc{margin-top:56px}.pc{font-size:20px}.pd{margin-top:2.14em}.pe{line-height:32px}.pf{letter-spacing:-0.003em}.ps{padding-top:7px}.qs{font-size:24px}.qt{margin-top:1.95em}.qu{line-height:30px}.qv{letter-spacing:-0.016em}.re{margin-top:0.94em}.rz{margin-bottom:104px}.sf{flex-direction:row}.sj{margin-bottom:0}.sk{margin-right:20px}.sy{max-width:500px}.tm{line-height:24px}.tn{letter-spacing:0}.uf{margin-bottom:88px}.ui{margin-bottom:72px}.us{margin:40px 0 16px}.ve{width:min-width}.vj{padding-top:72px}</style><style type="text/css" data-fela-rehydration="587" 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}.gp{margin-top:40px}.hg{margin-top:16px}.hu{font-size:42px}.hv{line-height:52px}.hw{letter-spacing:-0.011em}.im{font-size:22px}.in{margin-top:0.92em}.io{line-height:28px}.ix{align-items:center}.ks{border-top:solid 1px #F2F2F2}.kt{border-bottom:solid 1px #F2F2F2}.ku{margin:32px 0 0}.kv{padding:3px 8px}.li> *{margin-right:24px}.lj> :last-child{margin-right:0}.na{margin:0}.ob{margin-top:56px}.oy{font-size:20px}.oz{margin-top:2.14em}.pa{line-height:32px}.pb{letter-spacing:-0.003em}.pr{padding-top:7px}.qo{font-size:24px}.qp{margin-top:1.95em}.qq{line-height:30px}.qr{letter-spacing:-0.016em}.rd{margin-top:0.94em}.ry{margin-bottom:104px}.sg{flex-direction:row}.sl{margin-bottom:0}.sm{margin-right:20px}.sz{max-width:500px}.tk{line-height:24px}.tl{letter-spacing:0}.ue{margin-bottom:88px}.uh{margin-bottom:72px}.ur{margin:40px 0 16px}.vd{width:min-width}.vi{padding-top:72px}</style><style type="text/css" data-fela-rehydration="587" 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}.go{margin-top:32px}.hf{margin-top:8px}.hr{font-size:32px}.hs{line-height:38px}.ht{letter-spacing:-0.014em}.ij{font-size:18px}.ik{margin-top:0.79em}.il{line-height:24px}.iw{align-items:flex-start}.jz{flex-direction:column}.kc{margin-bottom:2px}.kq{margin:24px 0 0}.kr{padding:0}.lg> *{margin-right:8px}.lh> :last-child{margin-right:8px}.lx{margin-left:0px}.mz{margin:0}.np{border:1px solid #F2F2F2}.nq{border-radius:99em}.nr{padding:0px 16px 0px 12px}.ns{height:38px}.nt{align-items:center}.nv svg{margin-right:8px}.oa{margin-top:40px}.ov{margin-top:1.56em}.ow{line-height:28px}.ox{letter-spacing:-0.003em}.pq{padding-top:0}.ql{font-size:20px}.qm{margin-top:1.2em}.qn{letter-spacing:0}.rc{margin-top:0.67em}.rx{margin-bottom:96px}.sn{margin-bottom:20px}.so{margin-right:0}.ta{max-width:100%}.th{font-size:24px}.ti{line-height:30px}.tj{letter-spacing:-0.016em}.ud{margin-bottom:64px}.uq{margin:32px 0 16px}.vc{width:100%}.vh{padding-top:48px}.nu:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="587" data-fela-type="RULE" media="print">.ro{display:none}</style><style type="text/css" data-fela-rehydration="587" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.kl{max-height:none}</style><style type="text/css" data-fela-rehydration="587" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.of{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</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%2Fb5743f8cc82c&%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%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&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%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&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 class="meteredContent"><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div><div class="speechify-ignore l"><div class="gn go gp gq gr l"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="cl ab gs"><div class="gv ab"><div class="bm" aria-hidden="false"><button class="l ay ao am" aria-label="Member-only story"><div class="h k j i d"><div><div class="bm" aria-hidden="false"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 64 64"><path fill="#FFC017" d="m39.637 40.831-5.771 15.871a1.99 1.99 0 0 1-3.732 0l-5.771-15.87a2.02 2.02 0 0 0-1.194-1.195L7.298 33.866a1.99 1.99 0 0 1 0-3.732l15.87-5.771a2.02 2.02 0 0 0 1.195-1.194l5.771-15.871a1.99 1.99 0 0 1 3.732 0l5.771 15.87a2.02 2.02 0 0 0 1.194 1.195l15.871 5.771a1.99 1.99 0 0 1 0 3.732l-15.87 5.771a2.02 2.02 0 0 0-1.195 1.194"></path></svg></div></div></div><div class="s u w fg fh q"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 64 64" class="gt gu"><path fill="#FFC017" d="m39.637 40.831-5.771 15.871a1.99 1.99 0 0 1-3.732 0l-5.771-15.87a2.02 2.02 0 0 0-1.194-1.195L7.298 33.866a1.99 1.99 0 0 1 0-3.732l15.87-5.771a2.02 2.02 0 0 0 1.195-1.194l5.771-15.871a1.99 1.99 0 0 1 3.732 0l5.771 15.87a2.02 2.02 0 0 0 1.194 1.195l15.871 5.771a1.99 1.99 0 0 1 0 3.732l-15.87 5.771a2.02 2.02 0 0 0-1.195 1.194"></path></svg><p class="bf b bg z du">Member-only story</p></div></button></div></div></div></div></div></div></div><div class="gw gx gy gz ha"><div class="ab cb"><div class="ci bh fz ga gb gc"><h2 id="eee8" class="hb hc hd bf b dv he hf hg hh hi hj du hk" aria-label="kicker paragraph">Learn Jetpack Compose</h2><div><h1 id="b212" class="pw-post-title hl hm hd bf hn ho hp hq hr hs ht hu hv hw hx hy hz ia ib ic id ie bk" data-testid="storyTitle">Jetpack Compose Custom Layout Made Easy</h1></div><div><h2 id="89ac" class="pw-subtitle-paragraph if hm hd bf b ig ih ii ij ik il im in io ip iq ir is it iu cq du">Make your own custom component other than what Google’s provided</h2><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="iv iw ix iy iz ab"><div><div class="ab ja"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@elye-project?source=post_page---byline--b5743f8cc82c--------------------------------"><div class="l jb jc by jd je"><div class="l fj"><img alt="Elye - A One Eye Dev By His Grace" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/1*0wVPGGR_3FMoPVGzT4nbTw.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="jf by l dd de fs n jg ft"></div></div></div></a></div></div><div class="jh ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/mobile-app-development-publication?source=post_page---byline--b5743f8cc82c--------------------------------" rel="noopener follow"><div class="l ji jj by jd jk"><div class="l fj"><img alt="Mobile App Development Publication" class="l fd by br jl cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*r5bO5bEjNCKLt6fKZbPdCA.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="jf by l br jl fs n jg 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="jm ab q"><div class="ab q jn"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b jo jp bk"><a class="af ag ah ai aj ak al am an ao ap aq ar jq" data-testid="authorName" rel="noopener follow" href="/@elye-project?source=post_page---byline--b5743f8cc82c--------------------------------">Elye - A One Eye Dev By His Grace</a></p></div></div></div><span class="jr js" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b jo jp du"><span><a class="jt ju ah ai aj ak al am an ao ap aq ar ex jv jw" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F5742b4fcf89e&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&user=Elye+-+A+One+Eye+Dev+By+His+Grace&userId=5742b4fcf89e&source=post_page-5742b4fcf89e--byline--b5743f8cc82c---------------------post_header-----------">Follow</a></span></p></div></div></span></div></div><div class="l jx"><span class="bf b bg z du"><div class="ab cn jy jz ka"><div class="kb kc ab"><div class="bf b bg z du ab kd"><span class="gt l jx">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 jq ab q" data-testid="publicationName" href="https://medium.com/mobile-app-development-publication?source=post_page---byline--b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b bg z ke kf kg kh ki kj kk kl bk">Mobile App Development Publication</p></a></div></div></div><div class="h k"><span class="jr js" 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">4 min read</span><div class="km kn l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Jun 18, 2023</span></div></span></div></span></div></div></div><div class="ab cp ko kp kq kr ks kt ku kv kw kx ky kz la lb lc ld"><div class="h k w fg fh q"><div class="lt l"><div class="ab q lu lv"><div class="pw-multi-vote-icon fj gt lw lx ly"><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%2Fmobile-app-development-publication%2Fb5743f8cc82c&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&user=Elye+-+A+One+Eye+Dev+By+His+Grace&userId=5742b4fcf89e&source=---header_actions--b5743f8cc82c---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lz ao ma mb mc md am me mf mg ly"><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 mh mi mj mk ml mm mn"><p class="bf b dv z du"><span class="mo">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao lz mr ms ab q fk mt mu" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mq"><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 mp mq">3</span></p></button></div></div></div><div class="ab q le lf lg lh li lj lk ll lm ln lo lp lq lr ls"><div class="mv 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%2Fb5743f8cc82c&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&source=---header_actions--b5743f8cc82c---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mw" 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 mx cn"><div class="l ae"><div class="ab cb"><div class="my mz na nb nc nd ci bh"><div class="ab"></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 ne an ao ap ex nf ng mu nh ni nj nk nl s nm nn no np nq nr ns u nt nu nv"><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><figure class="nz oa ob oc od oe nw nx paragraph-image"><div role="button" tabindex="0" class="of og fj oh bh oi"><div class="nw nx ny"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/0*v07Y9cRhzQzLJM4i 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*v07Y9cRhzQzLJM4i 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*v07Y9cRhzQzLJM4i 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*v07Y9cRhzQzLJM4i 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*v07Y9cRhzQzLJM4i 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*v07Y9cRhzQzLJM4i 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*v07Y9cRhzQzLJM4i 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/0*v07Y9cRhzQzLJM4i 640w, https://miro.medium.com/v2/resize:fit:720/0*v07Y9cRhzQzLJM4i 720w, https://miro.medium.com/v2/resize:fit:750/0*v07Y9cRhzQzLJM4i 750w, https://miro.medium.com/v2/resize:fit:786/0*v07Y9cRhzQzLJM4i 786w, https://miro.medium.com/v2/resize:fit:828/0*v07Y9cRhzQzLJM4i 828w, https://miro.medium.com/v2/resize:fit:1100/0*v07Y9cRhzQzLJM4i 1100w, https://miro.medium.com/v2/resize:fit:1400/0*v07Y9cRhzQzLJM4i 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 nd oj c" width="700" height="700" loading="lazy" role="presentation"/></picture></div></div><figcaption class="ok ff ol nw nx om on bf b bg z du">Photo by <a class="af oo" href="https://unsplash.com/@marcusurbenz?utm_source=medium&utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Marcus Urbenz</a> on <a class="af oo" href="https://unsplash.com/?utm_source=medium&utm_medium=referral" rel="noopener ugc nofollow" target="_blank">Unsplash</a></figcaption></figure><p id="0396" class="pw-post-body-paragraph op oq hd or b ig os ot ou ij ov ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk gw bk pl"><span class="l pm pn po bo pp pq pr ps pt fj">J</span>etpack Compose provided us with simple components like <em class="pu">Columns</em> and <em class="pu">Rows</em>. What if we want something different from it?</p><p id="6c15" class="pw-post-body-paragraph op oq hd or b ig os ot ou ij ov ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk gw bk">E.g. we want to have a Custom layout that automatically layout the provided components in a sorted manner. Sample calling code as below</p><pre class="nz oa ob oc od pv pw px bp py bb bk"><span id="634c" class="pz qa hd pw b bg qb qc l qd qe">CustomLayout(Modifier.size(150.dp).border(1.dp, Color.Green)) {<br/> Text("Hello There")<br/> Text("Good")<br/> Text("Longer please")<br/> Text("More Text")<br/> Box(Modifier.height(10.dp).width(100.dp).background(Color.Cyan))<br/> Box(Modifier.height(10.dp).width(10.dp).background(Color.Red))<br/> Box(Modifier.height(10.dp).width(50.dp).background(Color.Magenta))<br/>}</span></pre><p id="af01" class="pw-post-body-paragraph op oq hd or b ig os ot ou ij ov ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk gw bk">The results are as follows</p><figure class="nz oa ob oc od oe nw nx paragraph-image"><div class="nw nx qf"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*MfSdTUUHjCr0p5I7MyckJA.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*MfSdTUUHjCr0p5I7MyckJA.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*MfSdTUUHjCr0p5I7MyckJA.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*MfSdTUUHjCr0p5I7MyckJA.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*MfSdTUUHjCr0p5I7MyckJA.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*MfSdTUUHjCr0p5I7MyckJA.png 1100w, https://miro.medium.com/v2/resize:fit:712/format:webp/1*MfSdTUUHjCr0p5I7MyckJA.png 712w" 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, 356px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*MfSdTUUHjCr0p5I7MyckJA.png 640w, https://miro.medium.com/v2/resize:fit:720/1*MfSdTUUHjCr0p5I7MyckJA.png 720w, https://miro.medium.com/v2/resize:fit:750/1*MfSdTUUHjCr0p5I7MyckJA.png 750w, https://miro.medium.com/v2/resize:fit:786/1*MfSdTUUHjCr0p5I7MyckJA.png 786w, https://miro.medium.com/v2/resize:fit:828/1*MfSdTUUHjCr0p5I7MyckJA.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*MfSdTUUHjCr0p5I7MyckJA.png 1100w, https://miro.medium.com/v2/resize:fit:712/1*MfSdTUUHjCr0p5I7MyckJA.png 712w" 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, 356px"/><img alt="" class="bh nd oj c" width="356" height="352" loading="lazy" role="presentation"/></picture></div></figure><p id="14da" class="pw-post-body-paragraph op oq hd or b ig os ot ou ij ov ow ox oy oz pa pb pc pd pe pf pg ph pi pj pk gw bk">How can we do it?</p><h1 id="cdbe" class="qg qa hd bf qh qi qj ii qk ql qm il qn qo qp qq qr qs qt qu qv qw qx qy qz ra bk">Use Layout</h1><p id="8017" class="pw-post-body-paragraph op oq hd or b ig rb ot ou ij rc ow ox oy rd pa pb pc re pe pf pg rf pi pj pk gw bk">If we look at probably the simplest composable component, <code class="cx rg rh ri pw b">Box</code>, we can see underneath, it is just using the <code class="cx rg rh ri pw b">Layout</code> component.</p><pre class="nz oa ob oc od pv pw px bp py bb bk"><span id="e4a3" class="pz qa hd pw b bg qb qc l qd qe">@Composable<br/>inline fun Box(<br/> modifier: Modifier = Modifier…</span></pre></div></div></div></div></section></div></div></article></div><div class="l"></div><footer class="rj rk rl rm gv ab q rn jk c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp ro"><div class="ab q lu"><div class="rp l"><span class="l rq rr rs e d"><div class="ab q lu lv"><div class="pw-multi-vote-icon fj gt lw lx ly"><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%2Fmobile-app-development-publication%2Fb5743f8cc82c&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&user=Elye+-+A+One+Eye+Dev+By+His+Grace&userId=5742b4fcf89e&source=---footer_actions--b5743f8cc82c---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lz ao ma mb mc md am me mf mg ly"><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 mh mi mj mk ml mm mn"><p class="bf b dv z du"><span class="mo">--</span></p></div></div></span><span class="l h g f rt ru"><div class="ab q lu lv"><div class="pw-multi-vote-icon fj gt lw lx ly"><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%2Fmobile-app-development-publication%2Fb5743f8cc82c&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&user=Elye+-+A+One+Eye+Dev+By+His+Grace&userId=5742b4fcf89e&source=---footer_actions--b5743f8cc82c---------------------clap_footer-----------"><div><div class="bm" aria-hidden="false"><div class="lz ao ma mb mc md am me mf mg ly"><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 mh mi mj mk ml mm mn"><p class="bf b dv z du"><span class="mo">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao lz mr ms ab q fk mt mu" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="mq"><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 mp mq">3</span></p></button></div></div></div></div><div class="ab q"><div class="rv l jx"><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%2Fb5743f8cc82c&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fmobile-app-development-publication%2Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c&source=---footer_actions--b5743f8cc82c---------------------bookmark_footer-----------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du mw" 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="rv l jx"><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 ne an ao ap ex nf ng mu nh"><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="rw rx ry rz sa l"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="sb bh r sc"></div><div class="sd l"><div class="ab se sf sg jz jy"><div class="sh si sj sk sl sm sn so sp sq ab cp"><div class="h k"><a href="https://medium.com/mobile-app-development-publication?source=post_page---post_publication_info--b5743f8cc82c--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Mobile App Development Publication" class="sr jb jc cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*r5bO5bEjNCKLt6fKZbPdCA.png" width="48" height="48" loading="lazy"/><div class="sr l jc jb fs n fr ss"></div></div></a></div><div class="j i d"><a href="https://medium.com/mobile-app-development-publication?source=post_page---post_publication_info--b5743f8cc82c--------------------------------" rel="noopener follow"><div class="fj ab"><img alt="Mobile App Development Publication" class="sr su st cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*r5bO5bEjNCKLt6fKZbPdCA.png" width="64" height="64" loading="lazy"/><div class="sr l st su fs n fr ss"></div></div></a></div><div class="j i d sv jx"><div class="ab"></div></div></div><div class="ab co sw"><div class="sx sy sz ta tb l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/mobile-app-development-publication?source=post_page---post_publication_info--b5743f8cc82c--------------------------------" rel="noopener follow"><h2 class="pw-author-name bf td te tf tg th ti tj oy tk tl pc tm tn pg to tp bk"><span class="gw tc">Published in Mobile App Development Publication</span></h2></a><div class="tq ab ja"><div class="l jx"><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 jq" rel="noopener follow" href="/mobile-app-development-publication/followers?source=post_page---post_publication_info--b5743f8cc82c--------------------------------">3.6K Followers</a></span></div><div class="bf b bg z du ab kd"><span class="jr 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 jq" rel="noopener follow" href="/mobile-app-development-publication/custom-android-push-notification-use-case-cloning-grab-live-tracking-notification-c4975bd00621?source=post_page---post_publication_info--b5743f8cc82c--------------------------------">Last published <span>Nov 22, 2024</span></a></div></div><div class="tr l"><p class="bf b bg z bk"><span class="gw">Sharing iOS, Android and relevant Mobile App Development Technology and Learning</span></p></div></div></div><div class="h k"><div class="ab"></div></div></div></div><div class="ab se sf sg jz jy"><div class="sh si sj sk sl sm sn so sp sq ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@elye-project?source=post_page---post_author_info--b5743f8cc82c--------------------------------"><div class="l fj"><img alt="Elye - A One Eye Dev By His Grace" class="l fd by jc jb cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*0wVPGGR_3FMoPVGzT4nbTw.png" width="48" height="48" loading="lazy"/><div class="fr by l jc jb fs n ay ss"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@elye-project?source=post_page---post_author_info--b5743f8cc82c--------------------------------"><div class="l fj"><img alt="Elye - A One Eye Dev By His Grace" class="l fd by st su cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*0wVPGGR_3FMoPVGzT4nbTw.png" width="64" height="64" loading="lazy"/><div class="fr by l st su fs n ay ss"></div></div></a></div><div class="j i d sv jx"><div class="ab"><span><button class="bf b bg z ts tt tu tv tw tx ty ev ew tz ua ub fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co sw"><div class="sx sy sz ta tb l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@elye-project?source=post_page---post_author_info--b5743f8cc82c--------------------------------"><h2 class="pw-author-name bf td te tf tg th ti tj oy tk tl pc tm tn pg to tp bk"><span class="gw tc">Written by Elye - A One Eye Dev By His Grace</span></h2></a><div class="tq ab ja"><div class="l jx"><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 jq" rel="noopener follow" href="/@elye-project/followers?source=post_page---post_author_info--b5743f8cc82c--------------------------------">68K Followers</a></span></div><div class="bf b bg z du ab kd"><span class="jr 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 jq" rel="noopener follow" href="/@elye-project/following?source=post_page---post_author_info--b5743f8cc82c--------------------------------">270 Following</a></div></div><div class="tr l"><p class="bf b bg z bk"><span class="gw">Sharing Software Learning, Life and Faith Journey</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z ts tt tu tv tw tx ty ev ew tz ua ub fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div><div class="uc ud ue uf ug l"><div class="sb bh r uc ud uh ui uj"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf td qi ii qk ql il qn qo qq qr qs qu qv qw qy qz bk">Responses (3)</h2><div class="ab uk"><div><div class="bm" aria-hidden="false"><a class="ul um" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--b5743f8cc82c--------------------------------" 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="un uo up uq ur us ut l"></div><div class="uu l"><button class="bf b bg z bk tt uv uw ux mw mt ty ev ew ex uy uz va fa vb vc vd ve vf fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="vg vh vi vj vk l bx"><div class="h k j"><div class="sb bh vl vm"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="vn ab lu ka"><div class="vo vp 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-----b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------"><p class="bf b dv z du">About</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="vo vp 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-----b5743f8cc82c--------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="vo 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-----b5743f8cc82c--------------------------------"><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-20241216-164309-0d4958d8a6"</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-b5743f8cc82c","user-5742b4fcf89e","collection-f9c208bdbb09"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"lohpSummerUpsellEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":false,"isSafari":false,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"ed1314da-0c8a-4d04-ba1e-9a90b72549e5","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-93fcb210ad41b8d1ef7fb5fa87b090d9-2aa953f2de0f5f56-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Fmobile-app-development-publication\u002Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c","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-20241216-164309-0d4958d8a6","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-20241216-164309-0d4958d8a6","commit":"0d4958d8a6e728d0bc7ba6245eaad002411a6eb7"}},"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\":\"mobile-app-development-publication\"})":{"__ref":"Collection:f9c208bdbb09"},"postResult({\"id\":\"b5743f8cc82c\"})":{"__ref":"Post:b5743f8cc82c"}},"ImageMetadata:":{"__typename":"ImageMetadata","id":""},"Collection:f9c208bdbb09":{"__typename":"Collection","id":"f9c208bdbb09","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFFFFFFF","point":0},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.1},{"__typename":"ColorPoint","color":"#FFE8F3E8","point":0.2},{"__typename":"ColorPoint","color":"#FFD1E7D1","point":0.6},{"__typename":"ColorPoint","color":"#FFA3D0A2","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF1A8917","point":0},{"__typename":"ColorPoint","color":"#FF11800E","point":0.1},{"__typename":"ColorPoint","color":"#FF0F730C","point":0.2},{"__typename":"ColorPoint","color":"#FF095407","point":1}]},"tintBackgroundSpectrum":null},"domain":null,"slug":"mobile-app-development-publication","googleAnalyticsId":null,"name":"Mobile App Development Publication","subscriberCount":3640,"description":"Sharing iOS, Android and relevant Mobile App Development Technology and Learning","avatar":{"__ref":"ImageMetadata:1*r5bO5bEjNCKLt6fKZbPdCA.png"},"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:c4975bd00621"}]},"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:f9c208bdbb09-viewerId:lo_fe4d9ff90705"},"twitterUsername":"elye_project","facebookPageId":null,"logo":{"__ref":"ImageMetadata:1*MdMgVRTnupYGv9gYoKASQQ.png"}},"ImageMetadata:1*r5bO5bEjNCKLt6fKZbPdCA.png":{"__typename":"ImageMetadata","id":"1*r5bO5bEjNCKLt6fKZbPdCA.png"},"User:7b8cf0bd846":{"__typename":"User","id":"7b8cf0bd846","customDomainState":null,"hasSubdomain":false,"username":"adiandrea"},"Post:c4975bd00621":{"__typename":"Post","id":"c4975bd00621","firstPublishedAt":1732250947785,"creator":{"__ref":"User:7b8cf0bd846"},"collection":{"__ref":"Collection:f9c208bdbb09"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Fmobile-app-development-publication\u002Fcustom-android-push-notification-use-case-cloning-grab-live-tracking-notification-c4975bd00621","sequence":null,"uniqueSlug":"custom-android-push-notification-use-case-cloning-grab-live-tracking-notification-c4975bd00621"},"LinkedAccounts:5742b4fcf89e":{"__typename":"LinkedAccounts","mastodon":null,"id":"5742b4fcf89e"},"User:5742b4fcf89e":{"__typename":"User","id":"5742b4fcf89e","linkedAccounts":{"__ref":"LinkedAccounts:5742b4fcf89e"},"isSuspended":false,"name":"Elye - A One Eye Dev By His Grace","imageId":"1*0wVPGGR_3FMoPVGzT4nbTw.png","customDomainState":{"__typename":"CustomDomainState","live":{"__typename":"CustomDomain","domain":"elye-project.medium.com"}},"hasSubdomain":true,"username":"elye-project","verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":68015,"followingCount":230,"collectionFollowingCount":40},"bio":"Sharing Software Learning, Life and Faith Journey","membership":null,"allowNotes":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:5742b4fcf89e-viewerId:lo_fe4d9ff90705"},"twitterScreenName":"elye_project"},"Paragraph:1265422638b6_0":{"__typename":"Paragraph","id":"1265422638b6_0","name":"eee8","type":"H4","href":null,"layout":null,"metadata":null,"text":"Learn Jetpack Compose","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_1":{"__typename":"Paragraph","id":"1265422638b6_1","name":"b212","type":"H3","href":null,"layout":null,"metadata":null,"text":"Jetpack Compose Custom Layout Made Easy","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_2":{"__typename":"Paragraph","id":"1265422638b6_2","name":"89ac","type":"H4","href":null,"layout":null,"metadata":null,"text":"Make your own custom component other than what Google’s provided","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:0*v07Y9cRhzQzLJM4i":{"__typename":"ImageMetadata","id":"0*v07Y9cRhzQzLJM4i","originalHeight":3984,"originalWidth":3984,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:1265422638b6_3":{"__typename":"Paragraph","id":"1265422638b6_3","name":"5c13","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:0*v07Y9cRhzQzLJM4i"},"text":"Photo by Marcus Urbenz on Unsplash","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":9,"end":22,"href":"https:\u002F\u002Funsplash.com\u002F@marcusurbenz?utm_source=medium&utm_medium=referral","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":26,"end":34,"href":"https:\u002F\u002Funsplash.com?utm_source=medium&utm_medium=referral","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_4":{"__typename":"Paragraph","id":"1265422638b6_4","name":"0396","type":"P","href":null,"layout":null,"metadata":null,"text":"Jetpack Compose provided us with simple components like Columns and Rows. What if we want something different from it?","hasDropCap":true,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"EM","start":56,"end":63,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":68,"end":72,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_5":{"__typename":"Paragraph","id":"1265422638b6_5","name":"6c15","type":"P","href":null,"layout":null,"metadata":null,"text":"E.g. we want to have a Custom layout that automatically layout the provided components in a sorted manner. Sample calling code as below","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_6":{"__typename":"Paragraph","id":"1265422638b6_6","name":"634c","type":"PRE","href":null,"layout":null,"metadata":null,"text":"CustomLayout(Modifier.size(150.dp).border(1.dp, Color.Green)) {\n Text(\"Hello There\")\n Text(\"Good\")\n Text(\"Longer please\")\n Text(\"More Text\")\n Box(Modifier.height(10.dp).width(100.dp).background(Color.Cyan))\n Box(Modifier.height(10.dp).width(10.dp).background(Color.Red))\n Box(Modifier.height(10.dp).width(50.dp).background(Color.Magenta))\n}","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"EXPLICIT","lang":"kotlin"},"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_7":{"__typename":"Paragraph","id":"1265422638b6_7","name":"af01","type":"P","href":null,"layout":null,"metadata":null,"text":"The results are as follows","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*MfSdTUUHjCr0p5I7MyckJA.png":{"__typename":"ImageMetadata","id":"1*MfSdTUUHjCr0p5I7MyckJA.png","originalHeight":352,"originalWidth":356,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:1265422638b6_8":{"__typename":"Paragraph","id":"1265422638b6_8","name":"4d23","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*MfSdTUUHjCr0p5I7MyckJA.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_9":{"__typename":"Paragraph","id":"1265422638b6_9","name":"14da","type":"P","href":null,"layout":null,"metadata":null,"text":"How can we do it?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_10":{"__typename":"Paragraph","id":"1265422638b6_10","name":"cdbe","type":"H3","href":null,"layout":null,"metadata":null,"text":"Use Layout","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_11":{"__typename":"Paragraph","id":"1265422638b6_11","name":"8017","type":"P","href":null,"layout":null,"metadata":null,"text":"If we look at probably the simplest composable component, Box, we can see underneath, it is just using the Layout component.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":58,"end":61,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":107,"end":113,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:1265422638b6_12":{"__typename":"Paragraph","id":"1265422638b6_12","name":"e4a3","type":"PRE","href":null,"layout":null,"metadata":null,"text":"@Composable\ninline fun Box(\n modifier: Modifier = Modifier…","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":{"__typename":"CodeBlockMetadata","mode":"EXPLICIT","lang":"kotlin"},"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:f9c208bdbb09-viewerId:lo_fe4d9ff90705":{"__typename":"CollectionViewerEdge","id":"collectionId:f9c208bdbb09-viewerId:lo_fe4d9ff90705","isEditor":false,"isMuting":false},"UserViewerEdge:userId:5742b4fcf89e-viewerId:lo_fe4d9ff90705":{"__typename":"UserViewerEdge","id":"userId:5742b4fcf89e-viewerId:lo_fe4d9ff90705","isMuting":false},"ImageMetadata:1*MdMgVRTnupYGv9gYoKASQQ.png":{"__typename":"ImageMetadata","id":"1*MdMgVRTnupYGv9gYoKASQQ.png","originalWidth":1233,"originalHeight":115},"PostViewerEdge:postId:b5743f8cc82c-viewerId:lo_fe4d9ff90705":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:b5743f8cc82c-viewerId:lo_fe4d9ff90705"},"Tag:mobile-app-development":{"__typename":"Tag","id":"mobile-app-development","displayTitle":"Mobile App Development","normalizedTagSlug":"mobile-app-development"},"Tag:jetpack-compose":{"__typename":"Tag","id":"jetpack-compose","displayTitle":"Jetpack Compose","normalizedTagSlug":"jetpack-compose"},"Tag:android-app-development":{"__typename":"Tag","id":"android-app-development","displayTitle":"Android App Development","normalizedTagSlug":"android-app-development"},"Tag:androiddev":{"__typename":"Tag","id":"androiddev","displayTitle":"AndroidDev","normalizedTagSlug":"androiddev"},"Tag:app-development":{"__typename":"Tag","id":"app-development","displayTitle":"App Development","normalizedTagSlug":"app-development"},"Post:b5743f8cc82c":{"__typename":"Post","id":"b5743f8cc82c","collection":{"__ref":"Collection:f9c208bdbb09"},"content({\"postMeteringOptions\":{}})":{"__typename":"PostContent","isLockedPreviewOnly":true,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":null,"startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:1265422638b6_0"},{"__ref":"Paragraph:1265422638b6_1"},{"__ref":"Paragraph:1265422638b6_2"},{"__ref":"Paragraph:1265422638b6_3"},{"__ref":"Paragraph:1265422638b6_4"},{"__ref":"Paragraph:1265422638b6_5"},{"__ref":"Paragraph:1265422638b6_6"},{"__ref":"Paragraph:1265422638b6_7"},{"__ref":"Paragraph:1265422638b6_8"},{"__ref":"Paragraph:1265422638b6_9"},{"__ref":"Paragraph:1265422638b6_10"},{"__ref":"Paragraph:1265422638b6_11"},{"__ref":"Paragraph:1265422638b6_12"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:5742b4fcf89e"},"inResponseToEntityType":null,"isLocked":true,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_UGC","mediumUrl":"https:\u002F\u002Fmedium.com\u002Fmobile-app-development-publication\u002Fjetpack-compose-custom-layout-made-easy-b5743f8cc82c","primaryTopic":null,"topics":[{"__typename":"Topic","slug":"javascript"},{"__typename":"Topic","slug":"programming"}],"isPublished":true,"latestPublishedVersion":"1265422638b6","visibility":"LOCKED","postResponses":{"__typename":"PostResponses","count":3},"clapCount":86,"allowResponses":true,"isLimitedState":false,"title":"Jetpack Compose Custom Layout Made Easy","isSeries":false,"sequence":null,"uniqueSlug":"jetpack-compose-custom-layout-made-easy-b5743f8cc82c","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1687083851367,"readingTime":3.643396226415094,"previewContent":{"__typename":"PreviewContent","subtitle":"Make your own custom component other than what Google’s provided"},"previewImage":{"__ref":"ImageMetadata:0*v07Y9cRhzQzLJM4i"},"isShortform":false,"seoTitle":"","firstPublishedAt":1687083542817,"updatedAt":1687087599193,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:b5743f8cc82c-viewerId:lo_fe4d9ff90705"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:mobile-app-development"},{"__ref":"Tag:jetpack-compose"},{"__ref":"Tag:android-app-development"},{"__ref":"Tag:androiddev"},{"__ref":"Tag:app-development"}],"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":780,"layerCake":6,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"MISS"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.48bdf878.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.872afbe3.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.a4e221ac.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.933c1c9a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.73cb8339.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/9898.d9e26c5e.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/4863.28ab43f6.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6589.247b1d02.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.0f82ef97.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.8aa8d357.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.1c286b32.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.60bcefe8.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2106.0350840b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7394.73a57633.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5794.9e8ff5dd.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.7749bc66.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.2dc8b1c6.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.d5e0c2f5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.7ad7ca92.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/responses.editor.5a11f4da.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:'8f418cb73d343022',t:'MTczNDU1MDA0MS4wMDAwMDA='};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>