पृष्ठभूमि रंग के साथ बटन पर सामग्री का प्रभाव

Question

मैं एंड्रॉइड v21 सपोर्ट लाइब्रेरी का उपयोग कर रहा हूं।

मैंने कस्टम बैकग्राउंड कलर वाला एक बटन बनाया है। जब मैं बैक ग्राउंड रंग का उपयोग करता हूं, तो रिपल जैसे सामग्री डिज़ाइन प्रभाव प्रकट होते हैं (क्लिक पर ऊंचाई को छोड़कर)।

 <Button
 style="?android:attr/buttonStyleSmall"
 android:background="?attr/colorPrimary"
 android:textColor="@color/white"
 android:textAllCaps="true"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 />

निम्नलिखित एक सामान्य बटन है और प्रभाव ठीक काम कर रहे हैं।

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:textAllCaps="true"
 android:text="Button1"
/>

Comments

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

— नाथन वाल्टर्स

जब मैं बैकग्राउंड का रंग बदलता हूं तो @SweetWisher रिपल और अन्य प्रभाव बटन में लागू नहीं होते हैं।

— शतेश

@NathanWalters लेकिन डिफ़ॉल्ट ग्रे रंग बदसूरत है। :-(

— सत्थेश

मेरा विश्वास करो, मुझे पता है ... हम महान कर्ज में होंगे जो भी यह पता लगाएगा कि यह कैसे ठीक से करना है।

— नाथन वाल्टर्स

बहुत बढ़िया जवाब stackoverflow.com/a/32238489/1318946

— प्रतीक बुटानी

Answer 1

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

अद्यतन: के रूप में संस्करण 23.0.0 रिलीज की AppCompat , वहाँ एक नया है Widget.AppCompat.Button.Coloredशैली जो अपने विषय के उपयोग करता colorButtonNormalविकलांग रंग के लिए और colorAccentसक्षम रंग के लिए।

इससे आप इसे सीधे अपने बटन पर लगा सकते हैं

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

यदि आपको एक कस्टम की आवश्यकता है colorButtonNormalया colorAccent, आप इस प्रो-टिप में और बटन पर ThemeOverlayबताए अनुसार उपयोग कर सकते हैं ।android:theme

पिछला उत्तर

आप अपनी पृष्ठभूमि के लिए अपने v21 निर्देशिका में एक drawable का उपयोग कर सकते हैं जैसे:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

यह सुनिश्चित करेगा कि आपका बैकग्राउंड कलर है ?attr/colorPrimaryऔर डिफॉल्ट का उपयोग करके डिफॉल्ट रिपल एनीमेशन है ?attr/colorControlHighlight(जिसे आप चाहें तो अपने थीम में भी सेट कर सकते हैं)।

नोट: आपको v21 से कम के लिए एक कस्टम चयनकर्ता बनाना होगा:

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

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

Comments

अच्छा उत्तर! वास्तव में मैं जिस चीज की तलाश कर रहा था, हालांकि परियोजना को ड्रा करने योग्य- v21 में पहचानने योग्य बनाने का निर्णय लेने से पहले उसे साफ करने और पुनर्निर्माण करने की आवश्यकता थी।

— user1354603

stackoverflow.com/questions/26519979/…

— Gaara87

@ianhanniballake मुझे आश्चर्य है कि उन बटन में गोल कोनों के अनुकूलन को खोने के बिना इस काम की तकनीक को कैसे संयोजित किया जाए

— जोकिन इर्चुक

@ianhanniballake सिर्फ एक टिप्पणी, <आइटम एंड्रॉइड के तहत रिपल में आकर्षित करने योग्य: ड्रॉएबल ... /> पारदर्शी रंग नहीं हो सकता। उस स्थिति में लहर दिखाई नहीं देगी। मुझे यह महसूस करने में थोड़ा समय लगा।

— इवान कूइट

Appcompat 23.1.1 और API 22 के साथ, अक्षम और सक्षम स्थिति दोनों ही थीम के रंग-प्रकार के असामान्य रंग लेते हैं।

— रेमी डीएवीआईडी

Answer 2

उनके "मटेरियल" इफ़ेक्ट को बनाए रखते हुए "फ़्लैट" बटन के लिए कस्टम बैकग्राउंड प्रदान करने का एक और सरल उपाय है।

1. वांछित समूह के साथ ViewGroup में अपना बटन रखें
2. अपने बटन के लिए पृष्ठभूमि के रूप में वर्तमान विषय से selectableItemBackground सेट करें (एपीआई> = 11)

अर्थात :

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/blue">
    <Button
        style="?android:attr/buttonStyleSmall"
        android:background="?android:attr/selectableItemBackground"
        android:textColor="@android:color/white"
        android:textAllCaps="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button1"
        />
</FrameLayout>

फ्लैट बटन के लिए इस्तेमाल किया जा सकता है , यह एपीआई> = 11 पर काम करता है, और आपको> = 21 उपकरणों पर रिपल इफ़ेक्ट मिलेगा, प्री -21 पर नियमित रूप से बटन रखते हुए जब तक AppCompat अपडेट नहीं किया जाता है, तब तक वह रिपल का समर्थन करता है।

आप केवल> = 21 बटन के लिए selectableItemBackgroundBorderless का उपयोग कर सकते हैं ।

Comments

आपने शाब्दिक रूप से बॉक्स के बाहर सोचा था। हालांकि यह ऐसा करने का एक तरीका है, यह कोड युग्मन बढ़ा सकता है और शैलियों का उपयोग करना अनुशंसित तरीका होगा।

— शतेश

यह रंग की पृष्ठभूमि के साथ एक फ्लैट बटन बनाता है, हाँ। लेकिन बनाया गया बटन एक वर्ग की तरह दिखता है, कोई गोल कोनों और छाया प्रभाव नहीं।

— संकट बर्डे

@SanketBerde बिल्कुल। Cuz कि "फ्लैट" बटन क्या है।

— किरूवका

मूल प्रश्न में फ्लैट का उल्लेख नहीं था। btw, अगर आपके पास <FrameLayout> के बजाय आपके समाधान में एक <cardView> माता-पिता हैं, तो परिणामी बटन उठाया जाएगा और छाया होगी। यह प्री-लॉलीपॉप वर्जन में भी काम करता है।

— संकट बर्डे

@SanketBerde CardViewदृष्टिकोण के बारे में जानने के लिए महान , साझा करने के लिए धन्यवाद!

— kiruwka

Answer 3

यहाँ कस्टम पृष्ठभूमि के साथ उठाया बटन को लहर प्रभाव देने के लिए एक सरल और पिछड़े संगत तरीका है।

आपका लेआउट इस तरह दिखना चाहिए

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_custom_background"
    android:foreground="?android:attr/selectableItemBackground"/>

Comments

इसे पूरा करने का यह सबसे आसान तरीका नहीं है। अच्छा उत्तर।

— टायलर पफ़्फ़

एपीआई 21+ लेकिन काम नहीं कर रहा है। क्लिक करने योग्य-सच, पृष्ठभूमि के साथ रैखिक लेआउट पर लागू - अलग रंग, अग्रभूमि-निर्दिष्ट।

— एलेक्स

चूंकि बटन एक टेक्स्ट व्यू है और फ़्रेमलेयआउट नहीं है, foreground23 से पहले कोई प्रभाव नहीं है। google.com/…

— androidguy

अच्छा! मैं यह भी नहीं जानता था कि "अग्रभूमि" एक बात थी!

— एरिक स्लेनज़

एक जादू की तरह काम करता है..!

— कन्नन

Answer 4

मैं आज इस समस्या में भाग गया वास्तव में v22 पुस्तकालय के साथ खेल रहा था।

यह मानते हुए कि आप शैलियों का उपयोग कर रहे हैं आप colorButtonNormalसंपत्ति सेट कर सकते हैं और बटन डिफ़ॉल्ट रूप से उस रंग का उपयोग करेंगे।

<style name="AppTheme" parent="BaseTheme">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
    <item name="colorAccent">@color/accentColor</item>
    <item name="colorButtonNormal">@color/primaryColor</item>
</style>

उस के बाहर आप अभी भी बटन के लिए एक शैली बना सकते हैं, तो उस बटन का उपयोग करें यदि आपको रंगों के वर्गीकरण की आवश्यकता थी (परीक्षण नहीं किया गया है, तो बस अटकलें)।

android:अपने v21 शैली में आइटम नामों से पहले जोड़ना याद रखें ।

Comments

रंगीन बटनों के वर्गीकरण के लिए, रॉबर्ट के अन्य जवाब देखें: stackoverflow.com/a/31825439/1617737

— प्रतिबंध-जियोइंजीनियरिंग

अब सेट किए गए बैकग्राउंड कलर के साथ, क्या एक सामान्य विशेषता है जो मैं बटन टेक्स्ट कलर को निर्दिष्ट करने के लिए उपरोक्त कोड ब्लॉक में उपयोग कर सकता हूं?

— प्रतिबंध-जियोइंजीनियरिंग

Answer 5

AppCompat (22.1.1+) के साथ आप इस तरह की शैली जोड़ सकते हैं:

<style name="MyGreenButton">
    <item name="colorButtonNormal">#009900</item>
</style>

और सिर्फ स्टाइल लागू करके इसका उपयोग करें:

<android.support.v7.widget.AppCompatButton
    style="@style/MyGreenButton"
    android:layout_width="match_width"
    android:layout_height="wrap_content"
    android:text="A Green Button"
    />

प्रोग्राम को रंग बदलने पर, मैंने पाया कि रंग को अपडेट करने का एकमात्र तरीका (एपीआई 15 या 16 पर) इसके बजाय 'पृष्ठभूमि टिंट सूची' का उपयोग करना था। और यह एपीआई 21 उपकरणों पर अच्छा रेडियल एनीमेशन नहीं निकालता है:

ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB
button.setSupportBackgroundTintList(colorStateList);

क्योंकि button.setBackground(...)और button.getBackground().mutate().setColorFilter(...)एपीआई 15 पर बटन का रंग नहीं बदलता है जैसे कि वे एपीआई 21 पर करते हैं।

Comments

बहुत-बहुत धन्यवाद, इसने मेरे लिए पूरी तरह से काम किया (भले ही बटन का उपयोग xml लेआउट में किया जाए क्योंकि AppCompat inflater इसे AppCompatButton के साथ बदल देता है)

— Louis CAD

केवल एक रंग का ColorStateList.valueOf( ... )एक सरल निर्माण करने के लिए उपयोग करें ColorStateList।

— तैग

colorAccent और rippleColor शैली में काम नहीं करते हैं

— यार

इस पोस्ट के लिए आपका धन्यवाद। मेरे लिए क्या काम किया गया: ViewCompat.setBackgroundTintList(myButton, ColorStateList.valueOf(myColor); जावदोक का setSupportBackgroundTintListकहना है कि इसे इस तरह से बुलाया जाना चाहिए।

— जाराबेक जाकुब

Answer 6

@ Ianhanniballake का जवाब बिल्कुल सही और सरल है। लेकिन मुझे समझने में कुछ दिन लगे। जो व्यक्ति उसके उत्तर को नहीं समझता है, उसके लिए यहां अधिक विस्तार कार्यान्वयन है

<Button
        android:id="@+id/btn"
        style="@style/MaterialButton"
        ... />


<style name="MaterialButton" parent="Widget.AppCompat.Button.Colored">
    <item name="android:theme">@style/Theme.MaterialButton</item>
   ...
</style>


<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

=== या ===

<Button
        android:id="@+id/btn"
        style="@style/Widget.AppCompat.Button.Colored"
        android:theme="@style/Theme.MaterialButton" />

<style name="Theme.MaterialButton" parent="YourTheme">
    <item name="colorAccent">@color/yourAccentColor</item>
    <item name="colorButtonNormal">@color/yourButtonNormalColor</item>
</style>

Comments

आपका जवाब मेरे लिए पहेली का आखिरी टुकड़ा था। colorButtonNormalबेस थीम में भी लिख सकते हैं @style/AppTheme। यह तदनुसार बटन को रंग देने के लिए AppCompat को एक डिफ़ॉल्ट रंग देता है। और फिर व्यक्तिगत रूप से एक दृश्य के विषय में अपने उत्तर का उपयोग कर सकते हैं।

— सिद्धार्थ पंत

क्या यह android:theme="Theme.MaterialButton"याandroid:theme="@style/Theme.MaterialButton"

— osrl

@osrl यह है android:theme="@style/Theme.MaterialButton"। आपकी शुद्धता के लिए धन्यवाद।

— फ्रैंक गुयेन

Answer 7

मैंने पृष्ठभूमि का उपयोग किया है और अग्रभूमि:

<Button
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:backgroundTint="@color/colorAccent"
    android:foreground="?android:attr/selectableItemBackground"
    android:textColor="@android:color/white"
    android:textSize="10sp"/>

Comments

afaik अग्रभूमि विशेषता के लिए कोई आवश्यकता नहीं है क्योंकि पृष्ठभूमि मानक मानक तरंग को ओवरराइड नहीं करता है

— जूलियन ओएस

Answer 8

मैं अपने ListViewआइटम की पृष्ठभूमि का रंग पाने के लिए रास्ता ढूंढता हुआ इस पोस्ट पर आया , फिर भी लहर को बनाए रखता हूं ।

मैंने केवल एक पृष्ठभूमि के रूप में अपना रंग जोड़ा और अग्रभूमि के रूप में चयन करने योग्य ItackBackground:

<style name="my_list_item">
    <item name="android:background">@color/white</item>
    <item name="android:foreground">?attr/selectableItemBackground</item>
    <item name="android:layout_height">@dimen/my_list_item_height</item>
</style>

और यह एक आकर्षण की तरह काम करता है। मुझे लगता है कि उसी तकनीक का उपयोग बटन के लिए भी किया जा सकता है। सौभाग्य :)

Answer 9

के backgroundTintबजाय का उपयोग करेंbackground

Comments

प्री-लॉलीपॉप के लिए आपको टिंट को कोड में सेट करना चाहिए: stackoverflow.com/questions/27735890/…

— shem

Answer 10

आप ImageButton में रुचि रखते हैं, तो आप इस सरल बात की कोशिश कर सकते हैं:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

Answer 11

v22.1appcompat-v7कुछ नई संभावनाओं की शुरुआत की। अब केवल एक दृश्य के लिए एक विशिष्ट विषय निर्दिष्ट करना संभव है।

अनुप्रयोग का पदावनत उपयोग: स्टाइल टूलबार के लिए थीम। अब आप Android का उपयोग कर सकते हैं: सभी API स्तर 7 और उच्चतर उपकरणों पर टूलबार के लिए विषय और Android: एपीआई स्तर 11 और उच्चतर उपकरणों पर सभी विजेट के लिए विषय समर्थन।

इसलिए एक वैश्विक विषय में वांछित रंग सेट करने के बजाय, हम एक नया बनाते हैं और केवल इसे असाइन करते हैं Button

उदाहरण:

<style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorButtonNormal">@color/myColor</item>
</style>

और इस शैली को अपने विषय के रूप में उपयोग करें Button

<Button
 style="?android:attr/buttonStyleSmall"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="Button1"
 android:theme="@style/MyColorButton"/>

Answer 12

यदि आप किसी तीसरे पक्ष के पुस्तकालय का उपयोग करने के साथ ठीक हैं, तो ट्रैक्स / RippleEffect देखें । यह आपको कोड की कुछ पंक्तियों के साथ किसी भी दृश्य में रिपल प्रभाव जोड़ने की अनुमति देता है । आपको बस अपनी xml लेआउट फ़ाइल में, जिस तत्व को आप एक com.andexert.library.RippleViewकंटेनर के साथ लहर प्रभाव डालना चाहते हैं, लपेटने की आवश्यकता है ।

अतिरिक्त बोनस के रूप में इसके लिए न्यूनतम एसडीके 9 की आवश्यकता होती है ताकि आपके पास ओएस संस्करणों में डिज़ाइन संगतता हो।

यहाँ पुस्तकालयों 'GitHub रेपो से लिया गया एक उदाहरण है:

<com.andexert.library.RippleView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:rv_centered="true">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@android:drawable/ic_menu_edit"
        android:background="@android:color/holo_blue_dark"/> 

</com.andexert.library.RippleView>

आप इस विशेषता को RippleView तत्व को जोड़कर लहर रंग बदल सकते हैं: app:rv_color="@color/my_fancy_ripple_color

Answer 13

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="#fff"
    android:textColor="#000"
    android:text="test"/>

उपयोग

xmlns:app="http://schemas.android.com/apk/res-auto"

और रंग पूर्व-लॉलीपॉप पर अविकसित होगा

Answer 14

एलेक्स लॉकवुड के महान ट्यूटोरियल में दो दृष्टिकोण बताए गए हैं: http://www.androiddesignpatterns.com/2016/08/coloring-buttons-with-themeoverlays-background-tints.html :

दृष्टिकोण # 1: बटन की पृष्ठभूमि रंग w / एक ThemeOverlay को संशोधित करना

<!-- res/values/themes.xml -->
<style name="RedButtonLightTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="colorAccent">@color/googred500</item>
</style>

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

# 2 दृष्टिकोण: AppCompatButton की पृष्ठभूमि टिंट की स्थापना

<!-- res/color/btn_colored_background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Disabled state. -->
    <item android:state_enabled="false"
          android:color="?attr/colorButtonNormal"
          android:alpha="?android:attr/disabledAlpha"/>

    <!-- Enabled state. -->
    <item android:color="?attr/colorAccent"/>

</selector>

<android.support.v7.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/btn_colored_background_tint"/>

Answer 15

रंगों को लागू करना:

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {

    ColorStateList colorStateListRipple = new ColorStateList(
            new int[][] {{0}},
            new int[] {Color.WHITE} // ripple color
            );

    RippleDrawable rippleDrawable = (RippleDrawable) myButton.getBackground();
    rippleDrawable.setColor(colorStateListRipple);
    myButton.setBackground(rippleDrawable); // applying the ripple color
}

ColorStateList colorStateList = new ColorStateList(
        new int[][]{
                new int[]{android.R.attr.state_pressed}, // when pressed
                new int[]{android.R.attr.state_enabled}, // normal state color
                new int[]{} // normal state color
        },
        new int[]{
                Color.CYAN, // when pressed
                Color.RED, // normal state color
                Color.RED // normal state color
        }
);

ViewCompat.setBackgroundTintList(myButton, colorStateList); // applying the state colors

Answer 16

मैंने यह कोशिश की:

android:backgroundTint:"@color/mycolor"

बदले में पृष्ठभूमि की संपत्ति। यह सामग्री प्रभाव को दूर नहीं करता है।

Comments

यह प्री-लॉलीपॉप डिवाइस (70% मार्केट शेयर) के लिए काम नहीं करेगा। वास्तव में इसे वापस भेज दिया गया है, लेकिन अब भी एंड्रॉइड स्टूडियो एंड्रॉइड उपसर्ग के बिना इसका उपयोग करते समय त्रुटियों को दिखाता है।

— सिद्धार्थ पंत