เปลี่ยนสี“ เปิด” ของสวิตช์

ฉันกำลังใช้สวิตช์ควบคุมมาตรฐานกับชุดรูปแบบ holo.light ในแอป ICS

ฉันต้องการเปลี่ยนสีที่ไฮไลต์หรือสีสถานะของปุ่มสลับจากสีน้ำเงินมาตรฐานเป็นสีเขียว

นี่ควรจะง่าย แต่ฉันไม่สามารถหาวิธีที่จะทำได้

ณ ตอนนี้มันจะดีกว่าที่จะใช้ SwitchCompat จากไลบรารี AppCompat.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

แก้ไข :

วิธีที่ควรใช้อย่างถูกต้องคือผ่านandroid:theme="@style/Theme.MyTheme" และยังสามารถใช้กับลักษณะหลักเช่น EditTexts, RadioButtons, Switch, CheckBoxes และ ProgressBars:

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

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

มาปาร์ตี้ช้า แต่นี่เป็นวิธีที่ฉันทำ

สไตล์

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

สี

แบบ

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

ผลลัพธ์

ดูการเปลี่ยนสีสำหรับเปิดใช้งานและปิดการใช้งานสวิตช์

สิ่งนี้ใช้ได้สำหรับฉัน (ต้องใช้ 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);

โปรดทราบว่าจะต้องเพิ่มสถานะ "เริ่มต้น" ครั้งล่าสุดตามที่แสดงที่นี่

ปัญหาเดียวที่ฉันเห็นคือตอนนี้ "thumb" ของสวิตช์นั้นใหญ่กว่า background หรือ "track" ของสวิตช์ ฉันคิดว่าเป็นเพราะฉันยังคงใช้อิมเมจแทร็กเริ่มต้นซึ่งมีพื้นที่ว่างอยู่รอบ ๆ อย่างไรก็ตามเมื่อฉันพยายามปรับแต่งภาพแทร็กโดยใช้เทคนิคนี้สวิตช์ของฉันมีความสูง 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);
}

ในการเปลี่ยนสไตล์สวิทช์โดยไม่ต้องใช้ 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 นี้:

สร้าง Switch ที่กำหนดเองและแทนที่ 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();
            }
        }
    }
}

ในขณะที่คำตอบโดย SubChord ถูกต้องไม่ตอบคำถามเกี่ยวกับวิธีการตั้งค่าสี "เป็น" โดยไม่ส่งผลกระทบต่อวิดเจ็ตอื่น ๆ หากต้องการทำสิ่งนี้ให้ใช้ a 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" ... />

การทำเช่นนี้จะส่งผลต่อสีของมุมมองที่คุณต้องการใช้เท่านั้น

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

และภายใน 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>

ฉันแก้ไขได้โดยการอัพเดตตัวกรองสีเมื่อสถานะสวิทช์เปลี่ยนไป ...

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"

ทำให้ drawable "newthumb.xml"

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

และทำให้ drawable "newtrack.xml"

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

และเพิ่มใน Switch:

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

ใน Android Lollipop ขึ้นไปให้นิยามในสไตล์ของคุณ:

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

สร้างอิมเมจ 9 แพตช์ของคุณเองและตั้งเป็นพื้นหลังของปุ่มสลับ

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

วิธีแก้ปัญหาที่แนะนำจาก arlomedia ใช้ได้สำหรับฉัน เกี่ยวกับปัญหาเรื่อง extraspace ของเขาฉันแก้ไขการเอาส่วนขยายทั้งหมดไปที่สวิตช์

แก้ไข

ตามที่ร้องขอนี่คือสิ่งที่ฉันมี

ในไฟล์เลย์เอาต์สวิตช์ของฉันอยู่ภายในเลย์เอาต์แบบเส้นตรงและหลัง 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)

คุณสามารถสร้างสไตล์ที่กำหนดเองสำหรับวิดเจ็ตสวิตช์ที่ใช้การเน้นสีเป็นค่าเริ่มต้นเมื่อทำสไตล์ที่กำหนดเอง

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

คุณสามารถลองใช้ lib นี้ง่ายต่อการเปลี่ยนสีสำหรับปุ่มสวิทช์
https://github.com/kyleduo/SwitchButton

พยายามที่จะหาคำตอบได้ที่นี่: การเลือกสีพื้นหลังของ TextView คุณควรสร้างรูปร่างใน XML ด้วยคำสองคำจากนั้นกำหนดให้สถานะเป็น "ตรวจสอบ" ในตัวเลือกของคุณ

ฉันไม่รู้ว่าจะทำอย่างไรจาก java แต่ถ้าคุณมีสไตล์ที่กำหนดไว้สำหรับแอปของคุณคุณสามารถเพิ่มบรรทัดนี้ในสไตล์ของคุณและคุณจะมีสีที่ต้องการสำหรับฉันฉันได้ใช้ # 3F51B5

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

วิธีที่ง่ายที่สุดคือการกำหนดสีติดตามและการตั้งค่าโหมดสีเป็น src_over เพื่อลบความโปร่งใส 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>

นอกเหนือจากคำตอบที่มีอยู่: คุณสามารถปรับแต่งหัวแม่มือและแทร็กโดยใช้ตัวเลือกใน res/colorโฟลเดอร์ตัวอย่างเช่น:

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>

ใช้ตัวเลือกเหล่านี้เพื่อปรับแต่งสีแทร็กและนิ้วหัวแม่มือ:

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

โปรดทราบว่าหากคุณใช้รูปแบบมาตรฐานSwitchและandroidเนมสเปซสำหรับแอตทริบิวต์เหล่านี้จะใช้งานได้กับ API 23 และใหม่กว่าเท่านั้นดังนั้นใช้SwitchCompatกับappเนมสเปซxmlns:app="http://schemas.android.com/apk/res-auto"เป็นโซลูชันสากล

ผลลัพธ์:

ใน xml คุณสามารถเปลี่ยนสีเป็น:

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

แบบไดนามิกคุณสามารถเปลี่ยนเป็น:

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

โซลูชันสำหรับ Android Studio 3.6:

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

เปลี่ยนสีข้อความของ a ในค่าสีไฟล์ XML ที่กำหนด (yourColor)