सामग्री डिजाइन और AppCompat के साथ Android में रंग बटन


256

AppCompatअपडेट से पहले आज मैं Android एल में बटनों का रंग बदलने में सक्षम था, लेकिन पुराने संस्करणों पर नहीं। नए AppCompat अपडेट को शामिल करने के बाद मैं किसी भी संस्करण के लिए रंग बदलने में असमर्थ हूं, जब मैं कोशिश करता हूं कि बटन गायब हो जाए। क्या किसी को पता है कि बटन का रंग कैसे बदलना है?

निम्नलिखित तस्वीरें दिखाती हैं कि मैं क्या हासिल करना चाहता हूं:

वांछित परिणाम दिखा रहा चित्र

सफेद बटन डिफ़ॉल्ट है, लाल वही है जो मैं चाहता हूं।

यह वही है जो मैं पहले बटन के रंग को बदलने के लिए कर रहा था styles.xml:

<item name="android:colorButtonNormal">insert color here</item>

और इसे गतिशील रूप से करने के लिए:

button.getBackground().setColorFilter(getResources().getColor(insert color here), PorterDuff.Mode.MULTIPLY);

इसके अलावा मैंने थीम पेरेंट को से बदल दिया @android:style/Theme.Material.Light.DarkActionBarहैTheme.AppCompat.Light.DarkActionBar


मैंने वही कोशिश की लेकिन कुछ भी बटन का रंग नहीं बदला। मैंने एंड्रॉइड को भी हटा दिया: विशेषता के सामने से यह समर्थन लिबास से है और एंड्रॉइड नेमस्पेस का हिस्सा नहीं है
Informatic0re

यदि आप Android का उपयोग कर रहे हैं: colorButtonNormal Android 5.0 के साथ काम करता है - लेकिन यह पीछे की ओर संगत नहीं लगता है
Informatic0re

हां, ठीक वही है जो मैं अनुभव कर रहा था
mail929

मैंने यह भी पता लगाया कि उच्चारण का रंग चेकबॉक्स का रंग नहीं बदलता है, लेकिन यह पुराने संस्करणों में है
Informatic0re

प्लस उस गतिशील विधि के लिए। :)
theapache64

जवाबों:


222

आधिकारिक तौर पर समर्थन लाइब्रेरी Rev.22 (शुक्र 13 मार्च 2015) में तय किया गया। प्रासंगिक Google कोड समस्या देखें:

https://issuetracker.google.com/issues/37008632

उदाहरण का उपयोग करें

theme.xml:

<item name="colorButtonNormal">@color/button_color</item>

V21 / theme.xml

<item name="android:colorButtonNormal">@color/button_color</item>

17
क्या इसका उपयोग करने का कोई उदाहरण है? मैं सिर्फ एक बटन पर रंग कैसे सेट कर सकता हूं?
Intrications

3
@WindRider मुझे एक समस्या है, हालांकि, मैं इसका उपयोग विभिन्न रंगों के बटन बनाने के लिए करना चाहता हूं। मैं मूल रूप से बटन आधार शैली के साथ सभी बटन। रीड, बटन.ग्रीन बनाते हैं। मैंने आइटम रंगबटन सेट करने के लिए अनुरोध किया, रंग को बटन थीम के रूप में सेट किया। दुर्भाग्य से यह केवल 21 के लिए रंग बटन करता है। नीचे यह रंग को ओवरराइड नहीं करता है थीम में परिभाषित असामान्य।
डोमिक्क ४१४२

71
AppCompat 22.1.1 के साथ यह मेरे लिए 2.3.7, 4.4.4 और 5.1 पर एक बटन के लिए भी काम करता है: सेटिंग बटन android:theme="@style/ColoredButton", और स्टाइल में। xml <style name="ColoredButton" parent="Widget.AppCompat.Button"> <item name="colorButtonNormal">@color/button_yellow</item> </style>
hunyadym

2
@hunyadym, बटन के लिए एक विषय जोड़ने के लिए किसी भी कारण पर क्लिक करें। मैं इसे एक वर्कअराउंड के रूप में वर्गीकृत करूँगा जब तक कि डिज़ाइन लाइब्रेरी एक बेहतर तरीका प्रदान न करे।
खुशी हुई

3
@gladed: ऐसा लगता है कि आपके मामले में समस्या यह है: code.google.com/p/android/issues/detail?id=62795#c1
hunyadym

148

संपादित करें (22.06.2016):

जब मैंने मूल प्रतिक्रिया पोस्ट की, तब एप्टोमैट लाइब्रेरी ने सामग्री बटन का समर्थन करना शुरू कर दिया। इस पोस्ट में आप उठाए गए और फ्लैट बटन का सबसे आसान कार्यान्वयन देख सकते हैं।

मूल उत्तर:

चूँकि AppCompat बटन का समर्थन नहीं करता है फिर भी आप पृष्ठभूमि के रूप में xml का उपयोग कर सकते हैं। ऐसा करने के लिए, मैंने एंड्रॉइड के स्रोत कोड पर एक नज़र डाली और स्टाइलिंग सामग्री बटन के लिए संबंधित फ़ाइलों को पाया।

1 - स्रोत से सामग्री बटन के मूल कार्यान्वयन को देखें।

एंड्रॉइड सोर्स कोड पर btn_default_material.xml पर एक नज़र डालें ।

आप फ़ाइल को अपने प्रोजेक्ट्स में शामिल कर सकते हैं ड्रॉबल-वी 21 फोल्डर। लेकिन यहां कलर अटर को टच न करें। जिस फाइल को आपको बदलना है वह दूसरी फाइल है।

drawable-V21 / custom_btn.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="@drawable/btn_default_mtrl_shape" />
</ripple>

2 - मूल सामग्री बटन का आकार प्राप्त करें

जैसा कि आप महसूस करते हैं कि इस ड्रॉबल के अंदर एक ऐसी आकृति है जिसका उपयोग आप सोर्स कोड की इस फाइल में कर सकते हैं ।

<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/button_inset_horizontal_material"
   android:insetTop="@dimen/button_inset_vertical_material"
   android:insetRight="@dimen/button_inset_horizontal_material"
   android:insetBottom="@dimen/button_inset_vertical_material">
<shape android:shape="rectangle">
    <corners android:radius="@dimen/control_corner_material" />
    <solid android:color="?attr/colorButtonNormal" />
    <padding android:left="@dimen/button_padding_horizontal_material"
             android:top="@dimen/button_padding_vertical_material"
             android:right="@dimen/button_padding_horizontal_material"
             android:bottom="@dimen/button_padding_vertical_material" />
</shape>

3 - सामग्री बटन के आयाम प्राप्त करना

और इस फ़ाइल में आप फ़ाइल से उपयोग किए गए कुछ आयाम हैं जो आप यहां पा सकते हैं । आप पूरी फाइल को कॉपी कर सकते हैं और अपने वैल्यू फोल्डर में डाल सकते हैं । सभी बटन पर समान आकार (जो सामग्री बटन में उपयोग किया जाता है) को लागू करने के लिए यह महत्वपूर्ण है

4 - पुराने संस्करणों के लिए एक और ड्रा करने योग्य फ़ाइल बनाएं

पुराने संस्करणों के लिए आपको एक ही नाम के साथ एक और ड्रॉ करने योग्य होना चाहिए। मैं सीधे संदर्भ के बजाय आइटम इनलाइन डाल रहा हूं। आप उनका संदर्भ लेना चाह सकते हैं। लेकिन फिर से, सबसे महत्वपूर्ण बात सामग्री बटन के मूल आयाम हैं।

drawable / custom_btn.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- pressed state -->
    <item android:state_pressed="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/PRESSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- focused state -->
    <item android:state_focused="true">
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/FOCUSED_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
    
    <!-- normal state -->
    <item>
        <inset xmlns:android="http://schemas.android.com/apk/res/android"
            android:insetLeft="@dimen/button_inset_horizontal_material"
            android:insetTop="@dimen/button_inset_vertical_material"
            android:insetRight="@dimen/button_inset_horizontal_material"
            android:insetBottom="@dimen/button_inset_vertical_material">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/control_corner_material" />
                <solid android:color="@color/NORMAL_STATE_COLOR" />
                <padding android:left="@dimen/button_padding_horizontal_material"
                    android:top="@dimen/button_padding_vertical_material"
                    android:right="@dimen/button_padding_horizontal_material"
                    android:bottom="@dimen/button_padding_vertical_material" />
            </shape>
        </inset>
    </item>
</selector>

परिणाम

आपके बटन का लॉलीपॉप उपकरणों पर लहर प्रभाव होगा। पुराने संस्करणों में रिपल प्रभाव को छोड़कर बिल्कुल एक ही बटन होगा। लेकिन जब से आप विभिन्न राज्यों के लिए ड्रॉबल्स प्रदान करते हैं, वे भी स्पर्श घटनाओं (पुराने तरीके के रूप में) का जवाब देंगे।


4
हाँ बिल्कुल। यदि आप सभी बटन के लिए एक ही पृष्ठभूमि का उपयोग करते हैं और यदि आप इसे बार-बार जोड़ना नहीं चाहते हैं, तो अपनी शैलियों में एक बटन शैली परिभाषित करें। xml <style name = "ButtonStyle" parent = "android: Widget.Button"> < आइटम का नाम = "android: background"> ​​@ drawable / custom_btn </ item> </ style> और अपने विषय में बटन शैली जोड़ें <आइटम का नाम = "android: buttonStyle"> @ शैली / ButtonStyle </ आइटम
eluleci

1
मैं प्री -21 पर इस बटन को कैसे बढ़ा सकता हूं? जैसा कि मैं समझता हूं कि मुझे बटन के नीचे छाया के साथ नया आकार जोड़ना चाहिए, लेकिन वास्तव में मुझे इसे कहां रखना चाहिए?
xakz

7
बहुत परेशान है कि यह बॉक्स से बाहर समर्थित नहीं है
सैम

39
मैं आपसे पूरी तरह सहमत हूं। बटन ज्यादातर इस्तेमाल किया जाने वाला विजेट है, लेकिन यह सामग्री के लिए समर्थन पुस्तकालय में शामिल नहीं है। मुझे आश्चर्य है कि वे क्या सोच रहे थे।
eluleci

1
इसके अलावा, आपके गाइड का अनुसरण करने से ऐसा लगता है कि पृष्ठभूमि बिल्कुल दिखाई नहीं दे रही है ...
JMRboosties

111

इसे AppCompat लाइब्रेरी के v23.0.0 में बढ़ाया गया है, जिसमें अधिक थीम भी शामिल हैं

Widget.AppCompat.Button.Colored

यदि आप पहले से ही नहीं हैं, तो सबसे पहले ऐपकंपैन की निर्भरता शामिल करें

compile('com.android.support:appcompat-v7:23.0.0') {
    exclude group: 'com.google.android', module: 'support-v4'
}

अब चूंकि आपको ऐप के वी 23 का उपयोग करने की आवश्यकता है, इसलिए आपको एसडीके-वी 23 को भी लक्षित करना होगा!

    compileSdkVersion = 23
    targetSdkVersion = 23

अपने में values/theme

<item name="android:buttonStyle">@style/BrandButtonStyle</item>

अपने में values/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

अपने में values-v21/style

<style name="BrandButtonStyle" parent="Widget.AppCompat.Button.Colored">
    <item name="android:colorButtonNormal">@color/yourButtonColor</item>
    <item name="android:textColor">@color/White</item>
</style>

चूँकि आपकी बटन विषयवस्तु पर आधारित है Widget.AppCompat.Button.Colored, बटन पर पाठ का रंग डिफ़ॉल्ट रूप से सफेद है!

लेकिन ऐसा लगता है कि जब आप बटन को अक्षम करते हैं तो एक समस्या होती है, बटन अपना रंग बदलकर हल्का ग्रे कर देगा, लेकिन टेक्स्ट का रंग सफेद रहेगा!

इसके लिए एक वर्कअराउंड विशेष रूप से बटन पर पाठ का रंग सफेद करने के लिए है! जैसा कि मैंने ऊपर दिखाई गई शैली में किया है।

अब आप बस अपने बटन को परिभाषित कर सकते हैं और AppCompat को आराम करने दें :)

<Button
        android:layout_width="200dp"
        android:layout_height="48dp" />

विकलांग राज्य विकलांग अवस्था

सक्षम राज्य सक्षम राज्य

संपादित करें:

जोड़ने के लिए <Button android:theme="@style/BrandButtonStyle"/>


19
यह करने के लिए सबसे अच्छा तरीका है, अब! आप व्यक्तिगत बटनों पर शैली का उपयोग भी कर सकते हैं <Button android:theme="@style/BrandButtonStyle"/>। इसका themeगुण होना है कि styleविशेषता होना।
मोहलदो

7
@ मुहम्मद अल्फ़ाफी क्या आपके पास इसके लिए नमूना परियोजना या जिस्ट है? मैंने स्वच्छ परियोजना बनाई है और यह काम नहीं करता है: github.com/Bresiu/ThemeTest । लहिपॉप बटन में लहजे के रंग और API v16 के साथ, बटन ग्रे रहता है: i.imgur.com/EVwkpk2.png
Bresiu

4
यह केवल मुझे ठग लिया जब विशेषता Android: विषय निर्दिष्ट। मुझे बटन टैग के साथ काम करने की विशेषता शैली नहीं मिल सकी।
रे हंटर

8
V23.1 lib का उपयोग करते हुए, यह सही तरीके से काम नहीं करता है, यह हमेशा एक्सेंट रंग को bg के रूप में दिखाता है, न कि किसी को परिभाषित करते समय, जब इसे पूरे विषय पर सेट करने की कोशिश की जा रही हो
पैट्रिक फेवर

3
यहाँ पर समान मुद्दा, v23.1 पर अक्षम बटन सक्षम बटन के समान रंग है। अधिक निराश। किसी को यह पता लगाना?
अहमद

63

एंड्रॉइड सपोर्ट लाइब्रेरी 22.1.0 में, Google ने Buttonटिंट को जागरूक किया। तो, बटन के बैकग्राउंड कलर को कस्टमाइज़ करने का एक और तरीका है, backgroundTintविशेषता का उपयोग करना ।

उदाहरण के लिए,

<Button
       android:id="@+id/add_remove_button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:backgroundTint="@color/bg_remove_btn_default"
       android:textColor="@android:color/white"
       tools:text="Remove" />

1
आखिरकार! 22.1 रिलीज़ के बारे में ब्लॉग पोस्ट: android-developers.blogspot.no/2015/04/…
GuillermoMP

5
दस्तावेज़ीकरण कहता है: "जब आप अपने लेआउट में बटन का उपयोग करते हैं, तो यह स्वचालित रूप से उपयोग किया जाएगा। आपको केवल अपने विचार लिखते समय इस वर्ग को मैन्युअल रूप से उपयोग करने की आवश्यकता होगी।" developer.android.com/reference/android/support/v7/widget/… क्या इसका मतलब है कि हमें अपने सभी लेआउट और जावा कोड को मैन्युअल रूप से बदलना नहीं है?
स्टीफन

@ स्टीफन नहीं, हमें लेआउट बदलना चाहिए। chris.banes.me/2015/04/22/support-lbooks-v22-1-0
एंटोन होलोविन

बहुत बढ़िया! अब, क्या कोई AppCompatToggleButton है जो आपको ToggleButtons की पृष्ठभूमि बदलने देता है? शायद मैं कोड को कम कर सकता हूं ...
स्वोबी

19
दुर्भाग्य से यह केवल एपीआई 21+ पर काम करता है। Android: बैकग्राउंड टिंट विशेषता AppCompat लाइब्रेरी के साथ भी प्री-लॉलीपॉप पर काम नहीं करती है। प्री-लॉलीपॉप पर थीम से केवल colorButtonNormal काम करता है।
तैमूर_सी

42

रंगीन बटन का समर्थन करने के लिए नवीनतम AppCompat लाइब्रेरी (> 23.2.1 ) का उपयोग करें:

फुलाया - एक्सएमएल

AppCompat विजेट:

android.support.v7.widget.AppCompatButton

AppCompat शैली:

style="@style/Widget.AppCompat.Button.Colored"

नायब! Xml में एक कस्टम रंग सेट करने के लिए: attr का उपयोग करें: appइसके बजायandroid

(उपयोग alt+enterया उपयोग xmlns:app="http://schemas.android.com/apk/res-auto"करने की घोषणा app)

app : backgroundTint = "@ रंग / your_custom_color"

उदाहरण:

<android.support.v7.widget.AppCompatButton
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/your_custom_color"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"     
     android:text="Colored Button"/>

या इसे प्रोग्रामेटिक रूप से सेट करें - JAVA

 ViewCompat.setBackgroundTintList(your_colored_button,
 ContextCompat.getColorStateList(getContext(),R.color.your_custom_color));

आपके जावा कोड ने मेरे लिए काम किया। और मुहम्मद अलफ़फ़ी के उत्तर ने बटन के पाठ का रंग निर्धारित करने में मदद की।
माइक्रो

क्या प्रोग्राम को टिंट (पृष्ठभूमि नहीं) सेट करने का एक आसान तरीका है?
वॉल्ट

आश्चर्यजनक! 4.4.4 पर भी काम करता है! और चयनकर्ता राज्य भी काफी अच्छी तरह से बनाए रखा है!
सूद 10००

डॉक्स के अनुसार : यह स्वचालित रूप से आपके लेआउट में बटन सेट करते समय उपयोग किया जाता है। कस्टम दृश्य बनाते समय आपको केवल AppCompatButton को निर्दिष्ट करना होगा।
galeale

दिलचस्प है कि XML परिवर्तन पूरी तरह से एक टुकड़े में काम करते हैं, लेकिन गतिविधि लेआउट में नहीं। गतिविधि बटन केवल colorAccent का उपयोग करते हैं। प्रोग्राम संस्करण हालांकि काम किया।
लियोन

25

लेटेस्ट सपोर्ट लाइब्रेरी से आप बस अपनी एक्टिविटी को इनहेरिट कर सकते हैं AppCompatActivity, इसलिए यह आपके Buttonरूप में फुलाएगा AppCompatButtonऔर आपको लेआउट के हर एक बटन के कलर को स्टाइल करने का मौका देगा android:theme="@style/SomeButtonStyle", जहाँ SomeButtonStyleपर:

<style name="SomeButtonStyle" parent="@android:style/Widget.Button">
    <item name="colorButtonNormal">@color/example_color</item>
</style>

2.3.7, 4.4.1, 5.0.2 में मेरे लिए काम किया


धन्यवाद!!! मैंने "Widget.AppCompat.EditText" के लिए मूल मान को बदल दिया है क्योंकि मुझे EditText शैली को अपडेट करने की आवश्यकता है।
जुआन सरविया

3
धन्यवाद, मेरे लिए भी काम किया। उपयोग करना सुनिश्चित करें android:themeऔर नहीं style। आप यह भी जोड़ सकते हैं colorControlHighlightऔर colorControlActivated
राहेल

काम नहीं करता है, एपीआई 22, AppCompatActivity, विषय सामग्री।
लाइट

1
@AndreyUglev Theme.AppCompat.Lightइसके बजाय उपयोग करने का प्रयास करें ।
आर्टेम

नमस्ते, यह वांछित रंग बदलता है BUT छाया हटाता है।
Amio.io

16

यदि आप नीचे शैली चाहते हैं

यहां छवि विवरण दर्ज करें

इस शैली को अपने बटन जोड़ें

style="@style/Widget.AppCompat.Button.Borderless.Colored"

यदि आप इस शैली चाहते हैं

यहां छवि विवरण दर्ज करें

नीचे कोड जोड़ें

style="@style/Widget.AppCompat.Button.Colored"

1
compile 'com.android.support:appcompat-v7:23.1.0'आपको जोड़ना होगा।
प्रतीकात्मक बुटानी

1
लेकिन सवाल यह है कि विभिन्न रंगों के साथ भौतिक बटन कैसे हों, ताकि सभी विषय का प्राथमिक रंग न हो।
एपोस्ट्रोफिक्स

15

इसका उत्तर THEME शैली में नहीं है

समस्या यह है कि बटन रंग थीम के colorButtonNormal से चिपका हुआ है। मैंने कई अलग-अलग तरीकों से स्टाइल बदलने की कोशिश की है, जिनमें कोई भाग्य नहीं है। इसलिए मैंने बटन थीम बदल दी

ColorButtonNormal और colorPrimary के साथ एक थीम बनाएँ:

<style name="ThemeAwesomeButtonColor" parent="AppTheme">
    <item name="colorPrimary">@color/awesomePrimaryColor</item>
    <item name="colorButtonNormal">@color/awesomeButtonColor</item>
</style>

इस थीम को बटन में प्रयोग करें

<Button
        android:id="@+id/btn_awesome"
        style="@style/AppTheme.Button"
        android:theme="@style/ThemeAwesomeButtonColor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn_awesome"/>

"AppTheme.Button" किसी भी चीज का विस्तार हो सकता है बटन शैली यहाँ की तरह मैं पाठ रंग के लिए प्राथमिक रंग का उपयोग करता हूं:

<style name="AppTheme.Button" parent="Base.Widget.AppCompat.Button">
    ...
    <item name="android:textColor">?attr/colorPrimary</item>
    ...
</style>

और आपको किसी भी रंग में बटन मिलता है जिसे आप चाहते हैं कि सामग्री डिजाइन के अनुकूल हो।


क्या मैं अन्य शैलियों में जोड़ सकते हैं।
सागर नायक

4

मैंने अभी एक एंड्रॉइड लाइब्रेरी बनाई है, जो आपको बटन के रंग और लहर के रंग को आसानी से संशोधित करने की अनुमति देता है

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

आपको प्रत्येक बटन के लिए एक शैली बनाने की आवश्यकता नहीं है जिसे आप एक अलग रंग चाहते हैं, जिससे आप रंगों को यादृच्छिक रूप से अनुकूलित कर सकते हैं


4

Android + 4.0 में appcompat-v7: 22.2.0 के साथ मेरे लिए यह काम

अपनी शैलियों में। xml

<style name="Button.Tinted" parent="Widget.AppCompat.Button">
    <item name="colorButtonNormal">YOUR_TINT_COLOR</item>
    <item name="colorControlHighlight">@color/colorAccent</item>
    <item name="android:textColor">@android:color/white</item>
</style>

अपने लेआउट फ़ाइल में

<Button
    android:id="@+id/but_next"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/but_continue"
    android:theme="@style/Button.Tinted" />

नमस्ते, यह वांछित रंग बदलता है BUT छाया हटाता है।
Amio.io

हाय फिर, मैं देख सकता हूँ। यह अब उचित व्यवहार है।
Amio.io

आप जावा में यह कैसे कर सकते हैं?
माइक्रो

@MicroR ऊपर दिए गए उत्तर की जाँच करें।
इंग्रेडिएड

4

लेआउट:

<android.support.v7.widget.AppCompatButton
  style="@style/MyButton"
  ...
  />

styles.xml:

<style name="MyButton" parent="Widget.AppCompat.Button.Colored">
  <item name="backgroundTint">@color/button_background_selector</item>
  <item name="android:textColor">@color/button_text_selector</item>
</style>

रंग / button_background_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#555555"/>
    <item android:color="#00ff00"/>
</selector>

रंग / button_text_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:color="#888888"/>
    <item android:color="#ffffff"/>
</selector>

3

ImageButtonयहां उपयोग करने वालों के लिए यह है कि आप इसे कैसे करते हैं:

Style.xml में:

<style name="BlueImageButton" parent="Base.Widget.AppCompat.ImageButton">
    <item name="colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

v21 / style.xml में:

<style name="BlueImageButton" parent="Widget.AppCompat.ImageButton">
    <item name="android:colorButtonNormal">@color/primary</item>
    <item name="android:tint">@color/white</item>
</style>

फिर आपकी लेआउट फ़ाइल में:

<android.support.v7.widget.AppCompatImageButton
    android:id="@+id/my_button"
    android:theme="@style/BlueImageButton"
    android:layout_width="42dp"
    android:layout_height="42dp"
    android:layout_gravity="center_vertical"
    android:src="@drawable/ic_check_black_24dp"
    />

इससे मदद मिली .... मुझे लगता है कि बटन विजेट में एक शैली के बजाय एक विषय के रूप में बटन शैली को लागू करना नोट करना महत्वपूर्ण है। मैं इसे स्टाइल के तहत लागू कर रहा था = "@ स्टाइल / ब्लूइमेजबटन" और यह काम नहीं कर रहा था
वेवल

3

यदि आप colorButtonNormal के साथ स्टाइल सॉल्यूशन का उपयोग करते हैं , तो Widget.AppCompat.Button.Colored से प्राप्त करना न भूलें ताकि रिपल इफेक्ट काम कर रहा हो;)

पसंद

<style name="CustomButtonStyle" parent="Widget.AppCompat.Button.Colored">
      <item name="colorButtonNormal">@android:color/white</item>
</style>

2

AppCompatButton का उपयोग कर एक और सरल समाधान

<android.support.v7.widget.AppCompatButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     style="@style/Widget.AppCompat.Button.Colored"
     app:backgroundTint="@color/red"
     android:text="UNINSTALL" />

2

उपयोग:

android:backgroundTint="@color/customColor"

या और भी :

android:background="@color/customColor"

और वह बटन को कस्टम रंग देगा।


1

यदि आप केवल "फ़्लैट" सामग्री बटन चाहते हैं, तो आप यहाँ बताए अनुसार SelectableItemBackground विशेषता का उपयोग करके उनकी पृष्ठभूमि को अनुकूलित कर सकते हैं


यदि आप "टिंट" रंगों या चयनित रंगों में से किसी को बदलना नहीं चाहते हैं, तो निश्चित रूप से रंगीन बटनों के साथ प्रतिक्रिया प्राप्त करना एक आसान समाधान है। धन्यवाद!
theblang


1

मेरे लिए, समस्या यह थी कि एंड्रॉइड 5.0 में android:colorButtonNormalकोई प्रभाव नहीं था, और वास्तव में, थीम (जैसे android:colorAccent) से कोई आइटम नहीं था , लेकिन उदाहरण के लिए एंड्रॉइड 4.4.3 में, किया। परियोजना के साथ compileSdkVersionऔर targetSdkVersion22 तक कॉन्फ़िगर किया गया था , इसलिए मैंने @Muhammad Alfaifi sugessted के रूप में सभी परिवर्तन किए हैं, लेकिन अंत में, मैंने देखा है कि समस्या buildToolsVersion थी , जिसे अपडेट नहीं किया गया था। एक बार जब मैं 23.0.1 में बदल गया , तो सब कुछ लगभग सामान्य रूप से काम करने लगा । अब, android:colorButtonNormalअभी भी कोई प्रभाव नहीं है, लेकिन कम से कम बटन पर प्रतिक्रिया होती है android:colorAccent, जो मेरे लिए स्वीकार्य है।

मुझे उम्मीद है कि यह संकेत किसी की मदद कर सकता है। नोट: मैंने शैली को सीधे बटन पर लागू किया है, क्योंकि बटन का android:theme=[...]भी प्रभाव नहीं है।


आपने लगभग 100% सही तरीका पाया कि नए @ शैली / विजेट का उपयोग कैसे करें ।AppCompat.Button.Colored;) - इस उत्तर को देखें stackoverflow.com/a/35811157/19733911
sosite

1

इसे बंद करने का एक तरीका आपको केवल एक शैली को इंगित करने की अनुमति देता है और आपके ऐप के सभी बटनों को समान रूप से थीम नहीं करता है।
Themes.xml में एक थीम जोड़ें

    <style name="Theme.MyApp.Button.Primary.Blue" parent="Widget.AppCompat.Button">
        <item name="colorButtonNormal">@color/someColor</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>

अब style.xml में जोड़ें

    <style name="MyApp.Button.Primary.Blue" parent="">
        <item name="android:theme">@style/Theme.MyApp.Button.Primary.Blue</item>
    </style>

अब आपके लेआउट में बस बटन में STYLE को इंगित करें

    <Button
        ...
        style="@style/MyApp.Button.Primary.Blue"
        ...  />

1

अपडेट करें

उपयोग डिजाइन समर्थन पुस्तकालय (23.2.0) और appcompatwidgets नीचे के रूप में

Android समर्थन लाइब्रेरी में 22.1 :

यह स्वचालित रूप से किया जाता है जब लेआउट को फुलाया जाता है - AppCompatButton के साथ बटन की जगह, AppCompatTextView के साथ TextView, आदि यह सुनिश्चित करने के लिए कि प्रत्येक टिनटिंग का समर्थन कर सकता है। इस रिलीज़ में, वे टिंट जागरूक विजेट अब सार्वजनिक रूप से उपलब्ध हैं, जिससे आपको टिन्टिंग समर्थन रखने की अनुमति मिलती है, भले ही आपको किसी समर्थित विजेट को उप-वर्ग करने की आवश्यकता हो।

टिंट जागरूक विगेट्स की पूरी सूची:

AppCompatAutoCompleteTextView
AppCompatButton
AppCompatCheckBox
AppCompatCheckedTextView
AppCompatEditText
AppCompatMultiAutoCompleteTextView
AppCompatRadioButton
AppCompatRatingBar
AppCompatSpinner
AppCompatTextView

पूर्व लॉलीपॉप उपकरणों के लिए सामग्री डिजाइन :

AppCompat (उर्फ ActionBarCompat) जिंजरब्रेड पर चलने वाले उपकरणों के लिए Android 4.0 ActionBar API के बैकपोर्ट के रूप में शुरू हुआ, जो बैकपोर्ट कार्यान्वयन और फ्रेमवर्क कार्यान्वयन के शीर्ष पर एक आम एपीआई परत प्रदान करता है। AppCompat v21 एक एपीआई और फीचर-सेट देता है जो एंड्रॉइड 5.0 के साथ अद्यतित है



1

यदि आप AppCompat स्टाइल का उपयोग करना चाहते हैं जैसे Widget.AppCompat.Button , Base.Widget.AppCompat.Button.Colored , इत्यादि, आपको समर्थन पुस्तकालय से संगत विचारों के साथ इन शैलियों का उपयोग करने की आवश्यकता है।

नीचे दिए गए कोड प्री-लॉलीपॉप डिवाइस के लिए काम नहीं करते हैं:

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

AppCompat स्टाइल को सक्षम करने के लिए आपको AppCompatButton का उपयोग करने की आवश्यकता है:

<android.support.v7.widget.AppCompatButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:theme="@style/Widget.AppCompat.Button" />

2
XML लेआउट को फुलाते समय एप्‍लिकेशन के विजेट्स स्‍वत: उपयोग नहीं किए जाते हैं? मेरा मानना ImageViewहै कि AppCompatImageViewइसके साथ प्रतिस्थापित हो जाता है और यह सभी विजेट्स के साथ समान होना चाहिए, जिनके पास एक ही AppCompatसंस्करण है।
d.aemon

नहींं, यदि आप अंतिम लक्ष्य संस्करण को लक्षित नहीं करते हैं, तो आपको android.support.v7.widget.AppCompatImageViewस्पष्ट रूप से परिभाषित करने की आवश्यकता है ।
फारुककांया

आप से क्या मतलब है last target version, @power?
d.aemon

1

मैं इसका उपयोग करता हूं। रिपल इफेक्ट और बटन क्लिक शैडो वर्किंग।

style.xml

<style name="Button.Red" parent="Widget.AppCompat.Button.Colored">
    <item name="android:textColor">@color/material_white</item>
    <item name="android:backgroundTint">@color/red</item>
</style>

लेआउट पर बटन:

<Button
        style="@style/Button.Red"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/close"/>

0

मैं वास्तव में अपने कस्टम बटन शैलियों में बदलाव नहीं चाहता था, लेकिन दुर्भाग्य से वे अब काम नहीं कर रहे थे।

मेरे ऐप में 9 का minSdkVersion है और सब कुछ पहले काम किया।

मुझे पता नहीं क्यों लेकिन जब से मैंने एंड्रॉइड को हटाया: बटन से पहले इसे फिर से काम करने लगता है

अब = काम कर रहा है:

<item name="buttonStyle">@style/ButtonmyTime</item>

पहले = सिर्फ ग्रे सामग्री बटन:

<item name="android:buttonStyle">@style/ButtonmyTime</item>

मेरे पास newver android संस्करण के लिए कोई भी स्पेज़ियल फ़ोल्डर नहीं है क्योंकि मेरे बटन काफी सपाट हैं और उन्हें सभी Android संस्करणों में समान दिखना चाहिए।

शायद कोई मुझे बता सकता है कि मुझे "एंड्रॉइड:" को क्यों हटाना पड़ा "द इमेजबटन अभी भी" एंड्रॉइड: "के साथ काम कर रहा है

<item name="android:imageButtonStyle">@style/ImageButtonmyTimeGreen</item>

0

2 दिनों के उत्तर की तलाश के बाद, बटन थीमिंग ने मेरे लिए API <21 में काम नहीं किया।

मेरा एकमात्र समाधान AppCompatButton को न केवल आधार ऐप थीम "colorButtonNormal" के साथ अपकमिंग करना है, बल्कि इस तरह से देखने की पृष्ठभूमि भी है:

public class AppCompatColorButton extends AppCompatButton {

    public AppCompatColorButton(Context context) {
        this(context, null);
    }

    public AppCompatColorButton(Context context, AttributeSet attrs) {
        this(context, attrs, android.support.v7.appcompat.R.attr.buttonStyle);
    }

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

        if (TintManager.SHOULD_BE_USED) {
            setSupportBackgroundTintList(createButtonColorStateList(getContext(), attrs, defStyleAttr));
        }
    }

    static final int[] DISABLED_STATE_SET = new int[]{-android.R.attr.state_enabled};
    static final int[] FOCUSED_STATE_SET = new int[]{android.R.attr.state_focused};
    static final int[] PRESSED_STATE_SET = new int[]{android.R.attr.state_pressed};
    static final int[] EMPTY_STATE_SET = new int[0];

    private ColorStateList createButtonColorStateList(Context context, AttributeSet attrs, int defStyleAttr) {
        final int[][] states = new int[4][];
        final int[] colors = new int[4];
        int i = 0;

        final int themeColorButtonNormal = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        /*TypedArray a = context.obtainStyledAttributes(attrs, new int[] { android.R.attr.backgroundTint }, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(0, themeColorButtonNormal);*/
        TypedArray a = context.obtainStyledAttributes(attrs, android.support.v7.appcompat.R.styleable.View, defStyleAttr, 0);
        final int colorButtonNormal = a.getColor(android.support.v7.appcompat.R.styleable.View_backgroundTint, themeColorButtonNormal);
        a.recycle();
        final int colorControlHighlight = ThemeUtils.getThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorControlHighlight);

        // Disabled state
        states[i] = DISABLED_STATE_SET;
        colors[i] = ThemeUtils.getDisabledThemeAttrColor(context, android.support.v7.appcompat.R.attr.colorButtonNormal);
        i++;

        states[i] = PRESSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        states[i] = FOCUSED_STATE_SET;
        colors[i] = ColorUtils.compositeColors(colorControlHighlight, colorButtonNormal);
        i++;

        // Default enabled state
        states[i] = EMPTY_STATE_SET;
        colors[i] = colorButtonNormal;
        i++;

        return new ColorStateList(states, colors);
    }
}

फिर आप इस तरह से अपने बटन रंग को परिभाषित कर सकते हैं:

<com.example.views.AppCompatColorButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:backgroundTint="#ffff0000"
            app:backgroundTint="#ffff0000"
            android:text="Button"
            android:textColor="@android:color/white" />

0

इस SO उत्तर ने मुझे https://stackoverflow.com/a/30277424/3075340 उत्तर पर पहुंचने में मदद की

मैं एक बटन की पृष्ठभूमि टिंट सेट करने के लिए इस उपयोगिता विधि का उपयोग करता हूं। यह पूर्व-लॉलीपॉप उपकरणों के साथ काम करता है:

// Set button background tint programmatically so it is compatible with pre-lollipop devices.
public static void setButtonBackgroundTintAppCompat(Button button, ColorStateList colorStateList){
    Drawable d = button.getBackground();
    if (button instanceof AppCompatButton) {
        // appcompat button replaces tint of its drawable background
        ((AppCompatButton)button).setSupportBackgroundTintList(colorStateList);
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Lollipop button replaces tint of its drawable background
        // however it is not equal to d.setTintList(c)
        button.setBackgroundTintList(colorStateList);
    } else {
        // this should only happen if
        // * manually creating a Button instead of AppCompatButton
        // * LayoutInflater did not translate a Button to AppCompatButton
        d = DrawableCompat.wrap(d);
        DrawableCompat.setTintList(d, colorStateList);
        button.setBackgroundDrawable(d);
    }

}

कोड में उपयोग कैसे करें:

Utility.setButtonBackgroundTintAppCompat(myButton,
ContextCompat.getColorStateList(mContext, R.color.your_custom_color));

इस तरह, आपको एक ColorStateList निर्दिष्ट करने की आवश्यकता नहीं है यदि आप केवल पृष्ठभूमि टिंट को बदलना चाहते हैं और इससे अधिक और कुछ नहीं, लेकिन सुंदर बटन प्रभाव बनाए रखें और क्या नहीं।


0

मैं सेट android:textColorकरने के लिए @nullमेरे बटन विषय में है और यह मदद करता है।

styles.xml

<style name="Button.Base.Borderless" parent="Widget.AppCompat.Button.Borderless.Colored">
    <item name="android:textColor">@null</item>
</style>

some_layout.xml

<Button
    style="@style/Button.Base.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hint" />

अब बटन पाठ रंग में colorAccentपरिभाषित किया गया हैAppTheme

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="borderlessButtonStyle">@style/Button.Base.Borderless</item>
    <item name="alertDialogTheme">@style/AlertDialog</item>
</style>

0

यदि आप कोटलिन का उपयोग करते हैं, तो क्या आप देख सकते हैं कि MaterialButton की सभी विशेषताएँ समर्थित हैं। Android का उपयोग न करें: पृष्ठभूमि विशेषता। मटीरियलबटन अपनी खुद की बैकग्राउंड ड्रॉएबल को मैनेज करता है, और एक नया बैकग्राउंड सेट करने का मतलब है मटेरियल बटन डिसएबल कलर अब इस बात की गारंटी नहीं दे सकता है कि यह जो नए फीचर्स पेश करता है वह ठीक से काम करेगा। यदि डिफ़ॉल्ट पृष्ठभूमि बदल जाती है, तो सामग्री बटन अच्छी तरह से परिभाषित व्यवहार की गारंटी नहीं दे सकता है। MainActivity.kt पर

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        buttonClick.setOnClickListener {
            (it as MaterialButton).apply {
                backgroundTintList = ColorStateList.valueOf(Color.YELLOW)
                backgroundTintMode = PorterDuff.Mode.SRC_ATOP
            }
        }
    }
}

Activity_main.xml पर

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonNormal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Material Button Normal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:text="Material Button Background Red"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonNormal" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonTintMode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="#D3212D"
        android:backgroundTintMode="multiply"
        android:text="Tint Red + Mode Multiply"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTint" />
    <com.google.android.material.button.MaterialButton
        android:id="@+id/buttonClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Click To Change Background"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTintMode" />
</androidx.constraintlayout.widget.ConstraintLayout>

संसाधन: सामग्री बटन रंग का उदाहरण बदलते हैं


0

यदि आप इसे किसी भी रंग के उपयोग में कोड के माध्यम से करना चाहते हैं:

DrawableCompat.setTintList(button.getBackground(), ColorStateList.valueOf(yourColor));
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.