This library implements a color picker and a color preference for use in Android applications.
I couldn't find this combination of features in an existing library, which is why I wrote this one:
- Alpha slider.
- Text field to copy and paste hex color values.
- Old and new colors displayed side by side.
- Optional selection of "no color".
- Proper behavior when orientation changes.
- Up-to-date design.
In addition, the Hue-Saturation picker...
- gives higher hue precision than a square picker of the same size.
- allows easier selection of pure white than a circular picker.
A demo is available on the Play Store. Source code for the app is in the demo_app folder in this repo.
Add the library dependency to your app module's build.gradle:
dependencies {
...
implementation 'com.github.martin-stone:hsv-alpha-color-picker-android:3.1.0'
}Add JitPack to your repository list if it isn't there already:
repositories {
...
maven { url "https://jitpack.io" }
}Note: If you previously used the com.rarepebble:colorpicker artifact, replace your previous dependency entry with the one above. You may no longer need jcenter() in your repositories list, if you use no other libraries from there.
Add the ColorPreference to your preference screen xml. Don't forget the extra xmlns: declaration if using the custom attributes described below.
<PreferenceScreen
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.rarepebble.colorpicker.ColorPreference
android:key="simplePreference"
android:title="@string/pref_title"
android:defaultValue="#f00"
/>
</PreferenceScreen>The above example will store a color with the key "simplePreference" in the default shared preferences. The stored value is an integer color with alpha component (as used throughout Android). To access the saved color in this example (with the same default)...
PreferenceManager.getDefaultSharedPreferences(context).getInt("simplePreference", 0xffff0000);The support library preferences require your app to invoke the color picker dialog in your preference fragment's onDisplayPreferenceDialog() function: If the preference is a ColorPreference, call its showDialog() function...
public void onDisplayPreferenceDialog(Preference preference) {
if (preference instanceof ColorPreference) {
((ColorPreference) preference).showDialog(this, 0);
} else super.onDisplayPreferenceDialog(preference);
}Note: If upgrading from version 2, the above Java snippet is a new requirement in your application.
See the demo source for more context.
The standard preference attributes apply as normal, including defaultValue, which can be a hex color, as in the example above, or a reference to a color defined elsewhere.
In addition, the following custom attributes may be used. They should be prefixed with the namespace used for res-auto, as in the example below.
If set, this text will appear on a third button on the color picker dialog. This resets the color setting to the defaultValue if set. If there is no defaultValue, any saved color setting is removed. Apps can use this to implement "no color selected" logic. Use SharedPreference.contains("myOptionalColorKey") to test for that.
This text displays as the preference summary text if no color has been selected.
Set this to false to hide the alpha slider.
Set this to false to hide the hex value field.
Set this to false to hide the color preview field.
Note: colorpicker_defaultColor was removed in version 2, in favour of android:defaultValue. If upgrading, just switch to using android:defaultValue instead.
<PreferenceScreen
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.rarepebble.colorpicker.ColorPreference
android:key="myOptionalColor"
android:title="@string/pref_optional_color"
app:colorpicker_selectNoneButtonText="@string/no_color"
app:colorpicker_noneSelectedSummaryText="@string/no_color_selected"
/>
</PreferenceScreen>There are further examples in the demo app.
In many cases, the ColorPreference will be all that's needed, but if you wish to use the ColorPickerView directly, it can be constructed like any other view, either in code or in XML. Set the initial color with setColor() and retrieve the view's current color with getColor():
final ColorPickerView picker = new ColorPickerView(getContext());
picker.setColor(0xff12345);
...
final int color = picker.getColor();Refer to the ColorPreference source for a fuller example.
The custom attributes below should be prefixed with the namespace used for res-auto, just like the preference attributes. See the view demo source for an example.
Set to false to hide the alpha slider. (Default is visible.)
Set to false to hide the hex value field. (Default is visible.)
Set to false to hide the color preview field. (Default is visible.)
Gets the current color.
Sets the original color swatch and the current color to the specified value.
Sets the original color swatch and the current color to the specified values.
Sets the original color swatch without changing the current color.
Sets the original color swatch without changing the current color.
Updates the current color without changing the original color swatch.
Updates the current color without changing the original color swatch.
Shows or hides the alpha slider.
Shows or hides the hex value field.
Shows or hides the color preview field.
Allows an object to receive notifications when the color changes.
Please report bugs in the GitHub issue tracker.
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
http://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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent