Color picker android studio kotlin

Kotlin Android – Color Picker – Example

Kotlin Android – Color Picker

Color Picker is an application, where you can choose specific amounts of Red(R), Green(G), Blue(B) colors and Transparency(A).

In this tutorial, we shall implement a Color Picker using SeekBar and other basic View components of Android. No third party library shall be used. It is a simple Color Picker and you can make your custom changes. For complete source code, scroll to the end of the tutorial.

Following is a sample screenshot of what we are building in this tutorial.

As shown in the above image, there are four seekbars with min value 0 and max value 255 to read the four channels of color (Alpha, Red, Green, Blue). An EditText is available to input color hex value. Preview could be seen in a button at the top.

? ? Your browser does not support the video tag.

Steps to Build Color Picker in Android

Following are the steps we followed to build the Kotlin Android – Color Picker presented in this Example.

1. There should be four SeekBar s included for picking Alpha (Transparency), Red, Green and Blue components. As the hex value of a color component ranges from 0..255, take the max value of each SeekBar as 255.
2. An EditText is used to display the complete color’s hex value. The same EditText can be used to provide a custom color hex value.
3. A button is provided at the top, to preview the color formed with the values collected from SeekBars or EditText.

Example – Kotlin Android – Color Picker

In the main activity, we have presented two buttons, one for showing the color and other a regular button. Upon clicking any of the two buttons, color picker layout will appear and you can choose the color by changing the seekbar positions.

Following are the layout and Activity (Kotlin) files. For resources like drawables which are used for styling seekbars, you can download this whole Android Application using the link provided at the end of this tutorial.

activity_main.xml

colorpicker.xml

MainActivity.kt

Conclusion

In this Kotlin Android Tutorial – Android Color Picker, we have provided the source code to build Color Picker using basic Android View elements an no third party library.

Источник

Использование библиотеки ColorPicker в Android для реализации гибкого выбора цвета

Понадобилось реализовать выбор цвета пользователем для вашего Android-приложения? Эта библиотека — отличный выбор.Без долгих предисловий, начнем.

Как всегда, для начала добавим библиотеку в приложение (файл build.gradle(module.app) ):

С этим разобрались. Теперь приступим непосредственно к реализации выбора цвета.

Создадим разметку:

У нас есть 2 кнопки, по нажатию на которые будет открываться диалоговое окно для выбора цвета. Когда мы выбрали цвет, он будет меняться у двух наших TextView.

Добавим наши поля в MainActivity:

… и инициализируем их в onCreate():

ВАЖНО: Также необходимо, чтобы MainActivity реализовывала методы интерфейса ColorPickerDialogListener:

Теперь создадим метод для создания диалогового окна и указаный в XML-разметке метод onClick:

все атрибуты класса ColorPickerDialog

Также необходимо реализовать методы интерфейса ColorPickerDialogListener:

Запускаем и… готово!

Однако это ещё не все возможности библиотеки ColorPicker. Она также добавляет preference для PreferenceScreen. Это позволяет реализовать выбор цвета в настройках. Посмотрим, как это работает.

1) Создадим новую SettingsActivity:

2) Откроем файл root_preferences.xml и изменим его следующим образом:

Как видите, мы создали Preference типа ColorPreferenceCompat

3) Создадим в activity_main.xml кнопку для перехода в нашу SettingsActivty:

4) Создадим метод openSettingsActivity в MainActivity и укажем его в поле «onClick» этой кнопки:

В этой же MainActivity создадим метод, который изменяет её фон в зависимости от выбранного в настройках цвета и вызовем этот метож в onCreate:

Переопределим метод onResume (подробнее тут):

5) Запустим приложение и посмотрим, что получилось:

Источник

Tek Eye

User Interface (UI) design is an important part of an app. Color (or colour in British English) is an important part of a UI. A color picker can be used to customize or edit an app theme or UI. Plus they can be used for artistic apps. This tutorial provides an Android Color Picker example app, but not just showing one way. Two ways are provided in this article and lots of color pickers are available around the web.

(This Android color picker tutorial assumes that Android Studio is installed, a basic App can be created and run, and the code in this article can be correctly copied into Android Studio. The example code can be changed to meet your own requirements. When entering code in Studio add import statements when prompted by pressing Alt-Enter.)

How is an Android Color Defined?

What is a color in the Android Operating System (OS)? A color in Android is simply a number, a 32-bit number. 32-bits fits into a Java int. Therefore a standard color in Android is stored in an int. The 32-bits of the color int are divided into four lots of eight bits (four bytes). The four bytes are the Alpha (transparancy), Red, Green and Blue parts of a color. A color is therefore often simply referred to as an RGB or ARGB value. Each byte can hold 256 values (0-255). Therefore, the total number of possible colors are 256x256x256=16777216. Over 16 million colours and at 256 transparency levels. To define a color just assign a value to an integer, here is an example:

A Simple Android Color Picker Example

Because an Android color is just a combination of four bytes a simple color picker can be made with four Seekbars dropped on to a View. Then take the value from the Seekbars and convert them into a color using the Android Color class.

For an example on using the Seekbar see the Tek Eye article SeekBar Android Example Code and Tutorial. Here is the layout with four Seekbars used to set an Android color (as shown above):

Here is the Java Activity source code (MainActivity.java) used for the above layout:

An Android Color Picker Dialog

The Android Software Development Kit (SDK) used to ship with many demo apps. One of the most useful was the API Demos project. The API Demos covers many core Android classes. It features graphics examples and one of those has a color picker dialog.

To implement it copy ColorPickerDialog.java from the graphics folder of the API Demos project into the same folder as the main Java file (here MainActivity.java). Change the package namespace to match the app’s (here package com.example.colorpicker; ). Add a Button to the top of the layout and set the first TextView to be below it:

Add code to handle the button and invoke the ColorPickerDialog:

And code to handle the color picker dialog return:

The ColorPickerDialog is showing its age as it has hard coded values for when screens were much smaller. Here some simple scaling was added based on density pixels (dp) and the values tweeked. It’ll need further changes to correctly handle different screen sizes if it goes into production code. Here is the code for the ColorPickerDialog.java used in the example:

Lots of Color Pickers

There are lots of free color pickers available for Android. Many with more features than the ones shown here. Browse for an Android color picker on GitHub to find one suitable for your project, if the simple ones shown here are not up to the job.

Good UI Design

Color is only one small part of UI design. A good UI makes an App more pleasurable to use and engaging.

You can learn all about UI design at the Interaction Design Foundation. Head over to their UI design resource, it includes tips on how to make a great UI, at: https://www.interaction-design.org/literature/topics/ui-design

See Also

• Download the final code for this example, available in color-picker.zip
• See the SeekBar Android Example Code and Tutorial article for a SeekBar example.
• See the Android Example Projects page for more Android Studio sample projects with source code.
• For a full list of all the articles in Tek Eye see the full site alphabetical Index.

Author: Daniel S. Fowler Published: 2017-11-21 Updated: 2019-04-11

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Free Android Projects and Samples:

Источник

Color picker android studio kotlin

ColorPicker for Android

Simple library for creating fully modular color pickers written in Kotlin

Kotlin Library used for creating custom color pickers by adding different modules that combined all together form color picker. To learn more about the library you can check the Wiki page

Add to your project

Add the jitpack maven repository

Add the dependency

Here is example on how to include color picker components in your layout, in this particular example rectangular color window RectangularSV is used together with simple EditText that holds information about the RGB(Red, Green, Blue) values, for the selected color.

Set Updater and ColorConverter

In your activity you need to associate the color components with certain ColorConverter and Updater.

ColorConverter class is used for conversion of the current selected color into different color models. Those color model values can be used by text views to display the currently selected color.The class has methods that lets you get the current selected color in different color model formats.

Update class is responsible for updating the content of all attached color pickers and text views responsively, so the change in one view will trigger change in the other color picker components. That way you can attach multiple color pickers and separate components without the need of manually changing each one. If you want to create custom color picker with your own custom components combined in separate xml file, you can check the tutorial section on the Wiki page.

Listen for changes

You can attach listener that will trigger two methods when the user selects new color, from a certain component. The first event is for detecting TextViews value changes, and the other one is for detecting changes in Color Windows.

Источник

Color picker android studio kotlin

🎨 Color Picker Library for Android

Yet another Color Picker Library for Android. It is highly customizable and easy to use. Pick the color from wheel or select Material Colors from dialog. The original ColorPickerView was written by Hong Duan.

• Color Picker View
• Color Picker Dialog with Recent Color Option
• Material Color Picker Alert Dialog
• Material Color Picker BottomSheet Dialog

Color Picker	Material Color Picker

The ColorPicker configuration is created using the builder pattern.

The MaterialColorPicker configuration is created using the builder pattern.

You can change the color or Positive and Negative Button Text Color. Add Following parameters in your colors.xml file.

You can provide predefine colors for the MaterialColorPicker

Where R.array.themeColors and R.array.themeColorHex are defined as below

You can set the Dismiss listener

ColorPicker

MaterialColorPicker

You can set the Tick color for each card. This will come handy when color list include black or white colors. By default tick color will be either black or white based on the color darkness. If more dark colors the tick color will be white else black.

Источник