Как изменить цвет коммутатора

У меня есть несколько переключателей с разными цветами в моем приложении и для изменения их цветов. Я использовал настраиваемый селектор для каждого коммутатора.

Когда была выпущена новая библиотека AppCompat v21, появился новый элемент управления android.support.v7.widget.SwitchCompat.

Можно ли изменить цвет SwitchCompat без использования drawables, например, используя XML или код?

Присвоение атрибутов AppCompat:

Во-первых, вы должны взглянуть на статью appCompat lib и на различные атрибуты, которые вы можете установить:

ColorPrimary : основной цвет брендинга для приложения. По умолчанию этот цвет применяется к фону панели действий.

ColorPrimaryDark : Темный вариант основного цвета брендинга. По умолчанию это цвет применяется к строке состояния (через statusBarColor) и панели навигации (через navigationBarColor).

ColorAccent : яркое дополнение к цвету основного бренда. По умолчанию этот цвет применяется к элементам управления каркасом (через colorControlActivated).

ColorControlNormal : цвет применяется к элементам управления в нормальном состоянии.

ColorControlActivated : цвет, применяемый к элементам управления каркасом в их активированном (например, проверке, включении) состоянии.

ColorControlHighlight : цвет, применяемый к основным элементам управления каркасом (например, рябь, селектор списков).

ColorButtonNormal : цвет применяется к кнопкам рамки в их нормальном состоянии.

ColorSwitchThumbNormal : цвет применяется к фреймворкам каркаса в нормальном состоянии. (выключить)


Если все пользовательские переключатели одинаковы в одном действии:

С предыдущими атрибутами вы можете определить свою собственную тему для каждого вида деятельности:

<style name="Theme.MyActivityTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name="colorPrimary">@color/my_awesome_color</item> <!-- colorPrimaryDark is used for the status bar --> <item name="colorPrimaryDark">@color/my_awesome_darker_color</item> <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets --> <item name="colorAccent">@color/accent</item> <!-- You can also set colorControlNormal, colorControlActivated colorControlHighlight, and colorSwitchThumbNormal. --> </style> 

а также :

 <manifest> ... <activity android:name=".MainActivity" android:theme="@style/Theme.MyActivityTheme"> </activity> ... </manifest> 

Если вы хотите иметь разные пользовательские переключатели в одном действии:

Поскольку работа с виджетами в appcompat работает, перехватывая любую инфляцию макета и вставляя специальную версию виджета на свое место (см. Сообщение Chris Banes об этом ), вы не можете применить собственный стиль к каждому коммутатору вашего XML-файла макета. Вы должны установить пользовательский Контекст, который будет подкрашивать переключатель с правильными цветами.

Чтобы сделать это для pre-5.0, вам нужно создать контекст, который накладывает глобальную тему на таможенные атрибуты, а затем создавать программные переключатели:

 ContextThemeWrapper ctw = ContextThemeWrapper(getActivity(), R.style.Color1SwitchStyle); SwitchCompat sc = new SwitchCompat(ctw) 

С AppCompat v22.1 вы можете использовать следующий XML для применения темы к виджету коммутатора:

 <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" ...> <android.support.v7.widget.SwitchCompat android:layout_width="wrap_content" android:layout_height="wrap_content" app:theme="@style/Color1SwitchStyle"/> 

Ваша пользовательская тема переключения:

 <style name="Color1SwitchStyle"> <item name="colorControlActivated">@color/my_awesome_color</item> </style> 

На Android 5.0 похоже, что оживает новый атрибут вида: android:theme (то же, что и для объявления активности в манифесте). Основываясь на другом сообщении Chris Banes, с последним вы сможете определить собственную тему непосредственно на представлении из вашего макета xml:

 <android.support.v7.widget.SwitchCompat android:layout_width="wrap_content" android:layout_height="wrap_content" android:theme="@style/Color1SwitchStyle"/> 

Чтобы изменить цвет трека SwitchCompat

Благодаря vine'th, я завершу свой ответ ссылкой на ответ SO, который объясняет, как указать Foreground of the Track, когда Switch выключен, он есть .

Хорошо, поэтому я сожалею, но большинство из этих ответов неполны или имеют небольшую ошибку. Очень полный ответ от @ austyn-mahoney является правильным и источником для этого ответа, но он сложный, и вы, вероятно, просто хотите создать переключатель. Элементы управления Styling в разных версиях Android – это эпическая боль в заднице. Вытащив мои волосы в течение нескольких дней на проект с очень жесткими ограничениями конструкции, я, наконец, сломался и написал тестовое приложение, а затем действительно выкопал и протестировал различные решения там для стилейных переключателей и флажков, поскольку, когда у дизайна есть один Он часто имеет другой. Вот что я нашел …

Во-первых: вы не можете имитировать ни один из них, но вы можете применить тему для всех из них или только один из них.

Во-вторых: вы можете сделать все это из XML, и вам не нужны другие значения-v21 / styles.xml.

В-третьих: когда дело доходит до коммутаторов, у вас есть два основных варианта, если вы хотите поддерживать более старые версии Android (например, я уверен, что вы это делаете) …

  1. Вы можете использовать SwitchCompat и вы сможете сделать его похожим на разных платформах.
  2. Вы можете использовать Switch и вы сможете обсуждать его с остальной частью темы, или только с этим конкретным коммутатором, и в более старых версиях Android вы просто увидите нерасширенный старый квадратный переключатель.

Хорошо теперь для простого ссылочного кода. Опять же, если вы создадите простой Hello World! И отбросьте этот код, вы можете играть в своем сердце. Все это плита котла здесь, поэтому я просто собираюсь включить XML для деятельности и стиля …

activity_main.xml …

 <?xml version="1.0" encoding="utf-8"?> 

 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.kunai.switchtest.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="'Styled' SwitchCompat" /> <android.support.v7.widget.SwitchCompat android:id="@+id/switch_item" android:layout_width="wrap_content" android:layout_height="46dp" android:layout_alignParentEnd="true" android:layout_marginEnd="16dp" android:checked="true" android:longClickable="false" android:textOff="OFF" android:textOn="ON" app:switchTextAppearance="@style/BrandedSwitch.text" app:theme="@style/BrandedSwitch.control" app:showText="true" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.kunai.switchtest.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Themed SwitchCompat" /> <android.support.v7.widget.SwitchCompat android:id="@+id/switch_item2" android:layout_width="wrap_content" android:layout_height="46dp" android:layout_alignParentEnd="true" android:layout_marginEnd="16dp" android:checked="true" android:longClickable="false" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.kunai.switchtest.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Themed Switch" /> <Switch android:id="@+id/switch_item3" android:layout_width="wrap_content" android:layout_height="46dp" android:layout_alignParentEnd="true" android:layout_marginEnd="16dp" android:checked="true" android:longClickable="false" android:textOff="OFF" android:textOn="ON"/> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.kunai.switchtest.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="'Styled' Switch" /> <Switch android:id="@+id/switch_item4" android:layout_width="wrap_content" android:layout_height="46dp" android:layout_alignParentEnd="true" android:layout_marginEnd="16dp" android:checked="true" android:longClickable="false" android:textOff="OFF" android:textOn="ON" android:theme="@style/BrandedSwitch"/> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.kunai.switchtest.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="'Styled' CheckBox" /> <CheckBox android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="46dp" android:layout_alignParentEnd="true" android:layout_marginEnd="16dp" android:checked="true" android:longClickable="false" android:theme="@style/BrandedCheckBox"/> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.kunai.switchtest.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Themed CheckBox" /> <CheckBox android:id="@+id/checkbox2" android:layout_width="wrap_content" android:layout_height="46dp" android:layout_alignParentEnd="true" android:layout_marginEnd="16dp" android:checked="true" android:longClickable="false"/> </RelativeLayout> 

styles.xml …

 <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">#3F51B5</item> <item name="colorPrimaryDark">#303F9F</item> <item name="colorAccent">#FF4081</item> </style> <style name="BrandedSwitch.control" parent="Theme.AppCompat.Light"> <!-- active thumb & track color (30% transparency) --> <item name="colorControlActivated">#e6e600</item> <item name="colorSwitchThumbNormal">#cc0000</item> </style> <style name="BrandedSwitch.text" parent="Theme.AppCompat.Light"> <item name="android:textColor">#ffa000</item> <item name="android:textSize">9dp</item> </style> <style name="BrandedCheckBox" parent="AppTheme"> <item name="colorAccent">#aaf000</item> <item name="colorControlNormal">#ff0000</item> </style> <style name="BrandedSwitch" parent="AppTheme"> <item name="colorAccent">#39ac39</item> </style> 

Я знаю, я знаю, что вы слишком ленивы, чтобы построить это, вы просто хотите, чтобы ваш код был написан и проверил его, чтобы вы могли закрыть эту боль в заднем кошмарном кошмаре Android, чтобы дизайнер в вашей команде, наконец, был счастлив , Я понял. Вот как это выглядит, когда вы запускаете его …

API_21:

API 21

API_18:

API18

Я думаю, что ответ в приведенной ниже ссылке лучше

Как изменить цвет трека SwitchCompat

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ... <!-- Active thumb color & Active track color(30% transparency) --> <item name="colorControlActivated">@color/theme</item> <!-- Inactive thumb color --> <item name="colorSwitchThumbNormal">@color/grey300</item> <!-- Inactive track color(30% transparency) --> <item name="android:colorForeground">@color/grey600</item> ... </style> 

Поэтому в некоторые дни мне не хватает клеток мозга и:

 <android.support.v7.widget.SwitchCompat android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/CustomSwitchStyle"/> 

Не применяется тема, потому что стиль неверен. Я должен был использовать приложение: theme: P

 <android.support.v7.widget.SwitchCompat android:layout_width="match_parent" android:layout_height="wrap_content" app:theme="@style/CustomSwitchStyle"/> 

Whoopsies. Этот пост был тем, что дало мне понять мою ошибку … надеюсь, если кто-то споткнутся об этом, это поможет им, как это сделал я. Спасибо Гаэтан Маиссе за ваш ответ

Будьте в курсе ошибок с помощью SwitchCompat

Это ошибка с поврежденным файлом в drawable-hdpi на AppCompat https://code.google.com/p/android/issues/detail?id=78262

Чтобы исправить это, juste переопределит его этими двумя файлами https://github.com/lopespm/quick-fix-switchcompat-resources Добавьте его в свой каталог drawable-hdpi

XML

 <android.support.v7.widget.SwitchCompat android:id="@+id/dev_switch_show_dev_only" android:layout_width="wrap_content" android:layout_height="wrap_content" /> 

И ничего не было на Java

 <android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/adamSwitch" android:textColor="@color/top_color" android:textAppearance="@color/top_color" android:gravity="center" app:showText="true" app:theme="@style/Custom.Widget.SwitchCompat" app:switchPadding="5dp" /> 

В стиле.xml

 <style name="Custom.Widget.SwitchCompat" parent="Widget.AppCompat.CompoundButton.Switch" > <item name="android:textColorPrimary">@color/blue</item> <!--textColor on activated state --> </style>