A great material designed colorpicker by Marie Schweiz

Related tags

UI/UX Lobsterpicker
Overview

Lobsterpicker

Designed by Marie Schweiz, Developed by Lars Werkman

Lobsterpicker is a library for android material design made to support apps and developers if a color should be choosen by a user. The library is offering a dialog with all shades of material design colors. Give it a try and download our demo app via google play

![image](http://dvsty.com/git-lobsterpicker/header.png)

How you can use it:

Include one or multiple of the views inside of you layout:

<com.larswerkman.lobsterpicker.LobsterPicker
    android:id="@+id/lobsterpicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<com.larswerkman.lobsterpicker.sliders.LobsterShadeSlider
    android:id="@+id/shadeslider"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<com.larswerkman.lobsterpicker.sliders.LobsterOpacitySlider
    android:id="@+id/opacityslider"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

summary of options

  • color wheel you prefer (wheel only)
  • color wheel and a before and after circle in the middle
  • color wheel and a slider for switching between different color spaces
  • color wheel, a slider for the colorspace and the opacity
  • slider only, toggle for 5 different shades you define
  • slider only and opacity

color wheel you prefer (wheel only)

image

LobsterPicker lobsterPicker = (LobsterPicker) findViewById(R.id.lobsterpicker);

//To retrieve the selected color use
lobsterPicker.getColor();

//You'r also able to add a listener
lobsterPicker.addOnColorListener(new OnColorListener() {
    @Override
    public void onColorChanged(@ColorInt int color) {
        
    }

    @Override
    public void onColorSelected(@ColorInt int color) {

    }
});

color wheel and a before and after circle in the middle

image

By default this is disabled your able to enable it in xml

app:color_history_enabled="true"

Or in Java

LobsterPicker lobsterPicker = (LobsterPicker) findViewById(R.id.lobsterpicker);

//To enable to color feedback use
lobsterPicker.setColorHistoryEnabled(true);

//To set a previous picked color or reference color use
lobsterPicker.setHistory(Color.RED);

color wheel and a slider for switching between different color spaces

image

To connect a slider to the color wheel use

LobsterPicker lobsterPicker = (LobsterPicker) findViewById(R.id.lobsterpicker);
LobsterShadeSlider shadeSlider = (LobsterShadeSlider) findViewById(R.id.shadeslider);

//To connect them
lobsterpicker.addDecorator(shadeSlider);

All sliders implement the ColorDecorator interface, which enables them to manipulate the user selected color. Important to notice is the sequence you add decorators, because the first decorator that is added will be the first to manipulate the color.

color wheel, a slider for the colorspace and the opacity

image

To connect both the LobsterShadeSlider and LobsterOpacitySlider isn't any diffent then the previous mentioned method

LobsterPicker lobsterPicker = (LobsterPicker) findViewById(R.id.lobsterpicker);
LobsterShadeSlider shadeSlider = (LobsterShadeSlider) findViewById(R.id.shadeslider);
LobsterOpacitySlider opacitySlider = (LobsterOpacitySlider) findViewById(R.id.opacityslider);

//To connect them
lobsterpicker.addDecorator(shadeSlider);
lobsterpicker.addDecorator(opacitySlider);

slider only, toggle for 5 different shades you define

image

The LobsterShadeSlider can also be used as a standalone color selector.

//To retrieve to color is the same mehtod used for the LobsterPicker
shadeSlider.getColor();

To use your own colors this can be done by implementing the ColorAdapter interface. Or use the existing BitmapColorAdapter which takes a Drawable as color source.

lobsterPicker.setColorAdapter(new BitmapColorAdapter(this, R.drawable.default_shader_pallete));

slider only and opacity

image

Just like for the LobsterPicker you have to add the opacity slider as a decorator

LobsterShadeSlider shadeSlider = (LobsterShadeSlider) findViewById(R.id.shadeslider);
LobsterOpacitySlider opacitySlider = (LobsterOpacitySlider) findViewById(R.id.opacityslider);

//To connect them
shadeSlider.addDecorator(opacitySlider);

Download

Maven:

<dependency>
	<groupId>com.larswerkman</groupId>
	<artifactId>lobsterpicker</artifactId>
	<version>1.0.1</version>
</dependency>

Gradle:

compile 'com.larswerkman:lobsterpicker:1.0.1'

License

Copyright (C) 2015 Marie Schweiz & Lars Werkman
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.

Credits

This library is written and developed by Lars Werkman. For feedback, requests and collaboration please use Github or write us.

Lars Werkman Freelance android developer [email protected]

Marie Schweiz Freelance android designer [email protected]

Comments
  • Add option to show color circle inside picker independent of color history

    Add option to show color circle inside picker independent of color history

    Currently it is only possible to show the color circle in conjunction with the history feature. It would be nice to be able to show the color circle when just choosing a color, thereby providing a more prominent preview of the selected color.

    opened by mpost 4
  • set initial colour?

    set initial colour?

    Hi, firstly - thanks for a great picker. is there a way to set the initial colour though?

    I'm using the picker in a fragment to manage lots of different preferences. It would be nice to set it to the previously chosen colour when a user pops it up.

    (e.g. if the user previously chose green, the slider/picker would start at green)

    setHistory doesn't seem to do that unless i'm missing something.

    opened by ConfusedVorlon 3
  • Shade slider missplaced when picker color black

    Shade slider missplaced when picker color black

    With the following slider position pointing at black the shade slider becomes smaller than the available width. All other colors render the slider with the expected full width. Seen with default ColorAdapter.

    lobster-layout-bug

    I would also expect to see different shades of gray when choosing the black color in the picker.

    opened by mpost 3
  • Inner Circle color issue

    Inner Circle color issue

    On the demo i see that the inner cirlce shows the picked color. I am using this xml attribute: app:color_history_enabled="true" and only half of the circle sets to the picked color the right half remains black. Is this a normal behaviour?

    opened by PappBalazs 1
  • View doesn't save / restore its state

    View doesn't save / restore its state

    onSaveInstanceState and onRestoreInstanceState are not implemented. Any changes made to the color picker are not persisted upon a configuration / orientation change and they are lost.

    opened by zsoltk 0
  • Compatibility with oder Android versions

    Compatibility with oder Android versions

    Using the NineOldAndroids library, I adjusted Lobsterpicker to work on older Android versions (I set the minSdk to 7, though it might work on even older versions). I tested it on and API 10 (Android 2.3.3) emulator and it seems to work.

    Even though I could understand if you declined this PR due to the deprecated state of the NineOldAndroids library or due to the few KB of bloat it adds to the project, I think there are still many apps out there that need to support API 7+ and are thus not able to use your nice color picker in its current state. Supporting API 7+ would put this library on the same level as most of Google's Android Support Libraries.

    In the process of integrating NineOldAndroids, I also updated the Android Gradle Plugin, compileSDK, targetSDK and support library versions to their newest versions, respectively.

    opened by johan12345 0
  • UnsupportedOperationException

    UnsupportedOperationException

    Fatal Exception: java.lang.UnsupportedOperationException at android.view.GLES20Canvas.clipPath(GLES20Canvas.java:429) at com.larswerkman.lobsterpicker.LobsterPicker.onDraw(Unknown Source) Sony ST23I Android 4.0.4

    found: http://stackoverflow.com/questions/13850259/is-there-a-way-to-disable-hardware-acceleration-only-for-android-4-0-3/22643710#22643710 and http://stackoverflow.com/questions/8895677/work-around-canvas-clippath-that-is-not-supported-in-android-any-more/8895894#8895894

    fix if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) { picker.setLayerType(View.LAYER_TYPE_SOFTWARE, null); }

    opened by QiXi 0
  • Decorate one LobsterShadeSlider with another

    Decorate one LobsterShadeSlider with another

    I am trying to use a LobsterShadeSlider to choose the defining hue and decorate that with another one to pick from shades, like with the LobsterPicker/LobsterShadeSlider combination. What would be the way to achieve this behavior ?

    opened by pbendel 0
  • Fixing bug where opacity slider doesn't update

    Fixing bug where opacity slider doesn't update

    When setting the color on the LobsterPicker with an attached opacity slider the opacity does not always update correctly. An example use case where it will not update and it should is:

    1. Set the lobster picker to a color with alpha either in code or by using it such as: 0xA0FF0000
    2. Set the lobster picker to a color with no alpha in code such as: 0xFFFF0000
    3. Notice that the alpha slider is still incorectly showing the old alpha value of A0
    opened by bdonahue 0
Owner
Lars Werkman
Lars Werkman
🎨 Android colorpicker for getting colors from any images by tapping on the desired color.

ColorPickerView ?? ColorPickerView implements getting HSV colors, ARGB values, Hex color codes from any image drawables or your gallery pictures by ta

Jaewoong Eum 1.3k Dec 26, 2022
Aether - anti-aliased UI engine designed for Minecraft, and general LWJGL

README WIP SOME THINGS MIGHT BE INACCURATE Aether UI Aether is anti-aliased UI engine designed for Minecraft, and general LWJGL. It is compatible with

Prism Client 35 Nov 12, 2022
The ShowcaseView library is designed to highlight and showcase specific parts of apps to the user with an attractive and flat overlay.

The ShowcaseView library is designed to highlight and showcase specific parts of apps to the user with an attractive and flat overlay.

Mohammad Reza Eram 484 Dec 26, 2022
A Material design Android pincode library. Supports Fingerprint.

LolliPin A Lollipop material design styled android pincode library (API 14+) To include in your project, add this to your build.gradle file: //Loll

Omada Health 1.6k Nov 25, 2022
Material Design implementation for Android 4.0+. Shadows, ripples, vectors, fonts, animations, widgets, rounded corners and more.

Carbon Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features. It's a custom implemen

null 3k Dec 30, 2022
A skeleton of google's appcompat android navigation drawer with material design.

Lollipop AppCompat Skeleton A skeleton of google's appcompat android navigation drawer with material design. Compatible to work on 4.0+ Based on Googl

Sachin Shinde 99 Nov 29, 2022
(Deprecated) A custom view component that mimics the new Material Design Bottom Navigation pattern.

BottomBar (Deprecated) I don't have time to maintain this anymore. I basically wrote the whole library in a rush, without tests, while being a serious

Iiro Krankka 8.4k Dec 29, 2022
An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView An implementation of tap targets from Google's Material Design guidelines on feature discovery. Min SDK: 14 JavaDoc Installation TapTar

Keepsafe 5.2k Dec 30, 2022
Inspired by Heinrich Reimer Material Intro and developed with love from scratch

Android Material Intro Screen Material intro screen is inspired by Material Intro and developed with love from scratch. I decided to rewrite completel

Tango Agency 2.7k Dec 19, 2022
A material Switch with icon animations and color transitions

Material Animated Switch A material Switch with icon animations and color transitions Sample video: Youtube Material Animated Switch video Sample app:

Adrián Lomas 1.2k Dec 29, 2022
An Android library that brings the Material Design 5.1 sidebar to pre-5.1 devices.

MaterialScrollBar An Android library that brings the Material Design 5.1 scrollbar to pre-5.1 devices. Designed for Android's recyclerView. Video Imag

Turing Technologies (Wynne Plaga) 784 Nov 29, 2022
[Deprecated] Android Library that implements Snackbars (former known as Undobar) from Google's Material Design documentation.

UndoBar This lib is deprecated in favor of Google's Design Support Library which includes a Snackbar and is no longer being developed. Thanks for all

Kai Liao 577 Nov 25, 2022
A library that provides an implementation of the banner widget from the Material design.

MaterialBanner A banner displays a prominent message and related optional actions. MaterialBanner is a library that provides an implementation of the

Sergey Ivanov 252 Nov 18, 2022
An Android library that brings the Material Design 5.1 sidebar to pre-5.1 devices.

MaterialScrollBar An Android library that brings the Material Design 5.1 scrollbar to pre-5.1 devices. Designed for Android's recyclerView. Video Imag

Turing Technologies (Wynne Plaga) 784 Nov 29, 2022
Android Material Json Form Wizard is a library for creating beautiful form based wizards within your app just by defining json in a particular format.

Android Json Wizard Android Json Wizard is a library for creating beautiful form based wizards within your app just by defining json in a particular f

Vijay Rawat 355 Nov 11, 2022
Create an header for com.google.android.material.navigation.NavigationView

Header View This is a view for NavigationView in android.support.design library Import At the moment the library is in my personal maven repo reposito

Raphaël Bussa 106 Nov 25, 2022
Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/

Material Tap Target Prompt A Tap Target implementation in Android based on Material Design Onboarding guidelines. For more information on tap targets

Sam Wall 1.5k Jan 4, 2023
Kotlin Wrapper Library of Material-UI

kotlin-material-ui Kotlin Wrapper Library of Material-UI Core: Lab: Installation repositories { jcenter() // or maven { url 'https://dl.bintra

Subroh Nishikori 78 Nov 24, 2022
Muirwik - a Material UI React wrapper written in Kotlin

Muirwik Welcome to Muirwik. Muirwik gets it name from being a Material UI React wrapper written in Kotlin. For more information, see the above links (

null 134 Nov 8, 2022