Thay đổi màu sắc trên nền màu của một công tắc

Tôi đang sử dụng điều khiển Chuyển đổi tiêu chuẩn với chủ đề holo.light trong ứng dụng ICS.

Tôi muốn thay đổi màu được tô sáng hoặc trên trạng thái của Nút Chuyển đổi từ màu xanh nhạt tiêu chuẩn sang màu xanh lục.

Điều này sẽ dễ dàng, nhưng tôi dường như không thể tìm ra cách để làm điều đó.

Đến bây giờ, tốt hơn là sử dụng SwitchCompat từ thư viện AppCompat.v7. Sau đó, bạn có thể sử dụng kiểu dáng đơn giản để thay đổi màu sắc của các thành phần của bạn.

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: Blog nhà phát triển Android

CHỈNH SỬA :

Cách thức áp dụng chính xác là thông qua android:theme="@style/Theme.MyTheme" và cũng có thể áp dụng điều này cho các kiểu cha mẹ như EditTexts, RadioButtons, Switches, CheckBoxes và ProgressBars:

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

<style name="My.Widget.Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">

Đi dự tiệc muộn nhưng đây là cách tôi đã làm

Phong cách

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

Màu sắc

Bố trí

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

Kết quả

Xem thay đổi màu sắc để bật và tắt công tắc

Điều này phù hợp với tôi (yêu cầu 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);

Lưu ý rằng trạng thái "mặc định" cần được thêm vào cuối cùng như được hiển thị ở đây.

Vấn đề duy nhất tôi thấy là "ngón tay cái" của công tắc hiện có vẻ lớn hơn nền hoặc "rãnh" của công tắc. Tôi nghĩ đó là bởi vì tôi vẫn đang sử dụng hình ảnh theo dõi mặc định, có một số khoảng trống xung quanh nó. Tuy nhiên, khi tôi cố gắng tùy chỉnh hình ảnh theo dõi bằng kỹ thuật này, công tắc của tôi dường như có chiều cao 1 pixel chỉ với một đoạn văn bản bật / tắt xuất hiện. Phải có một giải pháp cho điều đó, nhưng tôi chưa tìm thấy nó ...

Cập nhật cho Android 5

Trong Android 5, đoạn mã trên khiến công tắc biến mất hoàn toàn. Chúng ta có thể sử dụng phương thức setButtonTintList mới , nhưng điều này dường như bị bỏ qua cho các công tắc. Nhưng điều này hoạt động:

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

Cập nhật cho Android 6-7

Như Cheruby đã nêu trong các bình luận, chúng tôi có thể sử dụng cái mới setThumbTintListvà nó hoạt động như mong đợi đối với tôi. Chúng ta cũng có thể sử dụng setTrackTintList, nhưng điều đó áp dụng màu sắc như một sự pha trộn, với kết quả là tối hơn mong đợi trong các chủ đề màu tối và sáng hơn mong đợi trong các chủ đề màu sáng, đôi khi đến mức vô hình. Trong Android 7, tôi đã có thể giảm thiểu sự thay đổi đó bằng cách ghi đè chế độ theo dõi , nhưng tôi không thể nhận được kết quả tốt từ đó trong Android 6. Bạn có thể cần xác định các màu bổ sung bù cho pha trộn. (Bạn có bao giờ có cảm giác rằng Google không muốn chúng tôi tùy chỉnh giao diện của ứng dụng của mình không?)

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

Để thay đổi kiểu Chuyển đổi mà không sử dụng mã style.xml hoặc mã Java, bạn có thể tùy chỉnh chuyển đổi thành bố cục 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" />

Đó là thuộc tính android: thumbTint và android: trackTint cho phép bạn tùy chỉnh màu sắc

Đây là kết quả trực quan cho XML này:

Tạo một tùy chỉnh Chuyển đổi và ghi đè setChecked để thay đổi màu sắc:

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

Mặc dù câu trả lời của SubChord là chính xác, nhưng thực sự không trả lời câu hỏi làm thế nào để đặt màu "bật" mà không ảnh hưởng đến các vật dụng khác. Để thực hiện việc này, hãy sử dụng một ThemeOverlaytệp in tệp:

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

Và tham khảo nó trong chuyển đổi của bạn:

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

Làm như vậy nó sẽ CHỈ ảnh hưởng đến màu sắc của các khung nhìn bạn muốn áp dụng nó.

<androidx.appcompat.widget.SwitchCompat
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:thumbTint="@color/white"
                app:trackTint="@drawable/checker_track"/>

Và bên trong checker_track.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/lightish_blue" android:state_checked="true"/>
    <item android:color="@color/hint" android:state_checked="false"/>
</selector>

Tôi đã giải quyết nó bằng cách cập nhật Bộ lọc màu khi trạng thái Switch bị thay đổi ...

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

Có thể hơi muộn, nhưng đối với các nút chuyển đổi, nút toogle không phải là câu trả lời, bạn phải thay đổi mức có thể rút ra trong tham số xml của công tắc:

 android:thumb="your drawable here"

làm cho "newthumb.xml" có thể vẽ được

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/Green" android:state_checked="true"/>
    <item android:color="@color/Red" android:state_checked="false"/>
</selector>

và tạo "newtrack.xml" có thể vẽ

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/black" android:state_checked="true"/>
        <item android:color="@color/white" android:state_checked="false"/>
    </selector>

và thêm nó vào Switch:

<Switch
        android:trackTint="@drawable/newtrack"
        android:thumbTint="@drawable/newthumb"
         />

Trong Android Lollipop trở lên, hãy xác định nó theo phong cách chủ đề của bạn:

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

Tạo hình ảnh 9 miếng của riêng bạn và đặt nó làm nền của nút chuyển đổi.

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

Các giải pháp được đề xuất từ ​​arlomedia làm việc cho tôi. Về vấn đề không gian mở rộng của anh ấy, tôi đã giải quyết việc loại bỏ tất cả các phần đệm cho công tắc.

BIÊN TẬP

Theo yêu cầu, đây là những gì tôi có.

Trong tệp bố cục, công tắc của tôi nằm trong bố cục tuyến tính và sau 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>

Vì tôi đang làm việc với Xamarin / Monodroid (tối thiểu Android 4.1) nên mã của tôi là:

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 trước đây được định nghĩa như thế này (Xamarin):

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

Tôi không đặt ở tất cả các phần đệm và tôi không gọi .setPadding (0, 0, 0, 0).

bạn có thể tạo kiểu tùy chỉnh cho tiện ích chuyển đổi sử dụng dấu màu làm mặc định khi thực hiện kiểu tùy chỉnh cho nó

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

Bạn có thể thử lib này, dễ dàng thay đổi màu cho nút chuyển đổi.
https://github.com/kyleduo/SwitchButton

Hãy thử tìm ra câu trả lời đúng tại đây: Công cụ chọn màu nền của TextView . Trong hai từ, bạn nên tạo Shape trong XML bằng màu sắc và sau đó gán nó cho trạng thái "được kiểm tra" trong bộ chọn của bạn.

Tôi không biết làm thế nào để làm điều đó từ java, nhưng nếu bạn có một phong cách được xác định cho ứng dụng của mình, bạn có thể thêm dòng này theo phong cách của bạn và bạn sẽ có màu mong muốn cho tôi, tôi đã sử dụng # 3F51B5

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

Cách dễ nhất là xác định sắc độ theo dõi và đặt chế độ màu thành src_over để loại bỏ độ trong suốt 30%.

android:trackTint="@drawable/toggle_style"
android:trackTintMode="src_over"

toggle_style.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/informationDefault"
        android:state_checked="true"
        />
    <item android:color="@color/textDisabled" android:state_checked="false"/>
</selector>

Ngoài ra, ngoài các câu trả lời hiện có: bạn có thể tùy chỉnh ngón tay cái và theo dõi bằng cách sử dụng bộ chọn trong res/colorthư mục, ví dụ:

switch_track_selector

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/lightBlue"
        android:state_checked="true" />
    <item android:color="@color/grey"/>
</selector>

switch_thumb_selector

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/darkBlue"
        android:state_checked="true" />
    <item android:color="@color/white"/>
</selector>

Sử dụng các công cụ chọn này để tùy chỉnh các gợi ý theo dõi và ngón tay cái:

<androidx.appcompat.widget.SwitchCompat
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:trackTint="@color/switch_track_selector"
    app:thumbTint="@color/switch_thumb_selector"/>

Hãy nhớ rằng nếu bạn sử dụng standart Switchvà androidkhông gian tên cho các thuộc tính này, nó sẽ chỉ hoạt động cho API 23 trở lên, vì vậy hãy sử dụng SwitchCompatvới appkhông gian tênxmlns:app="http://schemas.android.com/apk/res-auto" làm giải pháp phổ quát.

Kết quả:

Trong xml, bạn có thể thay đổi màu như:

 <androidx.appcompat.widget.SwitchCompat
    android:id="@+id/notificationSwitch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:checked="true"
    app:thumbTint="@color/darkBlue"
    app:trackTint="@color/colorGrey"/>

Tự động bạn có thể thay đổi như:

Switch.thumbDrawable.setColorFilter(ContextCompat.getColor(requireActivity(), R.color.darkBlue), PorterDuff.Mode.MULTIPLY)

Giải pháp cho Android Studio 3.6:

yourSwitch.setTextColor(getResources().getColor(R.color.yourColor));

Thay đổi màu văn bản của giá trị được xác định trong tệp XML màu (yourColor).