ปุ่ม Android มาตรฐานที่มีสีแตกต่างกัน

ฉันต้องการเปลี่ยนสีของปุ่ม Android มาตรฐานเล็กน้อยเพื่อให้ตรงกับตราสินค้าของลูกค้า

วิธีที่ดีที่สุดที่ฉันพบว่าทำเช่นนี้คือการเปลี่ยนButtondrawable ของ drawable ที่อยู่ในres/drawable/red_button.xml:

<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/red_button_pressed" />
    <item android:state_focused="true" android:drawable="@drawable/red_button_focus" />
    <item android:drawable="@drawable/red_button_rest" />
</selector>

แต่การทำนั้นต้องการให้ฉันสร้างสาม drawable ที่แตกต่างกันสำหรับแต่ละปุ่มฉันต้องการปรับแต่ง (หนึ่งสำหรับปุ่มที่เหลือหนึ่งเมื่อเน้นและหนึ่งเมื่อกด) ดูเหมือนจะซับซ้อนและไม่แห้งเกินที่ฉันต้องการ

สิ่งที่ฉันอยากทำก็คือใช้การเปลี่ยนสีเป็นปุ่ม มีวิธีที่ง่ายกว่าในการเปลี่ยนสีของปุ่มมากกว่าที่ฉันทำหรือไม่?

ฉันค้นพบว่าสิ่งนี้สามารถทำได้ในไฟล์เดียวค่อนข้างง่าย ใส่บางอย่างเช่นรหัสต่อไปนี้ในไฟล์ชื่อcustom_button.xmlแล้วตั้งค่าbackground="@drawable/custom_button"ในมุมมองปุ่มของคุณ:

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="@color/yellow1"
                android:endColor="@color/yellow2"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="@color/orange4"
                android:startColor="@color/orange5"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>

    <item>        
        <shape>
            <gradient
                android:endColor="@color/blue2"
                android:startColor="@color/blue25"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="@color/grey05" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

จากคำตอบของ Tomasz คุณสามารถตั้งค่าเงาของปุ่มทั้งหมดโดยใช้โปรแกรมโดยใช้โหมดการคูณ PorterDuff สิ่งนี้จะเปลี่ยนสีปุ่มแทนที่จะเป็นโทนสี

หากคุณเริ่มต้นด้วยปุ่มสีเทามาตรฐาน:

button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

จะให้ปุ่มแรเงาสีแดงแก่คุณ

button.getBackground().setColorFilter(0xFF00FF00, PorterDuff.Mode.MULTIPLY);

จะให้ปุ่มสีเขียวแก่คุณซึ่งค่าแรกคือสีในรูปแบบเลขฐานสิบหก

มันทำงานโดยการคูณค่าสีปุ่มปัจจุบันด้วยค่าสีของคุณ ฉันแน่ใจว่ายังมีอีกมากที่คุณสามารถทำได้กับโหมดเหล่านี้

ไมค์คุณอาจสนใจฟิลเตอร์สี

ตัวอย่าง:

button.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));

ลองนี้เพื่อให้ได้สีที่คุณต้องการ

นี่คือวิธีการแก้ปัญหาของฉันที่ดีที่สุดที่ทำงานเริ่มต้นจาก 15 โซลูชันนี้จะเก็บเอฟเฟกต์การคลิกปุ่มเริ่มต้นทั้งหมดเช่นวัสดุRippleEffectวิธีนี้ช่วยให้ผลกระทบการคลิกปุ่มเริ่มต้นทั้งหมดเช่นวัสดุฉันไม่ได้ทดสอบด้วย API ที่ต่ำกว่า แต่ควรใช้งานได้

สิ่งที่คุณต้องทำคือ:

1) สร้างสไตล์ที่เปลี่ยนแปลงเท่านั้นcolorAccent:

<style name="Facebook.Button" parent="ThemeOverlay.AppCompat">
    <item name="colorAccent">@color/com_facebook_blue</item>
</style>

ฉันแนะนำให้ใช้ThemeOverlay.AppCompatหรือหลักของคุณAppThemeเป็นผู้ปกครองเพื่อให้สไตล์ที่เหลือของคุณ

2) เพิ่มสองบรรทัดนี้ในbuttonวิดเจ็ตของคุณ:

style="@style/Widget.AppCompat.Button.Colored"
android:theme="@style/Facebook.Button"

บางครั้งสิ่งใหม่ของคุณcolorAccentไม่แสดงใน Android Studio Preview แต่เมื่อคุณเปิดแอพของคุณบนโทรศัพท์สีจะเปลี่ยนไป

วิดเจ็ตปุ่มตัวอย่าง

<Button
    android:id="@+id/sign_in_with_facebook"
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/sign_in_facebook"
    android:textColor="@android:color/white"
    android:theme="@style/Facebook.Button" />

ตอนนี้คุณสามารถใช้AppCompatButtonของ appcompat-v7 กับbackgroundTintแอ็ตทริบิวต์:

<android.support.v7.widget.AppCompatButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:backgroundTint="#ffaa00"/>

ฉันชอบคำแนะนำตัวกรองสีในคำตอบก่อนหน้านี้จาก @conjugatedirection และ @Tomasz; อย่างไรก็ตามฉันพบว่ารหัสที่ให้มาไม่ได้ใช้อย่างง่ายดายอย่างที่คาดไว้

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

จากการอ่านคำถามต้นฉบับโซลูชันที่เหมาะสมที่สุดจะเป็นสิ่งที่ไม่เกี่ยวข้องกับภาพใด ๆ คำตอบที่ได้รับการยอมรับโดยใช้ custom_button.xml จาก @emmby น่าจะเหมาะสมกว่าฟิลเตอร์สีหากเป็นเป้าหมายของคุณ ในกรณีของฉันฉันเริ่มต้นด้วยภาพ png จากผู้ออกแบบ UI ว่าปุ่มควรมีลักษณะอย่างไร หากฉันตั้งค่าพื้นหลังปุ่มเป็นภาพนี้ความคิดเห็นไฮไลต์เริ่มต้นจะหายไปอย่างสมบูรณ์ รหัสนี้แทนพฤติกรรมที่มีลักษณะพิเศษมืดโปรแกรมโดย

button.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 0x6D6D6D sets how much to darken - tweak as desired
                setColorFilter(v, 0x6D6D6D);
                break;
            // remove the filter when moving off the button
            // the same way a selector implementation would 
            case MotionEvent.ACTION_MOVE:
                Rect r = new Rect();
                v.getLocalVisibleRect(r);
                if (!r.contains((int) event.getX(), (int) event.getY())) {
                    setColorFilter(v, null);
                }
                break;
            case MotionEvent.ACTION_OUTSIDE:
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                setColorFilter(v, null);
                break;
        }
        return false;
    }

    private void setColorFilter(View v, Integer filter) {
        if (filter == null) v.getBackground().clearColorFilter();
        else {
            // To lighten instead of darken, try this:
            // LightingColorFilter lighten = new LightingColorFilter(0xFFFFFF, filter);
            LightingColorFilter darken = new LightingColorFilter(filter, 0x000000);
            v.getBackground().setColorFilter(darken);
        }
        // required on Android 2.3.7 for filter change to take effect (but not on 4.0.4)
        v.getBackground().invalidateSelf();
    }
});

ฉันแยกสิ่งนี้เป็นคลาสแยกต่างหากสำหรับแอปพลิเคชันไปยังปุ่มหลายปุ่ม - แสดงเป็นคลาสภายในที่ไม่ระบุชื่อเพื่อรับแนวคิด

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true" android:drawable="@drawable/button_focused"/>
    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>

    <item>
        <shape>
            <gradient android:startColor="#ff00ff00" android:endColor="#bb00ff00" android:angle="270" />
            <stroke android:width="1dp" android:color="#bb00ff00" />
            <corners android:radius="3dp" />
            <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

</selector>

ทางออกที่สั้นที่สุดที่ทำงานกับ Android ทุกรุ่น:

<Button
     app:backgroundTint="@color/my_color"

หมายเหตุ / ข้อกำหนด :

• ใช้app:namespace และไม่android: namespace!

• รุ่น appcompat> 24.2.0

  การพึ่งพา {คอมไพล์ 'com.android.support:appcompat-v7:25.3.1'}

คำอธิบาย :

ฉันใช้วิธีนี้

style.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:colorPrimaryDark">#413152</item>
    <item name="android:colorPrimary">#534364</item>
    <item name="android:colorAccent">#534364</item>
    <item name="android:buttonStyle">@style/MyButtonStyle</item>
</style>

<style name="MyButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">#534364</item>
    <item name="android:textColor">#ffffff</item>
</style>

ดังที่คุณเห็นจากด้านบนฉันใช้สไตล์ที่กำหนดเองสำหรับปุ่มของฉัน สีของปุ่มสอดคล้องกับสีที่ถูกเน้น ฉันพบว่าวิธีนี้ดีกว่าการตั้งค่าandroid:backgroundเนื่องจากฉันจะไม่สูญเสียระลอกคลื่นที่ Google มอบให้

มีวิธีที่ง่ายกว่ามากในขณะนี้: android-holo-colors.com

มันจะช่วยให้คุณเปลี่ยนสีของ drawables holo ทั้งหมด (ปุ่มสปินเนอร์, ... ) ได้อย่างง่ายดาย คุณเลือกสีแล้วดาวน์โหลดไฟล์ zip ที่มี drawable สำหรับความละเอียดทั้งหมด

ใช้วิธีนี้:

buttonOBJ.getBackground().setColorFilter(Color.parseColor("#YOUR_HEX_COLOR_CODE"), PorterDuff.Mode.MULTIPLY);

ใน การใช้งาน<Button> android:background="#33b5e5"หรือดีกว่าandroid:background="@color/navig_button"

DroidUXห้องสมุดองค์ประกอบมีColorButtonเครื่องมือที่มีสีที่สามารถเปลี่ยนแปลงได้อย่างง่ายดายทั้งผ่าน XML นิยามและโปรแกรมในเวลาทำงานเพื่อให้คุณยังสามารถช่วยให้ผู้ใช้สามารถตั้งค่าปุ่มสี / ธีมหากแอปของคุณให้มัน

คุณยังสามารถใช้เครื่องมือออนไลน์นี้เพื่อปรับแต่งปุ่มของคุณhttp://angrytools.com/android/button/ และใช้android:background="@drawable/custom_btn"เพื่อกำหนดปุ่มที่กำหนดเองในเลย์เอาต์ของคุณ

คุณสามารถตั้งค่าธีมของปุ่มเป็นแบบนี้

<style name="AppTheme.ButtonBlue" parent="Widget.AppCompat.Button.Colored">
 <item name="colorButtonNormal">@color/HEXColor</item>
 <item name="android:textColor">@color/HEXColor</item>
</style>

วิธีง่ายๆคือการกำหนดคลาสปุ่มแบบกำหนดเองซึ่งยอมรับคุณสมบัติทั้งหมดที่คุณต้องการเช่นรัศมี, การไล่ระดับสี, สีที่ถูกกด, สีปกติ ฯลฯ จากนั้นใช้เพียงแค่นั้นในรูปแบบ XML ของคุณแทนที่จะตั้งค่าพื้นหลังโดยใช้ XML ตัวอย่างอยู่ที่นี่

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

ผลลัพธ์ (ไม่ได้ใช้ตัวเลือกพื้นหลัง)

ปุ่มปกติ

ปุ่มกด

วิธีที่ฉันทำปุ่มสไตล์ต่าง ๆ ที่ใช้งานได้ค่อนข้างดีก็คือการซับคลาสวัตถุ Button และใช้ฟิลเตอร์สี นอกจากนี้ยังจัดการสถานะที่เปิดใช้งานและปิดการใช้งานด้วยการใช้อัลฟากับปุ่ม

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LightingColorFilter;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.Button;

public class DimmableButton extends Button {

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

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

    public DimmableButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @SuppressWarnings("deprecation")
    @Override
    public void setBackgroundDrawable(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackgroundDrawable(layer);
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    public void setBackground(Drawable d) {
        // Replace the original background drawable (e.g. image) with a LayerDrawable that
        // contains the original drawable.
        DimmableButtonBackgroundDrawable layer = new DimmableButtonBackgroundDrawable(d);
        super.setBackground(layer);
    }

    /**
     * The stateful LayerDrawable used by this button.
     */
    protected class DimmableButtonBackgroundDrawable extends LayerDrawable {

        // The color filter to apply when the button is pressed
        protected ColorFilter _pressedFilter = new LightingColorFilter(Color.LTGRAY, 1);
        // Alpha value when the button is disabled
        protected int _disabledAlpha = 100;
        // Alpha value when the button is enabled
        protected int _fullAlpha = 255;

        public DimmableButtonBackgroundDrawable(Drawable d) {
            super(new Drawable[] { d });
        }

        @Override
        protected boolean onStateChange(int[] states) {
            boolean enabled = false;
            boolean pressed = false;

            for (int state : states) {
                if (state == android.R.attr.state_enabled)
                    enabled = true;
                else if (state == android.R.attr.state_pressed)
                    pressed = true;
            }

            mutate();
            if (enabled && pressed) {
                setColorFilter(_pressedFilter);
            } else if (!enabled) {
                setColorFilter(null);
                setAlpha(_disabledAlpha);
            } else {
                setColorFilter(null);
                setAlpha(_fullAlpha);
            }

            invalidateSelf();

            return super.onStateChange(states);
        }

        @Override
        public boolean isStateful() {
            return true;
        }
    }

}

ค่า \ styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="RedAccentButton" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">#ff0000</item>
</style>

แล้ว:

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="text" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="text" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="text"
    android:theme="@style/RedAccentButton" />

<Button
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:enabled="false"
    android:text="text"
    android:theme="@style/RedAccentButton" />

ตามแนวทางการออกแบบวัสดุคุณจะต้องใช้สไตล์ตามรหัสด้านล่าง

<style name="MyButton" parent="Theme.AppCompat.Light>
    <item name="colorControlHighlight">#F36F21</item>
    <item name="colorControlHighlight">#FF8D00</item>
</style>

และในรูปแบบเพิ่มคุณสมบัตินี้ไปที่ปุ่มของคุณ

    android:theme="@style/MyButton"

ง่าย .. เพิ่มการพึ่งพานี้ในโครงการของคุณและสร้างปุ่มด้วย 1. รูปร่างใดก็ได้ 2. สีใดก็ได้ 3. เส้นขอบใด ๆ 4. ด้วยเอฟเฟกต์วัสดุ

https://github.com/manojbhadane/QButton

<com.manojbhadane.QButton
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="OK"
       app:qb_backgroundColor="@color/green"
       app:qb_radius="100"
       app:qb_strokeColor="@color/darkGreen"
       app:qb_strokeWidth="5" />