update Material2 Color Selection demo with accent colors

Author: SmartToolFactory

app/src/main/java/com/smarttoolfactory/composecolorsextended/MainActivity.kt

@@ -6,6 +6,7 @@ import androidx.activity.compose.setContent
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.offset
 import androidx.compose.material.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
@@ -16,8 +17,8 @@ import com.google.accompanist.pager.HorizontalPager
 import com.google.accompanist.pager.PagerState
 import com.google.accompanist.pager.rememberPagerState
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
-import com.smarttoolfactory.composecolorsextended.demo.MaterialColorSelectionDemo
-import com.smarttoolfactory.composecolorsextended.demo.PrimaryColorSelectionDemo
+import com.smarttoolfactory.composecolorsextended.demo.MD2ColorSelectionDemo
+import com.smarttoolfactory.composecolorsextended.demo.MD3ColorShadeSelectionDemo
 import com.smarttoolfactory.composecolorsextended.ui.theme.ComposeColorsExtendedTheme
 import kotlinx.coroutines.launch
 
@@ -28,6 +29,8 @@ class MainActivity : ComponentActivity() {
         super.onCreate(savedInstanceState)
         setContent {
             ComposeColorsExtendedTheme {
+
+                Modifier.offset()
                 // A surface container using the 'background' color from the theme
                 Surface(
                     modifier = Modifier.fillMaxSize(),
@@ -88,10 +91,10 @@ private fun HomeContent() {
     ) { page: Int ->
 
         when (page) {
-            0 -> PrimaryColorSelectionDemo {
+            0 -> MD2ColorSelectionDemo {
                 backgroundColor = it
             }
-            else -> MaterialColorSelectionDemo {
+            else -> MD3ColorShadeSelectionDemo {
                 backgroundColor = it
             }
         }
@@ -100,9 +103,8 @@ private fun HomeContent() {
 
 internal val tabList =
     listOf(
-        "MD2 Primary Colors",
-        "MD2 Material Colors",
-        "MD3 Shades",
+        "Material Design2",
+        "Material You/3",
         "Color Names",
         "Gradient Angles",
         "Color Conversions",

app/src/main/java/com/smarttoolfactory/composecolorsextended/MaterialColorPicker.kt

@@ -48,13 +48,20 @@ fun MaterialColorPicker(onColorChange: (Color) -> Unit) {
 
         val colorSwatch: LinkedHashMap<Int, Color> = ColorSwatch.primaryColorSwatches[headerIndex]
 
-        val keys: List<Int> = colorSwatch.keys.toList()
-        val colors: List<Color> = colorSwatch.values.toList()
-
-        val result: Result<List<Color>> =
-            runCatching { ColorSwatch.accentColorSwatches[headerIndex].values.toList() }
+        val keys: MutableList<Int> = colorSwatch.keys.toMutableList()
+        val colors: MutableList<Color> = colorSwatch.values.toMutableList()
 
+        val result: Result<LinkedHashMap<Int, Color>> =
+            runCatching { ColorSwatch.accentColorSwatches[headerIndex] }
 
+        if (result.isSuccess) {
+            result.getOrNull()?.let { accentColorSwatch: LinkedHashMap<Int, Color> ->
+                val accentKeys = accentColorSwatch.keys.toList()
+                val accentColors = accentColorSwatch.values.toList()
+                keys.addAll(accentKeys)
+                colors.addAll(accentColors)
+            }
+        }
         Divider(
             modifier = Modifier
                 .fillMaxHeight()
@@ -68,23 +75,33 @@ fun MaterialColorPicker(onColorChange: (Color) -> Unit) {
             contentPadding = PaddingValues(horizontal = 10.dp, vertical = 8.dp)
         ) {
             itemsIndexed(colors) { index: Int, item: Color ->
-                ColorRowWithInfo(
-                    modifier =
-                    Modifier
-                        .graphicsLayer {
-                            scaleY = if (selectedColorIndex == index) 1.03f else 1f
-                            scaleX = if (selectedColorIndex == index) 1.03f else 1f
-                        }
-                        .shadow(2.dp, RoundedCornerShape(4.dp))
-                        .fillMaxWidth()
-                        .clickable {
-                            selectedColorIndex = index
-                            onColorChange(item)
-                        },
-                    title = keys[index].toString(),
-                    color = item,
-                    textColor = if (index < 5) Color.Black else Color.White
-                )
+                Column {
+                    if (index == 0 || index == 10) {
+                        Text(
+                            modifier = Modifier.padding(8.dp),
+                            text = if (index == 0) "Primary" else "Accent",
+                            fontSize = 24.sp,
+                            fontWeight = FontWeight.Bold
+                        )
+                    }
+                    ColorRowWithInfo(
+                        modifier =
+                        Modifier
+                            .graphicsLayer {
+                                scaleY = if (selectedColorIndex == index) 1.03f else 1f
+                                scaleX = if (selectedColorIndex == index) 1.03f else 1f
+                            }
+                            .shadow(2.dp, RoundedCornerShape(4.dp))
+                            .fillMaxWidth()
+                            .clickable {
+                                selectedColorIndex = index
+                                onColorChange(item)
+                            },
+                        title = keys[index].toString(),
+                        color = item,
+                        textColor = if (index < 5 || index > 9) Color.Black else Color.White
+                    )
+                }
             }
         }
     }
@@ -116,7 +133,7 @@ fun ColorRowWithInfo(
         Text(
             text = colorToHex(color),
             color = textColor,
-            fontSize = 24.sp,
+            fontSize = 22.sp,
             fontWeight = FontWeight.Bold
         )
     }

…tended/demo/PrimaryColorSelectionDemo.kt …rsextended/demo/MD2ColorSelectionDemo.ktapp/src/main/java/com/smarttoolfactory/composecolorsextended/demo/PrimaryColorSelectionDemo.kt renamed to app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/MD2ColorSelectionDemo.kt app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/PrimaryColorSelectionDemo.kt renamed to app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/MD2ColorSelectionDemo.kt

@@ -5,7 +5,6 @@ import androidx.compose.ui.graphics.Color
 import com.smarttoolfactory.composecolorsextended.MaterialColorPicker
 
 @Composable
-fun PrimaryColorSelectionDemo(onColorChange: (Color) -> Unit) {
+fun MD2ColorSelectionDemo(onColorChange: (Color) -> Unit) {
     MaterialColorPicker(onColorChange = onColorChange)
 }
-

…ended/demo/MaterialColorSelectionDemo.kt …ended/demo/MD3ColorShadeSelectionDemo.ktapp/src/main/java/com/smarttoolfactory/composecolorsextended/demo/MaterialColorSelectionDemo.kt renamed to app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/MD3ColorShadeSelectionDemo.kt app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/MaterialColorSelectionDemo.kt renamed to app/src/main/java/com/smarttoolfactory/composecolorsextended/demo/MD3ColorShadeSelectionDemo.kt

@@ -5,6 +5,7 @@ import androidx.compose.ui.graphics.Color
 import com.smarttoolfactory.composecolorsextended.MaterialColorPicker
 
 @Composable
-fun MaterialColorSelectionDemo(onColorChange: (Color) -> Unit) {
+fun MD3ColorShadeSelectionDemo(onColorChange: (Color) -> Unit) {
     MaterialColorPicker(onColorChange = onColorChange)
 }
+