/* Ċ Ġ* ĠCopyright Ġ 2 0 2 1 ĠThe ĠAndroid ĠOpen ĠSource ĠProject Ċ Ġ* Ċ Ġ* ĠLicensed Ġunder Ġthe ĠApache ĠLicense , ĠVersion Ġ 2 . 0 Ġ( the Ġ" License "); Ċ Ġ* Ġyou Ġmay Ġnot Ġuse Ġthis Ġfile Ġexcept Ġin Ġcompliance Ġwith Ġthe ĠLicense . Ċ Ġ* ĠYou Ġmay Ġobtain Ġa Ġcopy Ġof Ġthe ĠLicense Ġat Ċ Ġ* Ċ Ġ* ĠĠĠĠ Ġhttps :// www . apache . org / licenses / LICENSE - 2 . 0 Ċ Ġ* Ċ Ġ* ĠUnless Ġrequired Ġby Ġapplicable Ġlaw Ġor Ġagreed Ġto Ġin Ġwriting , Ġsoftware Ċ Ġ* Ġdistributed Ġunder Ġthe ĠLicense Ġis Ġdistributed Ġon Ġan Ġ" AS ĠIS " ĠBASIS , Ċ Ġ* ĠWITHOUT ĠWARRANTIES ĠOR ĠCONDITIONS ĠOF ĠANY ĠKIND , Ġeither Ġexpress Ġor Ġimplied . Ċ Ġ* ĠSee Ġthe ĠLicense Ġfor Ġthe Ġspecific Ġlanguage Ġgoverning Ġpermissions Ġand Ċ Ġ* Ġlimitations Ġunder Ġthe ĠLicense . Ċ Ġ*/ Ċ package Ġcom . example . android dev challenge . ui . screen . home . components Ċ Ċ import Ġandroidx . compose . animation . core . Fast Out Slow In E asing Ċ import Ġandroidx . compose . animation . core . animate Dp As State Ċ import Ġandroidx . compose . animation . core . t ween Ċ import Ġandroidx . compose . foundation . layout . Column Ċ import Ġandroidx . compose . foundation . layout . fill Max Width Ċ import Ġandroidx . compose . foundation . layout . height Ċ import Ġandroidx . compose . foundation . layout . offset Ċ import Ġandroidx . compose . foundation . layout . width Ċ import Ġandroidx . compose . foundation . layout . wrap Content Size Ċ import Ġandroidx . compose . foundation . shape . Rounded Corner Shape Ċ import Ġandroidx . compose . material . Card Ċ import Ġandroidx . compose . material . Scroll able Tab Row Ċ import Ġandroidx . compose . material . Surface Ċ import Ġandroidx . compose . material . Tab Ċ import Ġandroidx . compose . material . Tab Position Ċ import Ġandroidx . compose . material . Text Ċ import Ġandroidx . compose . runtime . Composable Ċ import Ġandroidx . compose . runtime . getValue Ċ import Ġandroidx . compose . ui . Alignment Ċ import Ġandroidx . compose . ui . Modifier Ċ import Ġandroidx . compose . ui . composed Ċ import Ġandroidx . compose . ui . graphics . Color Ċ import Ġandroidx . compose . ui . platform . debug Inspector Info Ċ import Ġandroidx . compose . ui . unit . dp Ċ import Ġcom . example . android dev challenge . data . Category Ċ Ċ @ Composable Ċ fun ĠTab List ( ĊĠĠĠ Ġtabs : ĠList < Category >, ĊĠĠĠ Ġselected Category : ĠCategory , ĊĠĠĠ Ġmodifier : ĠModifier Ġ= ĠModifier , ĊĠĠĠ Ġon Category Selected : Ġ( Category ) Ġ-> ĠUnit Ċ ) Ġ{ ĊĠĠĠ Ġval Ġselected Index Ġ= Ġtabs . indexOf First Ġ{ Ġit Ġ== Ġselected Category Ġ} ĊĊĠĠĠ ĠCard ( ĊĠĠĠĠĠĠĠ Ġshape Ġ= ĠRo unded Corner Shape ( 0 . dp ), ĊĠĠĠĠĠĠĠ Ġelevation Ġ= Ġ 0 . dp ĊĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠ ĠColumn Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ ĠScroll able Tab Row ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġselected TabIndex Ġ= Ġselected Index , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠbackgroundColor Ġ= ĠColor ( android . R . color . transparent ), ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġedge Padding Ġ= Ġ 0 . dp , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġindicator Ġ= Ġ{ Ġtab Positions Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠSurface ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmodifier ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. custom Tab Indicator Offset ( tab Positions [ selectedIndex ]) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ. height ( 4 . dp ), ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcolor Ġ= ĠColor ( 2 4 0 , Ġ 1 7 1 , Ġ 1 6 9 ), ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġshape Ġ= ĠRo unded Corner Shape ( 2 . dp ), ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) Ġ{} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}, ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdivider Ġ= Ġ{} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtabs . forEach Indexed Ġ{ Ġindex , Ġtab Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠTab ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġselected Ġ= Ġindex Ġ== Ġselected Index , ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonClick Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġon Category Selected . invoke ( tab ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}, ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtext Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠText ( text Ġ= Ġtab . title ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ fun ĠModifier . custom Tab Indicator Offset ( ĊĠĠĠ Ġcurrent Tab Position : ĠTab Position Ċ ): ĠModifier Ġ= Ġcomposed ( ĊĠĠĠ Ġinspector Info Ġ= Ġdebug Inspector Info Ġ{ ĊĠĠĠĠĠĠĠ Ġname Ġ= Ġ" tab Indicator Offset " ĊĠĠĠĠĠĠĠ Ġvalue Ġ= Ġcurrent Tab Position ĊĠĠĠ Ġ} Ċ ) Ġ{ ĊĠĠĠ Ġval Ġcurrent Tab Width Ġ= Ġcurrent Tab Position . width ĊĠĠĠ Ġval Ġindicator Offset Ġby Ġanimate Dp As State ( ĊĠĠĠĠĠĠĠ Ġtarget Value Ġ= Ġcurrent Tab Position . left Ġ+ Ġ( current Tab Width Ġ/ Ġ 2 ) Ġ- Ġ 2 . dp , ĊĠĠĠĠĠĠĠ Ġanimation Spec Ġ= Ġt ween ( duration Millis Ġ= Ġ 2 5 0 , Ġeasing Ġ= ĠFast Out Slow In E asing ) ĊĠĠĠ Ġ) ĊĠĠĠ Ġfill Max Width () ĊĠĠĠĠĠĠĠ Ġ. wrap Content Size ( Alignment . Bottom Start ) ĊĠĠĠĠĠĠĠ Ġ. offset ( x Ġ= Ġindicator Offset , Ġy Ġ= Ġ(- 4 ). dp ) ĊĠĠĠĠĠĠĠ Ġ. width ( 4 . dp ) Ċ } Ċ