Вопрос по togglebutton, android – Изменить «вкл» цвет переключателя

111

Я использую стандартный элемент управления Switch с темой holo.light в приложении ICS.

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

Это должно быть легко, но я не могу понять, как это сделать.

Я действительно не вижу другого способа, кроме как скопировать соответствующие ресурсы платформы (файлы селектора и * .png) и изменить «на». состояние рисования. Не забудьте указатьSwitch на этот пользовательский селектор потом. MH.

Ваш Ответ

15   ответов
44

Это работает для меня (требуется Android 4.1):

Switch switchInput = new Switch(this);
int colorOn = 0xFF323E46;
int colorOff = 0xFF666666;
int colorDisabled = 0xFF333333;
StateListDrawable thumbStates = new StateListDrawable();
thumbStates.addState(new int[]{android.R.attr.state_checked}, new ColorDrawable(colorOn));
thumbStates.addState(new int[]{-android.R.attr.state_enabled}, new ColorDrawable(colorDisabled));
thumbStates.addState(new int[]{}, new ColorDrawable(colorOff)); // this one has to come last
switchInput.setThumbDrawable(thumbStates);

Обратите внимание, что & quot; default & quot; состояние должно быть добавлено последним, как показано здесь.

Единственная проблема, которую я вижу, заключается в том, что «большой палец» переключателя теперь кажется больше, чем фон или «дорожка» выключателя. Я думаю, это потому, что я все еще использую изображение дорожки по умолчанию, вокруг которого есть свободное место. Однако, когда я попытался настроить изображение дорожки, используя эту технику, мой переключатель, как оказалось, имел высоту 1 пиксель с появлением лишь небольшого количества включенного / выключенного текста. Для этого должно быть решение, но я еще не нашел его ...

Update for Android 5

В Android 5 приведенный выше код заставляет переключатель полностью исчезнуть. Мы должны быть в состоянии использовать новыйsetButtonTintList метод, но это, кажется, игнорируется для переключателей. Но это работает:

ColorStateList buttonStates = new ColorStateList(
        new int[][]{
                new int[]{-android.R.attr.state_enabled},
                new int[]{android.R.attr.state_checked},
                new int[]{}
        },
        new int[]{
                Color.BLUE,
                Color.RED,
                Color.GREEN
        }
);
switchInput.getThumbDrawable().setTintList(buttonStates);
switchInput.getTrackDrawable().setTintList(buttonStates);

Update for Android 6-7

Как сказал Херувим в комментариях, мы можем использовать новыеsetThumbTintList и это сработало, как и ожидалось для меня. Мы также можем использоватьsetTrackTintList, но это применяет цвет как смесь, в результате чего она темнее, чем ожидалось в темных цветовых темах, и светлее, чем ожидалось в светлых цветовых темах, иногда до такой степени, что она становится невидимой. В Android 7 я смог минимизировать это изменение, переопределив трекрежим оттенка, но я не смог получить приличные результаты от этого в Android 6. Возможно, вам придется определить дополнительные цвета, которые компенсируют смешивание. (Вам когда-нибудь казалось, что Google не хочет, чтобы мы настраивали внешний вид наших приложений?)

ColorStateList thumbStates = new ColorStateList(
        new int[][]{
                new int[]{-android.R.attr.state_enabled},
                new int[]{android.R.attr.state_checked},
                new int[]{}
        },
        new int[]{
                Color.BLUE,
                Color.RED,
                Color.GREEN
        }
);
switchInput.setThumbTintList(thumbStates);
if (Build.VERSION.SDK_INT >= 24) {
    ColorStateList trackStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_enabled},
                    new int[]{}
            },
            new int[]{
                    Color.GRAY,
                    Color.LTGRAY
            }
    );
    switchInput.setTrackTintList(trackStates);
    switchInput.setTrackTintMode(PorterDuff.Mode.OVERLAY);
}
Пожалуйста, отредактируйте ответ, чтобы включить решение DrawableCompat. Работает отлично!
Получил, что DrawableCompat.setTintList позволит ему работать на предыдущих устройствах. Я вызываю: DrawableCompat.setTintList (switchCompat.getThumbDrawable (), foregroundState);
API 23+:switchInput.setThumbTintList(buttonStates);  работает и для нуги. API 21-22: используйте DrawableCompat в соответствии с рекомендациями @Alexey.switchInput.setButtonTintList(buttonStates); не работал для меня, он не окрашивал состояния для моего коммутатора. API ниже 21:switchInput.getThumbDrawable().setColorFilter(someColor, PorterDuff.Mode.SrcIn);    Это сработало для меня. Я также работал с Xamarin, поэтому, если вы используете Xamarin.Forms, переведите их в C # в средствах визуализации Android.
Я использую подход getThumbDrawable / getTrackDrawable для создания переключателя, в котором оба состояния имеют одинаковый цвет - иными словами, переключатель не включает и не отключает что-то, а используется для выбора между двумя альтернативами.
194

Поздно на вечеринку, но я так и сделал

Style

 <style name="SCBSwitch" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlActivated">#46bdbf</item>

        <!-- inactive thumb color -->
        <item name="colorSwitchThumbNormal">#f1f1f1
        </item>

        <!-- inactive track color (30% transparency) -->
        <item name="android:colorForeground">#42221f1f
        </item>
    </style>

Colors

enter image description here

Layout

<android.support.v7.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:checked="false"
    android:theme="@style/SCBSwitch" />

Result

См изменение цвета для включения и выключения переключателя

enter image description here

это работает использовать Android: тема вместо стиля.
@MaksimKniazev Вы должны использоватьSwitchCompat ;)
Это не работает
Неактивный цвет переключателя не меняется. ..
Хорошо, за исключением colorControlActivation - он не устанавливает цвет дорожки, только цвет большого пальца.
5

В Android Lollipop и выше определите его в стиле вашей темы:

<style name="BaseAppTheme" parent="Material.Theme">
    ...
    <item name="android:colorControlActivated">@color/color_switch</item>
</style>
работал на меня! Спасибо
Проблема с этим решением состоит в том, что оно также меняет цвета моих выбранных текстовых сообщений, что не то, что я хочу.
@ Codewing Конечно, будет. Потому что это установлено в глобальном предпочтении стиля. Чтобы достичь своей цели, нужно найти идентификатор представления целевого представления и изменить его атрибуты.
Хорошо, это "для" вкл. " позиция. Как насчет изменения цвета большого пальца для "Выкл"? позиция?
5

Решение, предложенное Arlomedia, сработало для меня. По поводу его вопроса о лишнем пространстве я решил убрать все прокладки с переключателя.

РЕДАКТИРОВАТЬ

Как и просил, вот что у меня есть.

В файле макета мой переключатель находится внутри линейного макета и после TextView.

<LinearLayout
        android:id="@+id/myLinearLayout"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal|center"
        android:gravity="right"
        android:padding="10dp"
        android:layout_marginTop="0dp"
        android:background="@drawable/bkg_myLinearLayout"
        android:layout_marginBottom="0dp">
        <TextView
            android:id="@+id/myTextForTheSwitch"
            android:layout_height="wrap_content"
            android:text="@string/TextForTheSwitch"
            android:textSize="18sp"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal|center"
          ,  android:gravity="right"
            android:layout_width="wrap_content"
            android:paddingRight="20dp"
            android:textColor="@color/text_white" />
        <Switch
            android:id="@+id/mySwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textOn="@string/On"
            android:textOff="@string/Off"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_toRightOf="@id/myTextForTheSwitch"
            android:layout_alignBaseline="@id/myTextForTheSwitch"
            android:gravity="right" />
    </LinearLayout>

Поскольку я работаю с Xamarin / Monodroid (мин. Android 4.1), мой код:

Android.Graphics.Color colorOn = Android.Graphics.Color.Green;
Android.Graphics.Color colorOff = Android.Graphics.Color.Gray;
Android.Graphics.Color colorDisabled = Android.Graphics.Color.Green;

StateListDrawable drawable = new StateListDrawable();
drawable.AddState(new int[] { Android.Resource.Attribute.StateChecked }, new ColorDrawable(colorOn));
drawable.AddState(new int[] { -Android.Resource.Attribute.StateEnabled }, new ColorDrawable(colorDisabled));
drawable.AddState(new int[] { }, new ColorDrawable(colorOff));

swtch_EnableEdit.ThumbDrawable = drawable;

swtch_EnableEdit предварительно определен так (Xamarin):

Switch swtch_EnableEdit = view.FindViewById<Switch>(Resource.Id.mySwitch);

Я не устанавливаю все отступы и не вызываю .setPadding (0, 0, 0, 0).

Протестировано в Xamarin с использованием библиотеки AppCompat для таргетинга 5.x, и это сработало, как рекламировалось.
Можете ли вы предоставить код для этого? Я попытался switchInput.setPadding (0, 0, 0, 0), но ничего не изменилось.
17

Хотя ответ SubChord является правильным, он действительно не отвечает на вопрос о том, как установить & quot; на & quot; цвет, не влияя также на другие виджеты. Для этого используйтеThemeOverlay в styles.xml:

<style name="ToggleSwitchTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/green_bright</item>
</style>

И сослаться на это в вашем переключателе:

<android.support.v7.widget.SwitchCompat
  android:theme="@style/ToggleSwitchTheme" ... />

При этом он влияет ТОЛЬКО на цвет представлений, к которым вы хотите его применить.

По какой-то причине мне также пришлось установить & quot; colorControlActivation & quot; к тому же значению, но в POC, было достаточно использовать «colorAccent». Как так?
2

Вы можете попробовать эту библиотеку, легко изменить цвет для кнопки переключения.
https://github.com/kyleduo/SwitchButton enter image description here

7

Создайте свое собственное 9-патч-изображение и установите его в качестве фона кнопки переключения.

http://radleymarx.com/2011/simple-guide-to-9-patch/

Да, мог бы это сделать, но наверняка должен быть более простой способ? Селекторы может быть? JamesSugrue
@Denizen, ты уверен? Если да, отправьте ответ, и я проголосую за него.
Смотрите этот ответ:stackoverflow.com/a/26712456/3841420
Нет, проще нет. Вы не можете волшебным образом изменить цвет изображения :)
Хорошая точка зрения. Я не полностью понял, как это работает, пока не посмотрел глубже. JamesSugrue
16

Я решил это, обновив Цветовой фильтр, когда состояние переключателя изменилось ...

public void bind(DetailItem item) {
    switchColor(item.toggle);
    listSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                switchColor(b);
        }
    });
}

private void switchColor(boolean checked) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        listSwitch.getThumbDrawable().setColorFilter(checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY);
        listSwitch.getTrackDrawable().setColorFilter(!checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY);
    }
}
Работает как шарм, спасибо!
2

Я не знаю, как это сделать из Java, но если у вас есть стиль, определенный для вашего приложения, вы можете добавить эту строку в свой стиль, и у вас будет нужный мне цвет, я использовал # 3F51B5

<color name="ascentColor">#3F51B5</color>
2

Вы можете сделать собственный стиль для переключателя виджета  которые используют цветовой акцент в качестве по умолчанию, когда делают собственный стиль для него

<style name="switchStyle" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimary</item>    <!-- set your color -->
</style>    
26

Чтобы изменить стиль Switch без использования style.xml или Java-кода, вы можете настроить переход на макет XML:

<Switch
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:thumbTint="@color/blue"
        android:trackTint="@color/white"
        android:checked="true"
        android:layout_height="wrap_content" />

Это атрибутandroid:thumbTint а такжеandroid:trackTint что позволило вам настроить цвет

Это визуальный результат для этого XML:

enter image description here

@norbDEV использует app: thumbTint и app: trackTint с SwitchCompat из библиотеки AppCompat.v7 для более низкого уровня API.
& quot; Атрибут thumbTint используется только в API уровня 21 и выше & quot;
Это работает, но что, если вы хотите изменить цвет большого пальца в зависимости от того, включен он или нет?
Это изменяет цвет большого пальца, независимо от того, включен он или выключен.
12

Может быть, уже немного поздно, но для кнопок переключателей кнопка toogle не является ответом, вы должны изменить drawable в параметре xml переключателя:

 android:thumb="your drawable here"
1

Попробуйте найти правильный ответ здесь:Селектор на цвет фона TextView. In two words you should create Shape in XML with color and then assign it to state "checked" in your selector.

Вам просто нужно установить селектор в качестве фонового ресурса
Хорошее решение, но знаете ли вы, как мы можем динамически менять цвет?
27

Создайте пользовательский переключатель и переопределите setChecked для изменения цвета:

  public class SwitchPlus extends Switch {

    public SwitchPlus(Context context) {
        super(context);
    }

    public SwitchPlus(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SwitchPlus(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setChecked(boolean checked) {
        super.setChecked(checked);
        changeColor(checked);
    }

    private void changeColor(boolean isChecked) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            int thumbColor;
            int trackColor;

            if(isChecked) {
                thumbColor = Color.argb(255, 253, 153, 0);
                trackColor = thumbColor;
            } else {
                thumbColor = Color.argb(255, 236, 236, 236);
                trackColor = Color.argb(255, 0, 0, 0);
            }

            try {
                getThumbDrawable().setColorFilter(thumbColor, PorterDuff.Mode.MULTIPLY);
                getTrackDrawable().setColorFilter(trackColor, PorterDuff.Mode.MULTIPLY);
            }
            catch (NullPointerException e) {
                e.printStackTrace();
            }
        }
    }
}
Первый пост, который на самом деле помог мне достичь пользовательского цвета для переключения материалов без использования стиля или тем. Спасибо !
Ницца. У меня уже был свой настроенный Switch, поэтому мне пришлось только переопределить метод setChecked, и все они автоматически изменили свои цвета. Спасибо из Испании.
82

at.v7. Затем вы можете использовать простой стиль, чтобы изменить цвет ваших компонентов.

values/themes.xml:

<style name="Theme.MyTheme" 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>

ссылка:Блог разработчиков Android

EDIT:

Способ его правильного применения - черезandroid:theme="@style/Theme.MyTheme" and also this can be applied to parent styles such as EditTexts, RadioButtons, Switches, CheckBoxes and ProgressBars:

<style name="My.Widget.ProgressBar" parent="Widget.AppCompat.ProgressBar">

<style name="My.Widget.Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">
& APOS; на & APOS; являетсяcolorAccent, "выключен" являетсяcolorSwitchThumbNormal, При использованииAppCompat тема, которую нужно использоватьSwitchCompat скорее, чемSwitch, Если вы используете SDK 23+, вы можете использоватьandroid:thumbTint а такжеandroid:thumbTintMode сColorStateList.
Хотя это не применимо в то время, это должен быть принятый ответ!
Это сработало после того, как я использовал SwitchCompat вместо Switch.
@Tom plz будет отвечать тем "андроидам: thumbTint" все будет работать на устройствах & lt; 23
Я попробовал все это, и ни один из них не изменил цвет "на" состояние для моего выключателя.

Похожие вопросы