Git Product home page Git Product logo

Comments (7)

AdamMc331 avatar AdamMc331 commented on August 22, 2024 1

I love this idea, feel free to lift any ideas/XML from my lib here - https://github.com/androidessence/materialdesignspecs

from splitties.

LouisCAD avatar LouisCAD commented on August 22, 2024

The plan is to just include the color resources (my version doesn't have the mds_ prefix BTW) to keep the module as small as possible, so you feel good using it even if for just 3 colors in a small app (since unused resources can be shrinked). You already know how it'll look like.

In the project where I used it, I had written a color picker that is similar to the list your library shows, and some helper code (in Java) to get the color with a hue, shade number and accent or not. However, the color would be another library if I release it, and the helper code to get a color could be included, but in another module, since not all apps need it.

I'll take a deep look at your library if I work on the color from code helpers and the color picker again, thanks !

from splitties.

AdamMc331 avatar AdamMc331 commented on August 22, 2024

No worries! I also meant, if you want to lift our XML file and replace the MDS prefix to save time, I am happy to let you do so - https://github.com/androidessence/MaterialDesignSpecs/blob/develop/lib/src/main/res/values/colors.xml

No point in reinventing the wheel - but it sounds like you already had the hex codes.

from splitties.

LouisCAD avatar LouisCAD commented on August 22, 2024

Yep, it's code I already have, it's CPDD (copy paste driven development).

I'll adress this when the doc is up to date (this is what I'm working on right now, which is a significant task given the number of modules I recently created)

from splitties.

LouisCAD avatar LouisCAD commented on August 22, 2024

So I'm back at it.
Here's what the code in one of my side projects looks like:
screen shot 2018-03-21 at 20 41 11

I'm now wondering if I should name the module material-colors or material-palette.

Or maybe a material-colors module with only the color resources, leaving the place for a future material-palette module that would provide helpers to get the colors dynamically with a depth (e.g. 500, or A700) and a swatch (e.g. CYAN).

from splitties.

LouisCAD avatar LouisCAD commented on August 22, 2024

Here's the code of the two java files you can find in a tab present in the screenshot in the comment above:

Palette.java (500 lines, mostly constants)
import android.content.Context;
import android.support.annotation.ColorInt;
import android.support.annotation.ColorRes;
import android.support.annotation.IntDef;
import android.support.v4.content.ContextCompat;

import java.lang.annotation.Documented;
import java.lang.annotation.Retention;

import static java.lang.annotation.RetentionPolicy.SOURCE;

/**
 * @see <a href="https://www.google.com/design/spec/style/color.html">Material Design Colors</a>
 */
public class Palettes {

    @ColorInt
    public static int getColor(Context context, @SwatchColor int swatchColor, @ColorDepth int depth) {
        @ColorRes int colorResId = getColorRes(swatchColor, depth);
        return ContextCompat.getColor(context, colorResId);
    }

    @ColorRes
    public static int getColorRes(@SwatchColor int swatchColor, @ColorDepth int depth) {
        return SWATCHES[swatchColor][depth];
    }

    @ColorRes
    public static int[] getSwatch(@SwatchColor int color) {
        return SWATCHES[color];
    }

    public static int getColorKey(@SwatchColor int swatchColor, @ColorDepth int colorDepth) {
        return swatchColor << 16 | (colorDepth & 0xFFFF);
    }

    @ColorRes
    public static int getColorRes(int colorKey) {
        return getColorRes(getSwatchColor(colorKey), getColorDepth(colorKey));
    }

    @SwatchColor
    @SuppressWarnings("ResourceType")
    public static int getSwatchColor(int colorKey) {
        return colorKey >> 16;
    }

    public static String getColorName(int colorKey) {
        @SwatchColor int swatchColor = getSwatchColor(colorKey);
        @ColorDepth int colorDepth = getColorDepth(colorKey);
        return SWATCH_COLORS_NAMES[swatchColor] + " " + COLOR_DEPTHS_NAMES[colorDepth];
    }

    public static String getColorName(@SwatchColor int swatchColor, @ColorDepth int colorDepth) {
        return SWATCH_COLORS_NAMES[swatchColor] + " " + COLOR_DEPTHS_NAMES[colorDepth];
    }

    @ColorDepth
    @SuppressWarnings("ResourceType")
    public static int getColorDepth(int colorKey) {
        return colorKey & 0xFFFF;
    }

    public static final int RED = 0;
    public static final int PINK = 1;
    public static final int PURPLE = 2;
    public static final int DEEP_PURPLE = 3;
    public static final int INDIGO = 4;
    public static final int BLUE = 5;
    public static final int LIGHT_BLUE = 6;
    public static final int CYAN = 7;
    public static final int TEAL = 8;
    public static final int GREEN = 9;
    public static final int LIGHT_GREEN = 10;
    public static final int LIME = 11;
    public static final int YELLOW = 12;
    public static final int AMBER = 13;
    public static final int ORANGE = 14;
    public static final int DEEP_ORANGE = 15;
    public static final int BROWN = 16;
    public static final int GREY = 17;
    public static final int BLUE_GREY = 18;

    public static final int _50 = 0;
    public static final int _100 = 1;
    public static final int _200 = 2;
    public static final int _300 = 3;
    public static final int _400 = 4;
    public static final int _500 = 5;
    public static final int _600 = 6;
    public static final int _700 = 7;
    public static final int _800 = 8;
    public static final int _900 = 9;
    public static final int A100 = 10;
    public static final int A200 = 11;
    public static final int A400 = 12;
    public static final int A700 = 13;

    public static final int[][] SWATCHES = new int[19][];
    public static final int[][] ACCENT_SWATCHES = new int[16][];

    public static final String[] COLOR_DEPTHS_NAMES = {
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900"
    };

    public static final String[] SWATCH_COLORS_NAMES = {
            "red",
            "pink",
            "purple",
            "deep purple",
            "indigo",
            "blue",
            "light blue",
            "cyan",
            "teal",
            "green",
            "light green",
            "lime",
            "yellow",
            "amber",
            "orange",
            "deep orange",
            "brown",
            "grey",
            "blue grey"
    };

    @ColorRes
    public static final int[] AMBER_SWATCH = {
            R.color.amber_50,
            R.color.amber_100,
            R.color.amber_200,
            R.color.amber_300,
            R.color.amber_400,
            R.color.amber_500,
            R.color.amber_600,
            R.color.amber_700,
            R.color.amber_800,
            R.color.amber_900,
            R.color.amber_a100,
            R.color.amber_a200,
            R.color.amber_a400,
            R.color.amber_a700
    };
    @ColorRes
    public static final int[] BLUE_GREY_SWATCH = {
            R.color.blue_grey_50,
            R.color.blue_grey_100,
            R.color.blue_grey_200,
            R.color.blue_grey_300,
            R.color.blue_grey_400,
            R.color.blue_grey_500,
            R.color.blue_grey_600,
            R.color.blue_grey_700,
            R.color.blue_grey_800,
            R.color.blue_grey_900,
    };
    @ColorRes
    public static final int[] BLUE_SWATCH = {
            R.color.blue_50,
            R.color.blue_100,
            R.color.blue_200,
            R.color.blue_300,
            R.color.blue_400,
            R.color.blue_500,
            R.color.blue_600,
            R.color.blue_700,
            R.color.blue_800,
            R.color.blue_900,
            R.color.blue_a100,
            R.color.blue_a200,
            R.color.blue_a400,
            R.color.blue_a700
    };
    @ColorRes
    public static final int[] BROWN_SWATCH = {
            R.color.brown_50,
            R.color.brown_100,
            R.color.brown_200,
            R.color.brown_300,
            R.color.brown_400,
            R.color.brown_500,
            R.color.brown_600,
            R.color.brown_700,
            R.color.brown_800,
            R.color.brown_900,
    };
    @ColorRes
    public static final int[] CYAN_SWATCH = {
            R.color.cyan_50,
            R.color.cyan_100,
            R.color.cyan_200,
            R.color.cyan_300,
            R.color.cyan_400,
            R.color.cyan_500,
            R.color.cyan_600,
            R.color.cyan_700,
            R.color.cyan_800,
            R.color.cyan_900,
            R.color.cyan_a100,
            R.color.cyan_a200,
            R.color.cyan_a400,
            R.color.cyan_a700
    };
    @ColorRes
    public static final int[] DEEP_ORANGE_SWATCH = {
            R.color.deep_orange_50,
            R.color.deep_orange_100,
            R.color.deep_orange_200,
            R.color.deep_orange_300,
            R.color.deep_orange_400,
            R.color.deep_orange_500,
            R.color.deep_orange_600,
            R.color.deep_orange_700,
            R.color.deep_orange_800,
            R.color.deep_orange_900,
            R.color.deep_orange_a100,
            R.color.deep_orange_a200,
            R.color.deep_orange_a400,
            R.color.deep_orange_a700
    };
    @ColorRes
    public static final int[] DEEP_PURPLE_SWATCH = {
            R.color.deep_purple_50,
            R.color.deep_purple_100,
            R.color.deep_purple_200,
            R.color.deep_purple_300,
            R.color.deep_purple_400,
            R.color.deep_purple_500,
            R.color.deep_purple_600,
            R.color.deep_purple_700,
            R.color.deep_purple_800,
            R.color.deep_purple_900,
            R.color.deep_purple_a100,
            R.color.deep_purple_a200,
            R.color.deep_purple_a400,
            R.color.deep_purple_a700
    };
    @ColorRes
    public static final int[] GREEN_SWATCH = {
            R.color.green_50,
            R.color.green_100,
            R.color.green_200,
            R.color.green_300,
            R.color.green_400,
            R.color.green_500,
            R.color.green_600,
            R.color.green_700,
            R.color.green_800,
            R.color.green_900,
            R.color.green_a100,
            R.color.green_a200,
            R.color.green_a400,
            R.color.green_a700
    };
    @ColorRes
    public static final int[] GREY_SWATCH = {
            R.color.grey_50,
            R.color.grey_100,
            R.color.grey_200,
            R.color.grey_300,
            R.color.grey_400,
            R.color.grey_500,
            R.color.grey_600,
            R.color.grey_700,
            R.color.grey_800,
            R.color.grey_900
    };
    @ColorRes
    public static final int[] INDIGO_SWATCH = {
            R.color.indigo_50,
            R.color.indigo_100,
            R.color.indigo_200,
            R.color.indigo_300,
            R.color.indigo_400,
            R.color.indigo_500,
            R.color.indigo_600,
            R.color.indigo_700,
            R.color.indigo_800,
            R.color.indigo_900,
            R.color.indigo_a100,
            R.color.indigo_a200,
            R.color.indigo_a400,
            R.color.indigo_a700
    };
    @ColorRes
    public static final int[] LIGHT_BLUE_SWATCH = {
            R.color.light_blue_50,
            R.color.light_blue_100,
            R.color.light_blue_200,
            R.color.light_blue_300,
            R.color.light_blue_400,
            R.color.light_blue_500,
            R.color.light_blue_600,
            R.color.light_blue_700,
            R.color.light_blue_800,
            R.color.light_blue_900,
            R.color.light_blue_a100,
            R.color.light_blue_a200,
            R.color.light_blue_a400,
            R.color.light_blue_a700
    };
    @ColorRes
    public static final int[] LIGHT_GREEN_SWATCH = {
            R.color.light_green_50,
            R.color.light_green_100,
            R.color.light_green_200,
            R.color.light_green_300,
            R.color.light_green_400,
            R.color.light_green_500,
            R.color.light_green_600,
            R.color.light_green_700,
            R.color.light_green_800,
            R.color.light_green_900,
            R.color.light_green_a100,
            R.color.light_green_a200,
            R.color.light_green_a400,
            R.color.light_green_a700
    };
    @ColorRes
    public static final int[] LIME_SWATCH = {
            R.color.lime_50,
            R.color.lime_100,
            R.color.lime_200,
            R.color.lime_300,
            R.color.lime_400,
            R.color.lime_500,
            R.color.lime_600,
            R.color.lime_700,
            R.color.lime_800,
            R.color.lime_900,
            R.color.lime_a100,
            R.color.lime_a200,
            R.color.lime_a400,
            R.color.lime_a700
    };
    @ColorRes
    public static final int[] ORANGE_SWATCH = {
            R.color.orange_50,
            R.color.orange_100,
            R.color.orange_200,
            R.color.orange_300,
            R.color.orange_400,
            R.color.orange_500,
            R.color.orange_600,
            R.color.orange_700,
            R.color.orange_800,
            R.color.orange_900,
            R.color.orange_a100,
            R.color.orange_a200,
            R.color.orange_a400,
            R.color.orange_a700
    };
    @ColorRes
    public static final int[] PINK_SWATCH = {
            R.color.pink_50,
            R.color.pink_100,
            R.color.pink_200,
            R.color.pink_300,
            R.color.pink_400,
            R.color.pink_500,
            R.color.pink_600,
            R.color.pink_700,
            R.color.pink_800,
            R.color.pink_900,
            R.color.pink_a100,
            R.color.pink_a200,
            R.color.pink_a400,
            R.color.pink_a700
    };
    @ColorRes
    public static final int[] PURPLE_SWATCH = {
            R.color.purple_50,
            R.color.purple_100,
            R.color.purple_200,
            R.color.purple_300,
            R.color.purple_400,
            R.color.purple_500,
            R.color.purple_600,
            R.color.purple_700,
            R.color.purple_800,
            R.color.purple_900,
            R.color.purple_a100,
            R.color.purple_a200,
            R.color.purple_a400,
            R.color.purple_a700
    };
    @ColorRes
    public static final int[] RED_SWATCH = {
            R.color.red_50,
            R.color.red_100,
            R.color.red_200,
            R.color.red_300,
            R.color.red_400,
            R.color.red_500,
            R.color.red_600,
            R.color.red_700,
            R.color.red_800,
            R.color.red_900,
            R.color.red_a100,
            R.color.red_a200,
            R.color.red_a400,
            R.color.red_a700
    };
    @ColorRes
    public static final int[] TEAL_SWATCH = {
            R.color.teal_50,
            R.color.teal_100,
            R.color.teal_200,
            R.color.teal_300,
            R.color.teal_400,
            R.color.teal_500,
            R.color.teal_600,
            R.color.teal_700,
            R.color.teal_800,
            R.color.teal_900,
            R.color.teal_a100,
            R.color.teal_a200,
            R.color.teal_a400,
            R.color.teal_a700
    };
    @ColorRes
    public static final int[] YELLOW_SWATCH = {
            R.color.yellow_50,
            R.color.yellow_100,
            R.color.yellow_200,
            R.color.yellow_300,
            R.color.yellow_400,
            R.color.yellow_500,
            R.color.yellow_600,
            R.color.yellow_700,
            R.color.yellow_800,
            R.color.yellow_900,
            R.color.yellow_a100,
            R.color.yellow_a200,
            R.color.yellow_a400,
            R.color.yellow_a700
    };

    static {
        SWATCHES[RED] = RED_SWATCH;
        SWATCHES[PINK] = PINK_SWATCH;
        SWATCHES[PURPLE] = PURPLE_SWATCH;
        SWATCHES[DEEP_PURPLE] = DEEP_PURPLE_SWATCH;
        SWATCHES[INDIGO] = INDIGO_SWATCH;
        SWATCHES[BLUE] = BLUE_SWATCH;
        SWATCHES[LIGHT_BLUE] = LIGHT_BLUE_SWATCH;
        SWATCHES[CYAN] = CYAN_SWATCH;
        SWATCHES[TEAL] = TEAL_SWATCH;
        SWATCHES[GREEN] = GREEN_SWATCH;
        SWATCHES[LIGHT_GREEN] = LIGHT_GREEN_SWATCH;
        SWATCHES[LIME] = LIME_SWATCH;
        SWATCHES[YELLOW] = YELLOW_SWATCH;
        SWATCHES[AMBER] = AMBER_SWATCH;
        SWATCHES[ORANGE] = ORANGE_SWATCH;
        SWATCHES[DEEP_ORANGE] = DEEP_ORANGE_SWATCH;
        SWATCHES[BROWN] = BROWN_SWATCH;
        SWATCHES[GREY] = GREY_SWATCH;
        SWATCHES[BLUE_GREY] = BLUE_GREY_SWATCH;
    }

    @SwatchColor
    public static final int[] SWATCH_COLORS = {RED, PINK, PURPLE, DEEP_PURPLE, INDIGO, BLUE,
            LIGHT_BLUE, CYAN, TEAL, GREEN, LIGHT_GREEN, LIME, YELLOW, AMBER, ORANGE, DEEP_ORANGE,
            BROWN, GREY, BLUE_GREY};
    @ColorDepth
    public static final int[] COLOR_DEPTHS =
            {_50, _100, _200, _300, _400, _500, _600, _700, _800, _900};
    @ColorDepth
    public static final int[] COLOR_DEPTHS_WITH_ACCENTS =
            {_50, _100, _200, _300, _400, _500, _600, _700, _800, _900, A100, A200, A400, A700};

    @IntDef({RED, PINK, PURPLE, DEEP_PURPLE, INDIGO, BLUE, LIGHT_BLUE, CYAN, TEAL,
            GREEN, LIGHT_GREEN, LIME, YELLOW, AMBER, ORANGE, DEEP_ORANGE, BROWN, GREY, BLUE_GREY})
    @Documented
    @Retention(SOURCE)
    public @interface SwatchColor {}

    @IntDef({_50, _100, _200, _300, _400, _500, _600, _700, _800, _900, A100, A200, A400, A700})
    @Documented
    @Retention(SOURCE)
    public @interface ColorDepth {}
}
ColorUtils.java (98 lines, because Java)
import android.content.Context;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.support.annotation.ColorInt;
import android.support.annotation.Size;
import android.support.v4.content.ContextCompat;

import my.package.name.ColorType;
import my.package.name.Palettes;

import static android.support.v4.graphics.ColorUtils.colorToHSL;

/**
 * Utility methods for working with colors
 */
public enum ColorUtils {
    ;

    /**
     * {@link Color#TRANSPARENT} looks black when using in Gradients such as {@link LinearGradient},
     * so this constant includes color bits, to look white when used in gradients
     */
    @ColorInt
    public static final int WHITE_TRANSPARENT = 0x00FFFFFF;

    @ColorInt
    public static final int SECONDARY_WHITE = 0xB2FFFFFF;
    @ColorInt
    public static final int SECONDARY_BLACK = 0x89000000;

    public static boolean isDark(@ColorInt int color, @Size(3) float[] hsl) {
        colorToHSL(color, hsl);
        return hsl[2] < 0.5f;
    }

    /**
     * @return {@link Color#BLACK} or {@link Color#WHITE}
     */
    @ColorInt
    public static int getOppositeColor(@ColorInt int backgroundColor, @Size(3) float[] hsl) {
        boolean isDark = isDark(backgroundColor, hsl);
        return (isDark ? Color.WHITE : Color.BLACK);
    }

    /**
     * @return {@link Color#BLACK} or {@link Color#WHITE}
     * @see #isDark(int, float[])
     */
    @ColorInt
    public static int getOppositeColor(boolean isBgDark) {
        return (isBgDark ? Color.WHITE : Color.BLACK);
    }

    /**
     * @param isBgDark Whether the background is dark or light.
     * @param lightColor a light color to display if bg is dark.
     * @param darkColor a dark color to display if bg is light.
     * @return ont of the colors passed in parameters.
     */
    @ColorInt
    public static int getReadableColor(boolean isBgDark,
                                       @ColorInt int lightColor,
                                       @ColorInt int darkColor) {
        return (isBgDark ? lightColor : darkColor);
    }

    @ColorInt
    public static int getColor(Context context, int colorValue, @ColorType int colorType) {
        switch (colorType) {
            case ColorType.ARGB:
                return colorValue;
            case ColorType.MATERIAL_COLOR_KEY:
                return ContextCompat.getColor(context, Palettes.getColorRes(colorValue));
            default:
                throw new IllegalArgumentException("Unknown colorType: " + colorType);
        }
    }

    public static String getColorName(int colorValue, @ColorType int colorType) {
        switch (colorType) {
            case ColorType.ARGB:
                return String.format("#%06X", 0xFFFFFF & colorValue);
            case ColorType.MATERIAL_COLOR_KEY:
                return Palettes.getColorName(colorValue);
            default:
                throw new IllegalArgumentException("Unknown colorType: " + colorType);
        }
    }
}

from splitties.

LouisCAD avatar LouisCAD commented on August 22, 2024

New split from PR is available in latest snapshot:

implementation "com.louiscad.splitties:splitties-material-colors:2.0.0-SNAPSHOT"

See README for snapshot repository url

from splitties.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.