[Crane] Improved Tab selector ripple and added animation transition b…

…etween tabs (#761) * [Crane] Improved Tab selector to be animated between items and clip the ripple to the bordered indicator.
android · Mar 25, 2022 · 7610f7c · 7610f7c
1 parent ee19811
commit 7610f7c
Showing 1 changed file with 21 additions and 9 deletions.
diff --git a/Crane/app/src/main/java/androidx/compose/samples/crane/base/CraneTabs.kt b/Crane/app/src/main/java/androidx/compose/samples/crane/base/CraneTabs.kt
@@ -20,20 +20,25 @@ import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Tab
+import androidx.compose.material.TabPosition
 import androidx.compose.material.TabRow
+import androidx.compose.material.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.samples.crane.R
 import androidx.compose.samples.crane.home.CraneScreen
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
@@ -82,23 +87,30 @@ fun CraneTabs(
         selectedTabIndex = tabSelected.ordinal,
         modifier = modifier,
         contentColor = MaterialTheme.colors.onSurface,
-        indicator = { },
+        indicator = { tabPositions: List<TabPosition> ->
+            Box(
+                Modifier.tabIndicatorOffset(tabPositions[tabSelected.ordinal])
+                    .fillMaxSize()
+                    .padding(horizontal = 4.dp)
+                    .border(BorderStroke(2.dp, Color.White), RoundedCornerShape(16.dp))
+            )
+        },
         divider = { }
     ) {
         titles.forEachIndexed { index, title ->
             val selected = index == tabSelected.ordinal
 
-            var textModifier = Modifier.padding(vertical = 8.dp, horizontal = 16.dp)
-            if (selected) {
-                textModifier =
-                    Modifier
-                        .border(BorderStroke(2.dp, Color.White), RoundedCornerShape(16.dp))
-                        .then(textModifier)
-            }
+            val textModifier = Modifier
+                .padding(vertical = 8.dp, horizontal = 16.dp)
 
             Tab(
+                modifier = Modifier
+                    .padding(horizontal = 4.dp)
+                    .clip(RoundedCornerShape(16.dp)),
                 selected = selected,
-                onClick = { onTabSelected(CraneScreen.values()[index]) }
+                onClick = {
+                    onTabSelected(CraneScreen.values()[index])
+                }
             ) {
                 Text(
                     modifier = textModifier,