/AndroidClearChroma

A material color picker for Android

Primary LanguageJava

AndroidClearChroma

A customisable material color picker view for Android.

  • supports RGB, ARGB, HSV, HSL, CMYK, CMYK255 color modes (with alpha preview)
  • can indicate current color in either DECIMAL or HEXADECIMAL mode
  • can be used as Dialog, Fragment or as Preference.
  • can select custom shape for preview color in preference
  • add color as part of summary string
  • works on api-7 and up

Donation

Donations will be used to create free and open source applications.

Donation Paypal

Kunzisoft BitcoinBitcoin wallet address : 1DSwXCk7Sob24sNsofywNoRQw2f5Qj5t2F

Donation Liberapay

Installation

Add the JitPack repository in your build.gradle at the end of repositories:

	allprojects {
		repositories {
			...
			maven { url "https://jitpack.io" }
		}
	}

And add the dependency

	dependencies {
	        compile 'com.github.Kunzisoft:AndroidClearChroma:1.8'
	}

Usage

ChromaDialog

To display a color picker DialogFragment from your Activity:

new ChromaDialog.Builder()
    .initialColor(Color.GREEN)
    .colorMode(ColorMode.ARGB) // RGB, ARGB, HVS, CMYK, CMYK255, HSL
    .indicatorMode(IndicatorMode.HEX) //HEX or DECIMAL; Note that (HSV || HSL || CMYK) && IndicatorMode.HEX is a bad idea
    .create()
    .show(getSupportFragmentManager(), "ChromaDialog");

To display a color picker DialogFragment from your Fragment:

new ChromaDialog.Builder()
    .initialColor(Color.GREEN)
    .colorMode(ColorMode.ARGB) // RGB, ARGB, HVS, CMYK, CMYK255, HSL
    .indicatorMode(IndicatorMode.HEX) //HEX or DECIMAL; Note that (HSV || HSL || CMYK) && IndicatorMode.HEX is a bad idea
    .create()
    .show(getChildFragmentManager(), "ChromaDialog");

Listeners

Your parent Activity or Fragment must implement the listener interfaces.

OnColorSelectedListener

OnColorSelectedListener contains two methods : void onPositiveButtonClick(@ColorInt int color)called when positiveButton is clicked and void onNegativeButtonClick(@ColorInt int color) called when negativeButton is clicked.

OnColorChangedListener

OnColorChangedListener contains method void onColorChanged(@ColorInt int color) called when color is changed in view.

See MainActivity.java for complete sample of ChromaDialog

Style

For custom dialog, simply redefined following nodes :

<style name="Chroma.AlertDialog" parent="Theme.AppCompat.Light.Dialog.Alert">
	<!-- Used for the buttons -->
	<item name="colorAccent">#fff1c8</item>
	<!-- Used for the title and text -->
	<item name="android:textColorPrimary">#c7c7c7</item>
	<!-- Used for the background -->
	<item name="android:background">#353535</item>
 </style>

<style name="Chroma.AlertDialog.Label" parent="TextAppearance.AppCompat.Body1">
	<item name="android:textColor">#a7a7a7</item>
</style>

<style name="Chroma.AlertDialog.Value" parent="TextAppearance.AppCompat.Body2">
	<item name="android:textColor">#939393</item>
</style>

ChromaPreferenceCompat

You must add a preferenceTheme node in your activity :

<style name="AppTheme.Settings" parent="AppTheme">
	<item name="preferenceTheme">@style/PreferenceThemeOverlay.v14.Material</item>
</style>

or (for API < 14)

<style name="AppTheme.Settings" parent="AppTheme">
	<item name="preferenceTheme">@style/PreferenceThemeOverlay</item>
</style>

A. Add Preference to your *.xml preference layout:

    <com.kunzisoft.androidclearchroma.ChromaPreferenceCompat
        android:key="hsv" // any key you want
        android:title="HSV sample" // summary will be automatically fetched from the current color
        android:summary="text and [color] string" // add [color] for show current color as string in summary
        app:chromaShapePreview="ROUNDED_SQUARE" // CIRCLE, SQUARE, ROUNDED_SQUARE
        app:chromaColorMode="HSV" // RGB, ARGB, HSV, HSL, CMYK, CMYK255
        app:chromaIndicatorMode="HEX" // HEX or DECIMAL
        app:chromaInitialColor="@color/colorAccent"/> // default color

B. Or you can add preferences dynamically from the code:

    ChromaPreferenceCompat pref = new ChromaPreferenceCompat(getContext());
    pref.setTitle("RGB(added from java)");
    pref.setSummary("Summary ...");
    pref.setColorMode(ColorMode.RGB);
    pref.setIndicatorMode(IndicatorMode.HEX);
    pref.setKey("any_key_you_need");
    getPreferenceScreen().addPreference(pref);

You can use ChromaPreferenceFragmentCompat for an easier managing of fragment in Preferences.

public class ColorPreferenceFragmentCompat extends ChromaPreferenceFragmentCompat {

        @Override
        public void onCreatePreferences(Bundle bundle, String s) {
            addPreferencesFromResource(R.xml.prefs_v7); // load your ChromaPreferenceCompat prefs from xml
        }
    }

Fragment

Simply call it in XML layout with :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment android:name="com.kunzisoft.androidclearchroma.fragment.ChromaColorFragment"
        android:id="@+id/activity_color_fragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:layout="@layout/chroma_color_fragment" />

</FrameLayout>

Unfortunately, you can't customize a fragment in XML. You must initialize the fragment programmatically and use the FragmentManager to add it to your layouts.

Example :

    ChromaColorFragment chromaColorFragment = ChromaColorFragment.newInstance(Color.BLUE, ColorMode.ARGB, IndicatorMode.HEX);
    getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.container_color_fragment, chromaColorFragment, TAG_COLOR_FRAGMENT)
    .commit();

See FragmentColorActivity.java for complete sample.

Bonus

Method for formatted output of a given color:

ChromaUtil.getFormattedColorString(int color, boolean showAlpha);

Video for create the sample icon (in French)

This project is a fork of VintageChroma by Pavel Sikun.

License

Copyright 2017 JAMET Jeremy.

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.