बटन पृष्ठभूमि रंग के साथ मेरे बटन पर लहर प्रभाव जोड़ें?

Question

मैंने एक बटन बनाया है और मैं उस बटन पर रिपल इफेक्ट जोड़ना चाहता हूं!

मैंने एक बटन bg XML फ़ाइल बनाई: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

और यह मेरी तरंग प्रभाव फ़ाइल है: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

और यह मेरा बटन है जिसे मैं लहर प्रभाव जोड़ना चाहता हूं:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

लेकिन रिपल इफ़ेक्ट बटन बैकग्राउंड जोड़ने के बाद पारदर्शी होता है, और बटन क्लिक करने पर ही डिस्प्ले होता है, जैसे:

क्लिक करने से पहले

क्लिक पर

लेकिन मुझे बटन बैकग्राउंड कलर और रिपल इफ़ेक्ट दोनों की ज़रूरत है, मुझे स्टैक ओवरफ़्लो के विभिन्न ब्लॉगों में इस कोड में से कुछ मिल गए, लेकिन फिर भी यह काम नहीं कर रहा है!

Comments

कृपया अगली बार स्क्रीनशॉट को बहुत छोटा करें .. (अपलोड करने से पहले आकार बदलें)

— user25

@ user25, आप केवल lया mछवि लिंक पर भी जोड़ सकते हैं । (मेरे संपादन देखें)

— सुरगाच

Answer 1

यहां उन लोगों के लिए एक और आकर्षक एक्सएमएल है जो सभी को एक साथ ढाल पृष्ठभूमि, कॉर्नर त्रिज्या और लहर प्रभाव जोड़ना चाहते हैं:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

इसे अपने बटन की पृष्ठभूमि में जोड़ें।

<Button
    ...
    android:background="@drawable/button_background" />

पुनश्च: यह उत्तर एंड्रॉइड एआईआई 21 और उससे अधिक के लिए काम करता है।

Comments

@pei आप लोगों को यह जानकारी कैसी लगी? मेरा मतलब है कि आप कैसे जानते हैं कि इस काम को करने के लिए रिपल नामक एक XML तत्व है?

यह सामग्री डिजाइन में उपयोग की जाने वाली अवधारणाओं में से एक है। कृपया Android Studio में एक ड्रॉबल xml में एक नया रूट टैग लिखना शुरू करें, फिर आपको सभी उपलब्ध टैगों को देखने में सक्षम होना चाहिए ripple।

— पेई

मास्क आइटम का उपयोग क्या है?

— प्रशांत

इसके लिए एपीआई स्तर 21 की आवश्यकता है

— एमकेज़म अखगीरी

यह काम करता है लेकिन यह कैसे काम करता है यह नहीं बताया गया है। यह आइटम आईडी से संबंधित होना चाहिए। संदर्भित किया जाना चाहिए।

— अयियो

Answer 2

यदि "?attr/selectableItemBackground"आपके android:foregroundपास पहले से पृष्ठभूमि है, तो अपने दृश्य की विशेषता में जोड़ें android:clickable="true"।

Comments

हमेशा काम नहीं करता है, लेकिन आप स्वीकार किए गए उत्तर की टिप्पणियों में उल्लेखित रिपल इफेक्ट की पृष्ठभूमि को जोड़ सकते हैं

— Tyler

मुझे इस समाधान का उपयोग करना था क्योंकि मैंने अपने बटन के लिए एक कस्टम पृष्ठभूमि का उपयोग किया है। इसने बहुत अच्छा काम किया।

— bnayagrawal

@, यह सही है, लेकिन कम से कम: "यह एक त्रुटि नहीं है; आवेदन केवल विशेषता को अनदेखा करेगा। हालांकि, यदि विशेषता आपके आवेदन की उपस्थिति या कार्यक्षमता के लिए महत्वपूर्ण है, तो आपको प्राप्त करने का एक वैकल्पिक तरीका खोजने पर विचार करना चाहिए। केवल उपलब्ध विशेषताओं के साथ एक ही परिणाम, और फिर आप वैकल्पिक रूप से लेआउट-वीएनएन फ़ोल्डर में लेआउट की एक प्रति बना सकते हैं जिसका उपयोग एपीआई एनएन या उच्चतर पर किया जाएगा जहां आप नई विशेषता का लाभ ले सकते हैं। " इसलिए यह एपीआई 23 से ऊपर के उपकरणों पर अच्छी तरह से काम करता है और नीचे (हम बस कर सकते हैं tools:ignore="UnusedAttribute) पर ध्यान नहीं दिया जाता है ।

— जोर्जएएमवीएफ

एंड्रॉइड सपोर्ट लाइब्रेरी के बिना, यह ?android:attr/selectableItemBackground( ) के android:attrबजाय होगाattr

— वीकेंड

android:foregroundविशेषता का एपीआई स्तर पर 23 से कम प्रभाव नहीं है

— वादिम कोटोव

Answer 3

एंड्रॉइड बटन पर रिपल इफेक्ट / एनिमेशन जोड़ें

बस अपने बटन की पृष्ठभूमि की विशेषता को Android के साथ बदलें : पृष्ठभूमि = "? Attr / selectableItemBackground" और आपका कोड इस तरह दिखता है।

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:text="New Button" />

एंड्रॉइड बटन पर रिपल इफेक्ट / एनीमेशन जोड़ने का एक और तरीका

इस पद्धति का उपयोग करके, आप लहर प्रभाव रंग को अनुकूलित कर सकते हैं। सबसे पहले, आपको अपनी ड्रा करने योग्य संसाधन निर्देशिका में एक xml फ़ाइल बनानी होगी। एक ripple_effect.xml फ़ाइल बनाएँ और निम्नलिखित कोड जोड़ें। रेस / drawable / ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

और बटन के ऊपर सेट करने योग्य संसाधन फ़ाइल के लिए पृष्ठभूमि

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:padding="16dp"
    android:text="New Button" />

Comments

मेरे लिए, लहर प्रभाव दिखाई नहीं दिया। यह बटन के लिए सिर्फ एक रंग स्विच था: / मेरा Android संस्करण 5.1.1 है इसलिए इसे काम करना चाहिए। क्या आप सहायता कर सकते हैं? मैंने आपके चरणों का पालन किया

— उर्वीजी

एंड्रॉइड: रंग मस्तूल से अलग होना चाहिए एंड्रॉइड: रंग, या आप लहर प्रभाव देखना चाहते हैं

— SpyZip

यदि आप एक पृष्ठभूमि चाहते हैं तो आप सिर्फ एक और आइटम रिपल में जोड़ सकते हैं, जैसे: <आइटम android: drawable = "? attr / colorPrimary" />

— Tyler

Answer 4

के अलावा जिगर पटेल के समाधान, में जोड़ना ripple.xml बटन के पारदर्शी पृष्ठभूमि से बचने के लिए।

<item
    android:id="@android:id/background"
    android:drawable="@color/your-color" />

पूरा xml :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/your-color"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/your-color" />
        </shape>
    </item>
    <item
        android:id="@android:id/background"
        android:drawable="@color/your-color" />
</ripple>

अपने बटन में पृष्ठभूमि के रूप में इस ripple.xml का उपयोग करें:

android:background="@drawable/ripple"

Comments

हमें इसका उपयोग करने की आवश्यकता नहीं थी <item android:id="@android:id/mask"> [...]। जब तक आप एक अंडाकार मुखौटा नहीं चाहते हैं। आपके उत्तर के लिए धन्यवाद!

— फिलिपो ब्रिटो

यह क्या करता है <आइटम Android: id = "@ android: id / mask"> वैसे भी, मैं उस विशेषता के साथ और इसके बिना 2 समान तत्व

— बनाता हूं

@ डॉर्टिसस्टॉर्मरहार्मर ऑफिशियल डॉक्स से: यदि मास्क की परत सेट की जाती है, तो शेष बच्चे की परतों के समग्र पर खींचे जाने से पहले उस परत के खिलाफ रिपल इफेक्ट को मास्क किया जाएगा। यदि कोई मुखौटा परत सेट नहीं है, तो बच्चे की परतों के सम्मिश्रण के खिलाफ तरंग प्रभाव मुखौटा है। यह लिंक है, developer.android.com/reference/android/graphics/drawable/…

— सुधेश आर

@ शशिशेखर सिर्फ इसे और अधिक भ्रामक बनाता है

— Sartheris Stormhammer

@SartherisStormhammer उस आधिकारिक दस्तावेज़ से यह मुझे लगता है कि बहुत स्पष्ट है। Ripple का प्रभाव बच्चे / नकाबपोश परतों पर पड़ेगा। कृपया डॉक फिर से पढ़ें, आपको बात मिल जाएगी।

— सुधेश आर

Answer 5

जब बटन में ड्रॉबल से बैकग्राउंड होता है, तो हम अग्रभूमि पैरामीटर में रिपल इफ़ेक्ट जोड़ सकते हैं .. नीचे दिए गए कोड को एक अलग बैकग्राउंड के साथ मेरे बटन के लिए काम करते हुए देखें।

    <Button
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:layout_centerHorizontal="true"                                                             
    android:background="@drawable/shape_login_button"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:text="@string/action_button_login"
     />

लहर प्रभाव के लिए नीचे पैरामीटर जोड़ें

   android:foreground="?attr/selectableItemBackgroundBorderless"
   android:clickable="true"

नीचे दिए गए संदर्भ के लिए लिंक https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

Comments

एंड्रॉइड को विशेषता दें: अग्रभूमि का एपीआई स्तर पर 23 से कम कोई प्रभाव नहीं है

— अली खाकी

इस दृष्टिकोण का एक दोष यह है, भले ही मेरे बटन की पृष्ठभूमि अंडाकार थी आयताकार किनारों तक प्रचारित।

— कांटा

Answer 6

AppCompat v7 +

यदि आप ?android:अपने ऐप के साथ उपसर्ग नहीं करेंगे तो दुर्घटना हो जाएगी।

आपको अपनी पसंद के आधार पर उपयोग करना चाहिए "?android:attr/selectableItemBackground"या "?android:attr/selectableItemBackgroundBorderless"। मैं पसंद करता हूं Borderless।

आप इसे या तो android:backgroundया android:foregroundमौजूदा गुणों को रखने के लिए रख सकते हैं।

काम करने के लिए तत्व के पास android:clickable="true"और android:focusable="true"क्रम में होना चाहिए , लेकिन कई तत्व, जैसे बटन, उन्हें trueडिफ़ॉल्ट रूप से हैं।

<Button
    ...
    android:background="@color/white"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
    ...
    android:background="?android:attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:focusable="true"
/>

प्रोग्रामेटिक रूप से (जावा)

TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type

प्रोग्रामेटिकली (कोटलिन)

val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type

पुन: प्रयोज्य कोटलिन एक्सटेंशन फ़ंक्शन

myView.ripple()

fun View.ripple(): View {
    val value = TypedValue()
    context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
    setBackgroundResource(value.resourceId)
    isFocusable = true // Required for some view types
    return this
}

Answer 7

अग्रभूमि और क्लिक करने योग्य विशेषताओं को जोड़ना मेरे लिए काम किया।

<Button
    ... 
    android:background="@color/your_color"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true" />

Answer 8

सुदेश आर के अलावा

कोने के साथ बटन आयत आकार के साथ एक एंड्रॉइड बटन पर रिपल इफेक्ट / एनीमेशन जोड़ें

Xml फ़ाइल Res / drawable / your_file_name.xml बनाएँ

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorWhite"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorAccent"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="50dp" />
        </shape>
    </item>
</ripple>

Answer 9

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

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

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

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

आप अपनी पृष्ठभूमि के लिए अपनी 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

im का उपयोग करते हुए minSDK lvl 21

— rakcode

कोई

— वी

हाँ, मैंने इस API का उपयोग किया है, अगर मैं इस API का उपयोग करता हूं, तो क्लिक करने के बाद मेरा ऐप क्रैश हो रहा है

— rakcode

वास्तव में, डिबग मोड के साथ अपने फोन में मेरे ऐप का परीक्षण कर रहा हूं, और मेरा ओएस CyanogenMod13 (एंड्रॉइड 6, मार्शमेलो) है

— राककोड

Answer 10

इसे इस्तेमाल करे

<Button
            android:id="@+id/btn_location"
            android:layout_width="121dp"
            android:layout_height="38dp"
            android:layout_gravity="center"
            android:layout_marginBottom="24dp"
            android:layout_marginTop="24dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            android:background="@drawable/btn_corner"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="13dp"
            android:paddingRight="13dp"
            android:text="Save"
            android:textColor="@color/color_white" />

Answer 11

एक सरल दृष्टिकोण यह है कि यहाँ पर उल्लिखित थीम को सेट किया जाए ।

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

Answer 12

महज प्रयोग करें :

android:backgroundTint="#f816a463"

के बजाय:

android:background="#f816a463"

मत भूलना अपने को बदलने के लिए Buttonकरने के लिएandroid.support.v7.widget.AppCompatButton

Comments

बुरा यह है कि यदि आपको 100% क्षैतिज स्क्रीन को भरने के लिए एक बटन की आवश्यकता है तो आप नहीं करेंगे।

— ब्रिटो

Answer 13

<ripple>टैग का उपयोग करने का एक वैकल्पिक समाधान (जिसे मैं व्यक्तिगत रूप से पसंद नहीं करना चाहता हूं, क्योंकि रंग "डिफ़ॉल्ट" नहीं हैं), निम्नलिखित है:

बटन पृष्ठभूमि के लिए एक ड्राएबल बनाएं, और इसमें शामिल <item android:drawable="?attr/selectableItemBackground">करें<layer-list>

तब (और मुझे लगता है कि यह महत्वपूर्ण हिस्सा है) प्रोग्रामेटिक रूप backgroundResource(R.drawable.custom_button)से आपके बटन उदाहरण पर सेट है ।

गतिविधि / टुकड़ा

Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);

ख़ाका

<Button
    android:id="@+id/btn_temp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button"
    android:text="Test" />

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:drawable="?attr/selectableItemBackground" />
</layer-list>

Comments

प्रोग्राममैटिकली को बैकग्राउंड सेट क्यों करना चाहिए। फिर से लेआउट xml बटन की पृष्ठभूमि को परिभाषित करता है?

— सनीशिनी