@composable fun ColorPickerDialog added.

Author: syslogic

library/src/debug/java/io/syslogic/colorpicker/compose/ColorPickerDialogPreview.kt

@@ -0,0 +1,32 @@
+package io.syslogic.colorpicker.compose
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+
+/**
+ * ColorPickerDialog Preview
+ *
+ * @author Martin Zeitler
+ */
+@Preview(
+    name = "ColorPickerDialog",
+    showBackground = true
+)
+@Composable
+fun ColorPickerDialogPreview() {
+    MaterialTheme {
+        ColorPickerDialog(
+            initialColor = Color(0xD31A3D9A),
+            onColorChanged = null,
+            showAlpha = true,
+            showARGB = false,
+            showHSV = false,
+            showHex = true,
+            showDialog = {
+
+            }
+        )
+    }
+}

library/src/main/java/io/syslogic/colorpicker/compose/ColorPickerDialog.kt

@@ -0,0 +1,99 @@
+package io.syslogic.colorpicker.compose
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+
+import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+
+import androidx.compose.runtime.*
+
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.window.Dialog
+
+import io.syslogic.colorpicker.OnColorChangedListener
+import io.syslogic.colorpicker.R
+
+@Composable
+fun toSp(dp: Dp) = with(LocalDensity.current) { dp.toSp() }
+
+@Composable
+fun ColorPickerDialog(
+    dialogTitle: String = LocalContext.current.getString(R.string.text_select_color),
+    initialColor: Color = Color.Unspecified,
+    onColorChanged: OnColorChangedListener?,
+    showAlpha: Boolean = true,
+    showHSV: Boolean = true,
+    showARGB: Boolean = true,
+    showHex: Boolean = true,
+    showDialog: (Boolean) -> Unit
+) {
+
+    /* The value is being initialized by the `initialColor`. */
+    val currentColor: Int by remember { mutableStateOf(initialColor.hashCode()) }
+
+    Dialog(onDismissRequest = { showDialog(false) }) {
+        Surface(
+            shape = RoundedCornerShape(dimensionResource(R.dimen.compose_dialog_border_radius)),
+            color = Color.White
+        ) {
+            Box(
+                contentAlignment = Alignment.Center
+            ) {
+                Column(
+                    modifier = Modifier
+                        .padding(dimensionResource(R.dimen.compose_dialog_column_padding))
+                ) {
+
+                    Row(
+                        modifier = Modifier.fillMaxWidth(),
+                        horizontalArrangement = Arrangement.SpaceBetween,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Text(
+                            text = dialogTitle,
+                            style = TextStyle(
+                                fontSize = toSp(dp = dimensionResource(R.dimen.compose_dialog_title_font_size)),
+                                fontFamily = FontFamily.Default,
+                                fontWeight = FontWeight.Bold
+                            )
+                        )
+                        Icon(
+                            imageVector = Icons.Filled.Close,
+                            contentDescription = "",
+                            tint = Color.DarkGray,
+                            modifier = Modifier
+                                .width(dimensionResource(R.dimen.compose_dialog_close_icon_size))
+                                .height(dimensionResource(R.dimen.compose_dialog_close_icon_size))
+                                .clickable { showDialog(false) }
+                        )
+                    }
+
+                    Spacer(
+                        modifier = Modifier.height(dimensionResource(R.dimen.compose_dialog_spacer_height))
+                    )
+
+                    ColorPickerComponent(
+                        initialColor = Color(currentColor),
+                        onColorChanged = onColorChanged,
+                        showAlpha = showAlpha,
+                        showARGB = showARGB,
+                        showHSV = showHSV,
+                        showHex = showHex
+                    )
+                }
+            }
+        }
+    }
+}

library/src/main/res/values/dimens.xml

@@ -17,4 +17,11 @@
     <dimen name="compose_hsv_label_padding_end">4dp</dimen>
     <dimen name="compose_argb_value_min_width">30dp</dimen>
 
+    <!-- ColorPickerDialog -->
+    <dimen name="compose_dialog_border_radius">16dp</dimen>
+    <dimen name="compose_dialog_column_padding">20dp</dimen>
+    <dimen name="compose_dialog_spacer_height">20dp</dimen>
+    <dimen name="compose_dialog_close_icon_size">30dp</dimen>
+    <dimen name="compose_dialog_title_font_size">24dp</dimen>
+
 </resources>

library/src/main/res/values/strings.xml

@@ -2,6 +2,7 @@
 <resources>
     <string name="text_color_picker_dialog">Color Picker</string>
     <string name="text_hexadecimal_value">Hex Value</string>
+    <string name="text_select_color">Select Color</string>
 
     <string name="text_label_hue">Hue:</string>
     <string name="text_label_sat">Sat:</string>

mobile/src/main/java/io/syslogic/demo/colorpicker/activity/ComposeActivity.kt

@@ -1,16 +1,18 @@
 package io.syslogic.demo.colorpicker.activity
 
 import android.content.SharedPreferences
-
 import android.os.Bundle
+
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.preference.PreferenceManager
 
 import io.syslogic.colorpicker.OnColorChangedListener
-
 import io.syslogic.colorpicker.compose.ColorPickerComponent
 
 /**
@@ -30,14 +32,19 @@ class ComposeActivity : ComponentActivity(), OnColorChangedListener {
 
         this.setContent {
             MaterialTheme {
-                ColorPickerComponent(
-                    onColorChanged = this@ComposeActivity,
-                    initialColor = Color(initialColor),
-                    showAlpha = true,
-                    showHSV = true,
-                    showARGB = true,
-                    showHex = true
-                )
+                Surface(
+                    modifier = Modifier.fillMaxSize(),
+                    color = MaterialTheme.colors.background
+                ) {
+                    ColorPickerComponent(
+                        onColorChanged = this@ComposeActivity,
+                        initialColor = Color(initialColor),
+                        showAlpha = true,
+                        showHSV = true,
+                        showARGB = true,
+                        showHex = true
+                    )
+                }
             }
         }
     }