Понадобилось реализовать выбор цвета пользователем для вашего Android-приложения? Эта библиотека — отличный выбор.Без долгих предисловий, начнем.
Как всегда, для начала добавим библиотеку в приложение (файл build.gradle(module.app) ):
С этим разобрались. Теперь приступим непосредственно к реализации выбора цвета.
Создадим разметку:
У нас есть 2 кнопки, по нажатию на которые будет открываться диалоговое окно для выбора цвета. Когда мы выбрали цвет, он будет меняться у двух наших TextView.
Добавим наши поля в MainActivity:
… и инициализируем их в onCreate():
ВАЖНО: Также необходимо, чтобы MainActivity реализовывала методы интерфейса ColorPickerDialogListener:
![image](https://habrastorage.org/r/w1560/webt/r8/lg/em/r8lgemlisw5crqdtdz2gtimwj2c.png)
![image](https://habrastorage.org/r/w1560/webt/md/94/66/md9466uv_levpg7b_w23zehwane.png)
Теперь создадим метод для создания диалогового окна и указаный в XML-разметке метод onClick:
![image](https://habrastorage.org/r/w780q1/webt/7f/cv/fb/7fcvfbbd9ausgl9ze_iz6rfmv20.jpeg)
все атрибуты класса ColorPickerDialog
Также необходимо реализовать методы интерфейса ColorPickerDialogListener:
Запускаем и… готово!
![image](https://habrastorage.org/r/w1560/webt/zr/9e/os/zr9eosrc-bmbhzwckij7qxzybtg.png)
![image](https://habrastorage.org/r/w1560/webt/it/s5/mu/its5mu8k649m4xqaxofxrra-kvy.png)
Однако это ещё не все возможности библиотеки ColorPicker. Она также добавляет preference для PreferenceScreen. Это позволяет реализовать выбор цвета в настройках. Посмотрим, как это работает.
1) Создадим новую SettingsActivity:
![image](https://habrastorage.org/r/w1560/webt/wg/ry/tk/wgrytkepoms6t4aoixjsfur8f6u.png)
2) Откроем файл root_preferences.xml и изменим его следующим образом:
Как видите, мы создали Preference типа ColorPreferenceCompat
3) Создадим в activity_main.xml кнопку для перехода в нашу SettingsActivty:
4) Создадим метод openSettingsActivity в MainActivity и укажем его в поле «onClick» этой кнопки:
В этой же MainActivity создадим метод, который изменяет её фон в зависимости от выбранного в настройках цвета и вызовем этот метож в onCreate:
Переопределим метод onResume (подробнее тут):
5) Запустим приложение и посмотрим, что получилось:
![image](https://habrastorage.org/r/w1560/webt/wb/rf/x5/wbrfx5tfpf7-poglu7rzvmxgx24.png)
![image](https://habrastorage.org/r/w1560/webt/fv/-w/fj/fv-wfjhjswcgi-v542sycxcjbuw.png)
![image](https://habrastorage.org/r/w1560/webt/60/nw/au/60nwauns3lskbbuwsb_kf5cxp5w.png)
Как видите, все работает корректно.
P.S: Полезные сслыки:
P.S.S: Код приложения на GitHub
Как всегда, для начала добавим библиотеку в приложение (файл build.gradle(module.app) ):
implementation 'com.jaredrummler:colorpicker:1.1.0'
С этим разобрались. Теперь приступим непосредственно к реализации выбора цвета.
Создадим разметку:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/activityMain"
tools:context=".MainActivity">
<Button
android:id="@+id/firstButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Color picker №1"
android:layout_margin="5dp"
android:onClick="onClickButton"
/>
<Button
android:id="@+id/secondButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Color picker №2"
android:layout_below="@id/firstButton"
android:layout_margin="5dp"
android:onClick="onClickButton"
/>
<TextView
android:id="@+id/firstText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="First text"
android:textSize="40sp"
android:textColor="@android:color/black"
/>
<TextView
android:id="@+id/secondText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second text"
android:textSize="40sp"
android:layout_below="@+id/firstText"
android:layout_centerInParent="true"
android:textColor="@android:color/black"
/>
</RelativeLayout>
У нас есть 2 кнопки, по нажатию на которые будет открываться диалоговое окно для выбора цвета. Когда мы выбрали цвет, он будет меняться у двух наших TextView.
Добавим наши поля в MainActivity:
Button firstButton,secondButton;
TextView firstText,secondText;
private static final int firstId = 1,secondId = 2;
// id нужны для реализации метода onColorSelected интерфейса ColorPickerDialogListener
… и инициализируем их в onCreate():
firstButton = findViewById(R.id.firstButton);
secondButton = findViewById(R.id.secondButton);
firstText = findViewById(R.id.firstText);
secondText = findViewById(R.id.secondText);
ВАЖНО: Также необходимо, чтобы MainActivity реализовывала методы интерфейса ColorPickerDialogListener:
![image](https://habrastorage.org/webt/r8/lg/em/r8lgemlisw5crqdtdz2gtimwj2c.png)
![image](https://habrastorage.org/webt/md/94/66/md9466uv_levpg7b_w23zehwane.png)
Теперь создадим метод для создания диалогового окна и указаный в XML-разметке метод onClick:
private void createColorPickerDialog(int id) {
ColorPickerDialog.newBuilder()
.setColor(Color.RED)
.setDialogType(ColorPickerDialog.TYPE_PRESETS)
.setAllowCustom(true)
.setAllowPresets(true)
.setColorShape(ColorShape.SQUARE)
.setDialogId(id)
.show(this);
// полный список атрибутов класса ColorPickerDialog смотрите ниже
}
public void onClickButton(View view) {
switch (view.getId()) {
case R.id.firstButton:
createColorPickerDialog(firstId);
break;
case R.id.secondButton:
createColorPickerDialog(secondId);
break;
}
}
![image](https://habrastorage.org/webt/7f/cv/fb/7fcvfbbd9ausgl9ze_iz6rfmv20.jpeg)
все атрибуты класса ColorPickerDialog
Также необходимо реализовать методы интерфейса ColorPickerDialogListener:
@Override
public void onColorSelected(int dialogId, int color) {
switch (dialogId) { // смотрим, какая кнопка нажата
case firstId:
firstText.setTextColor(color);
break;
case secondId:
secondText.setTextColor(color);
break;
}
}
@Override
public void onDialogDismissed(int dialogId) {
Toast.makeText(this, "Dialog dismissed", Toast.LENGTH_SHORT).show();
}
Запускаем и… готово!
![image](https://habrastorage.org/webt/zr/9e/os/zr9eosrc-bmbhzwckij7qxzybtg.png)
![image](https://habrastorage.org/webt/it/s5/mu/its5mu8k649m4xqaxofxrra-kvy.png)
Однако это ещё не все возможности библиотеки ColorPicker. Она также добавляет preference для PreferenceScreen. Это позволяет реализовать выбор цвета в настройках. Посмотрим, как это работает.
1) Создадим новую SettingsActivity:
![image](https://habrastorage.org/webt/wg/ry/tk/wgrytkepoms6t4aoixjsfur8f6u.png)
2) Откроем файл root_preferences.xml и изменим его следующим образом:
<PreferenceScreen xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<PreferenceCategory app:title="Выбор цвета">
<com.jaredrummler.android.colorpicker.ColorPreferenceCompat
android:key="color_picker"
app:title="Выберите цвет"
/>
</PreferenceCategory>
</PreferenceScreen>
Как видите, мы создали Preference типа ColorPreferenceCompat
3) Создадим в activity_main.xml кнопку для перехода в нашу SettingsActivty:
<Button
android:id="@+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Настройки"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="5dp"
android:onClick="openSettingsActivity"
/>
4) Создадим метод openSettingsActivity в MainActivity и укажем его в поле «onClick» этой кнопки:
public void openSettingsActivity(View view) {
startActivity(new Intent(this,SettingsActivity.class));
}
В этой же MainActivity создадим метод, который изменяет её фон в зависимости от выбранного в настройках цвета и вызовем этот метож в onCreate:
private void setBackgroundColorFromSettingsActivity() {
SharedPreferences sp = PreferenceManager.getDefaultSharedPreferences(this);
//SharedPreferences используется для сохранения настроек
//Подробнее - тут:
//https://developer.android.com/reference/android/content/SharedPreferences?hl=ru
int color = sp.getInt("color_picker",Color.GREEN);
RelativeLayout layout = findViewById(R.id.activityMain);
layout.setBackgroundColor(color);
}
Переопределим метод onResume (подробнее тут):
@Override
protected void onResume() {
setBackgroundColorFromSettingsActivity();
super.onResume();
}
5) Запустим приложение и посмотрим, что получилось:
![image](https://habrastorage.org/webt/wb/rf/x5/wbrfx5tfpf7-poglu7rzvmxgx24.png)
![image](https://habrastorage.org/webt/fv/-w/fj/fv-wfjhjswcgi-v542sycxcjbuw.png)
![image](https://habrastorage.org/webt/60/nw/au/60nwauns3lskbbuwsb_kf5cxp5w.png)
Как видите, все работает корректно.
P.S: Полезные сслыки:
- Код библиотеки на GitHub (оф.документация там же)
- Похожая библиотека(если эта вам чем-то не приглянулась)
P.S.S: Код приложения на GitHub