Replace color picker by new one with editable hex values (#220)

app/build.gradle

@@ -81,7 +81,7 @@ dependencies {
     implementation 'androidx.preference:preference:1.2.1' // includes appcompat
     implementation 'androidx.recyclerview:recyclerview:1.3.1'
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
-    implementation 'com.github.skydoves:colorpickerview:2.2.4'
+    implementation 'com.github.martin-stone:hsv-alpha-color-picker-android:3.1.0'
 
     testImplementation 'junit:junit:4.13.2'
     testImplementation 'org.mockito:mockito-core:3.12.4'
@@ -90,3 +90,7 @@ dependencies {
     testImplementation 'androidx.test:runner:1.5.2'
     testImplementation 'androidx.test:core:1.5.0'
 }
+
+repositories {
+    maven { url "https://jitpack.io" }
+}

app/src/main/java/org/dslul/openboard/inputmethod/latin/settings/ColorsSettingsFragment.kt

@@ -1,20 +1,18 @@
 package org.dslul.openboard.inputmethod.latin.settings
 
 import android.app.Activity
-import android.graphics.Color
+import android.content.res.Configuration
 import android.os.Bundle
 import android.view.View
+import android.view.WindowManager
 import android.widget.CompoundButton
 import android.widget.ImageView
+import androidx.appcompat.app.AlertDialog
 import androidx.appcompat.app.AppCompatActivity
-import androidx.core.content.ContextCompat
 import androidx.core.content.edit
 import androidx.core.view.forEachIndexed
 import androidx.fragment.app.Fragment
-import com.skydoves.colorpickerview.ColorPickerDialog
+import com.rarepebble.colorpicker.ColorPickerView
-import com.skydoves.colorpickerview.flag.BubbleFlag
-import com.skydoves.colorpickerview.flag.FlagMode
-import com.skydoves.colorpickerview.listeners.ColorEnvelopeListener
 import org.dslul.openboard.inputmethod.keyboard.KeyboardSwitcher
 import org.dslul.openboard.inputmethod.latin.R
 import org.dslul.openboard.inputmethod.latin.RichInputMethodManager
@@ -90,39 +88,54 @@ open class ColorsSettingsFragment : Fragment(R.layout.color_settings) {
 
             val clickListener = View.OnClickListener {
                 val hidden = RichInputMethodManager.getInstance().inputMethodManager.hideSoftInputFromWindow(binding.dummyText.windowToken, 0)
-                val b = ColorPickerDialog.Builder(requireContext())
+                val initialColor = Settings.readUserColor(prefs, requireContext(), colorPrefs[index], isNight)
+                val picker = ColorPickerView(requireContext())
+                // todo: later alpha bar should be activated, but currently setting alpha leads to glitches,
+                //  e.g. when setting alpha on key text it's not applied for key icons, but for emojis
+                picker.showAlpha(false)
+                picker.showHex(true)
+                picker.showPreview(true)
+                picker.color = initialColor
+                picker.addColorObserver { observer ->
+                    prefs.edit { putInt(prefPrefix + colorPrefs[index], observer.color) }
+                    if (!csb.colorSwitch.isChecked) {
+                        prefs.edit { putBoolean(prefPrefix + colorPref + Settings.PREF_AUTO_USER_COLOR_SUFFIX, false) }
+                        csb.colorSwitch.setOnCheckedChangeListener(null)
+                        csb.colorSwitch.isChecked = true
+                        csb.colorSummary.text = ""
+                        csb.colorSwitch.setOnCheckedChangeListener(switchListener)
+                        updateColorPreviews()
+                        return@addColorObserver
+                    }
+                    updateColorPreviews()
+                }
+                val builder = AlertDialog.Builder(requireContext())
+                builder
                     .setTitle(colorPrefNames[index])
-                    // todo: later alphy bar should be activated, but currently setting alpha leads to glitches,
+                    .setView(picker)
-                    //  e.g. when setting alpha on key text it's not applied for key icons, but for emojis
+                    .setNegativeButton(android.R.string.cancel) { _, _ ->
-                    .attachAlphaSlideBar(false)
+                        // If the slider is disabled, we simply want to close the dialog when no color is selected.
-                    .setPositiveButton(android.R.string.ok, ColorEnvelopeListener { envelope, _ ->
+                        if (csb.colorSwitch.isChecked)
-                        prefs.edit { putInt(prefPrefix + colorPrefs[index], envelope.color) }
+                            picker.color = initialColor
+                    }
+                    .setPositiveButton(android.R.string.ok) { _, _ ->
+                        // When the slider is disabled, we want to define the default color as a custom color
                         if (!csb.colorSwitch.isChecked) {
-                            prefs.edit { putBoolean(prefPrefix + colorPref + Settings.PREF_AUTO_USER_COLOR_SUFFIX, false) }
+                            csb.colorSwitch.toggle()
-                            csb.colorSwitch.setOnCheckedChangeListener(null)
+                            picker.color = initialColor
-                            csb.colorSwitch.isChecked = true
-                            csb.colorSummary.text = ""
-                            csb.colorSwitch.setOnCheckedChangeListener(switchListener)
-                            reloadKeyboard(hidden)
-                            updateColorPreviews()
-                            return@ColorEnvelopeListener
                         }
                         reloadKeyboard(hidden)
-                        updateColorPreviews()
-                    })
-                    .setNegativeButton(android.R.string.cancel) { _, _ ->
-                        if (hidden)
-                            RichInputMethodManager.getInstance().inputMethodManager.showSoftInput(binding.dummyText, 0)
                     }
-                val initialColor = if (prefs.contains(prefPrefix + colorPref))
+                val dialog = builder.create()
-                    prefs.getInt(prefPrefix + colorPref, Color.GRAY)
+                dialog.show()
+                // Reduce the size of the dialog in portrait mode
+                val wrapContent = WindowManager.LayoutParams.WRAP_CONTENT
+                val widthPortrait = (resources.displayMetrics.widthPixels * 0.80f).toInt()
+                val orientation = (resources.configuration.orientation)
+                if (orientation == Configuration.ORIENTATION_LANDSCAPE)
+                    dialog.window?.setLayout(wrapContent, wrapContent)
                 else
-                    Settings.readUserColor(prefs, requireContext(), colorPrefs[index], isNight)
+                    dialog.window?.setLayout(widthPortrait, wrapContent)
-                b.colorPickerView.setInitialColor(initialColor)
-                // set better color drawable? neither the white circle nor the plus is nice
-                b.colorPickerView.setSelectorDrawable(ContextCompat.getDrawable(requireContext(), R.drawable.ic_plus))
-                b.colorPickerView.flagView = BubbleFlag(requireContext()).apply { flagMode = FlagMode.ALWAYS }
-                b.show()
             }
             csb.colorTextContainer.setOnClickListener(clickListener)
             csb.colorPreview.setOnClickListener(clickListener)