Изменение" on " цвета переключателя



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



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



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

569   15  

15 ответов:

на данный момент лучше использовать SwitchCompat из AppCompat.библиотека В7. Затем вы можете использовать простой стиль, чтобы изменить цвет ваших компонентов.

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>

ref: Блог Разработчиков Android

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

стиль

 <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>

цвета

enter image description here

планировка

<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" />

результат

см. изменение цветов для включения и отключения переключателя

enter image description here

это работает для меня (требуется 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);

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

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

обновление для 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);

обновление для 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);
}

создать пользовательский переключатель и переопределить 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();
            }
        }
    }
}

чтобы изменить стиль переключателя без использования стиля.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

В то время как ответ по Субхорду является правильным, это на самом деле не отвечает на вопрос о том, как установить цвет "on", не затрагивая также другие виджеты. Для этого используйте ThemeOverlay в стилях.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" ... />

при этом это повлияет только на цвет вид, который вы хотите применить его.

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

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);
    }
}

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

 android:thumb="your drawable here"

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

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

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

<style name="BaseAppTheme" parent="Material.Theme">
    ...
    <item name="android:colorControlActivated">@color/color_switch</item>
</style>

решение, предложенное от arlomedia, сработало для меня. О его проблеме extraspace я решил удалить все прокладки к коммутатору.

EDIT

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

в файле макета мой коммутатор находится внутри линейного макета и после 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).

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

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

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

<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>    

попробуйте найти правильный ответ здесь:селектор на фоне цвета TextView. В двух словах вы должны создать форму в XML с цветом, а затем назначить его в состояние "проверено" в селекторе.

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

Comments

    Ничего не найдено.