जब यह क्लिक किया जा रहा हो तो एक बटन पर एक परिपत्र लहर कैसे बनाएं?

Question

पृष्ठभूमि

एंड्रॉइड के डायलर ऐप पर, जब आप किसी चीज़ की खोज शुरू करते हैं, और आप EditText के बाईं ओर स्थित तीर बटन पर क्लिक करते हैं, तो आपको इस पर एक परिपत्र तरंग प्रभाव मिलता है:

समस्या

मैंने इसे भी करने की कोशिश की है, लेकिन मुझे एक आयताकार मिल गया है:

    <ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

प्रश्न

बटन पर क्लिक करने पर मेरे पास गोलाकार तरंग प्रभाव कैसे होता है? क्या मुझे एक नया ड्रॉबल बनाना है, या क्या इसके लिए एक तरह से बनाया गया है?

Comments

github.com/traex/RippleEffect यह कोशिश करें

— त्वरित शिक्षार्थी

संभावित उत्तर यहाँ है stackoverflow.com/questions/33477025/…

— अमरीश काकड़िया

अपने चुने हुए उत्तर को सबसे अधिक उत्थान के साथ बदलने पर विचार करें, क्योंकि यह वास्तव में समस्या को हल करता है

— जेफ बार्गर

@JeffBarger क्यों? दोनों ठीक काम करते हैं। उनके बीच कोई बेहतर नहीं है।

— Android डेवलपर

Answer 1

यदि आपके पास पहले से ही एक पृष्ठभूमि छवि है, तो यहां एक लहर का एक उदाहरण है जो चयन करने के लिए करीब दिखता है।

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml:

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

State_pressed_ripple.xml: (श्वेत पृष्ठभूमि पर 10% पर सेट अपारदर्शिता) 1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>

Answer 2

यदि आप AppCompat विषय का उपयोग कर रहे हैं, तो आप दृश्य की पृष्ठभूमि इस प्रकार सेट कर सकते हैं:

android:background="?selectableItemBackgroundBorderless"

यह 21 और इसके बाद के संस्करण पर गोलाकार जोड़ देगा और 21 से नीचे की चौकोर पृष्ठभूमि पर होगा।

Comments

अच्छा लगा। क्या मैं किसी तरह इसका रंग भी सेट कर सकता हूं?

— एंड्रॉयड डेवलपर

एपीआई 23 में 'अप' बैकग्राउंड, चयनात्मक के मुकाबले आधे आकार का प्रतीत होता है। बैकग्राउंडबॉडीलेस

— स्नोडनर

अच्छा, सबसे अच्छा जवाब। ty

— स्काईवॉकर

@androiddeveloper, color को अपने स्टाइल में नीचे colorControlHighlight सेट करके सेट किया जा सकता है। xml <वस्तु का नाम = "colorControlHighlight"> # F00 </ वस्तु>

— बंधन

यदि आप इसे अन्य लेआउट के अंदर उपयोग कर रहे हैं, तो आपको लेआउट की आवश्यकता हो सकती android:clipChildren="false"है, साथ ही एनीमेशन को प्रचारित करने की भी अनुमति होगी।

— तानियास

Answer 3

गोल रिप्पल प्रभाव के साथ एक और विशेषता, विशेष रूप से एक्शन बार के लिए:

android:background="?actionBarItemBackground"

UPD : रिपेल कलर को इस विशेषता द्वारा बदला जा सकता है:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

लेकिन ध्यान रखें, यह विशेषता सभी डिफ़ॉल्ट तरंग प्रभावों पर लागू होती है।

Comments

इसे अनुकूलित करने का कोई तरीका? उदाहरण के लिए रंग? शायद शैलियों में कुछ? या और भी विशेष रूप से देखने में XML टैग ही?

— एंड्रॉयड डेवलपर

मुझे नहीं पता, आज मैंने इस समस्या को हल कर दिया और ऊपर दिए गए जवाब उतने काम नहीं हुए जितने की मुझे जरूरत थी। मेरा मानना ​​है कि रंग शैलियों में अनुकूलित किया जा सकता है, लेकिन निश्चित रूप से दृश्य में नहीं।

— ऐनीमियन

यह बिल्कुल सही प्रभाव है जिसकी मुझे तलाश है। वैसे, क्या आप इस बात का उल्लेख कर सकते हैं कि इस विशेषता को कहां ढूंढना है, ऐसा लगता है कि यह प्रलेखित नहीं है।

— जैक वांग

ओपी प्रश्न का उत्तर देता है। सबसे अच्छे उत्तर के रूप में अंकित किया जाएगा। +1

— कॉर्बेला

@MeysamHadigheh के ?लिए शॉर्टकट है?attr/

— musooff

Answer 4

पृष्ठभूमि के रूप में एक निप्पल ड्रा करने योग्य बनाएं और सेट करें। कुछ इस तरह।

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

Comments

यह मेरे कोड में कुछ है। आप अपने रंगों का उपयोग कर सकते हैं :)

— थॉमस आर।

पूर्व-लॉलीपॉप पर होने की स्थिति में मैं डिफ़ॉल्ट चयनकर्ता का उपयोग कैसे करूंगा? इसके अलावा, क्या यह डायलर पर समान रंगों का उपयोग करता है?

— एंड्रॉइड डेवलपर

आप अपने ड्रॉबल्स-वी 21 फ़ोल्डर में रिपल ड्रॉबल रख सकते हैं। और पूर्व L के लिए एक साधारण स्थिति का उपयोग करें। उसी फ़ाइल नाम का उपयोग करें और उसे ड्रा करने योग्य (डिफ़ॉल्ट) फ़ोल्डर में डालें।

— थॉमस आर।

आप एक स्टाइल भी बना सकते हैं। वैल्यूज़-वी 21 फ़ोल्डर में एक नई शैली बनाते हैं और रिपल ड्राबल को पृष्ठभूमि के रूप में सेट करते हैं। और पूर्व एल के लिए, यानी आपके मूल्यों में फ़ोल्डर स्टाइल। xml पृष्ठभूमि के रूप में एक ही शैली के लिए "selectableItemBackground" विशेषता रखता है।

— थॉमस आर।

यदि आप ऐप में उपयोग किए जाने वाले अन्य डिफ़ॉल्ट तरंग प्रभाव के समान ही रिपल कलर चाहते हैं, तो रंग के रूप में "? Attr / colorControlHighlight" का उपयोग करें।

— अलेक्सब्रर

Answer 5

बस इस पृष्ठभूमि को अपने विचार में जोड़ें

android:background=?android:attr/actionBarItemBackground

Answer 6

आप android:radiusxml में विशेषता का उपयोग करके सर्कल रिपल ड्रिबल बना सकते हैं ।

उदाहरण:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

ध्यान दें, कि आपका your_radiusकम होना चाहिए , फिर आपके दृश्य की चौड़ाई और ऊँचाई। उदाहरण के लिए: यदि आपके पास आकार के साथ दृश्य 60dp x 60dp your_radiusनिकट 30dp(चौड़ाई / 2 या ऊंचाई / 2) होना चाहिए ।

एंड्रॉइड 5.0 और इसके बाद के संस्करण पर काम करें।

Answer 7

यदि आप अधिक सामान्य XML फ़ाइलें चाहते हैं, तो मेरे पास दो फाइलें हैं:

1) कोड के साथ btn_ripple_background :

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

2) कोड के साथ ripple_circuler_shape :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

अंत में उपयोग:android:foreground="@drawable/ripple_btn_background"

Answer 8

प्रयत्न:

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

Comments

कृपया उत्तर के रूप में केवल कोड पोस्ट न करें, लेकिन एक स्पष्टीकरण शामिल करें कि आपका कोड क्या करता है और यह प्रश्न की समस्या को कैसे हल करता है। स्पष्टीकरण के साथ उत्तर आम तौर पर उच्च गुणवत्ता के होते हैं, और upvotes को आकर्षित करने की अधिक संभावना होती है।

— मार्क रोटेवेल

पृष्ठभूमि के रूप में एक्शनBarItemBackground की स्थापना की तुलना में चिकनी। लेकिन अभी भी बिल्कुल एक्शन बार एनीमेशन के समान नहीं है।

— coolcool1994

Answer 9

यदि आप लहर प्रभाव चाहते हैं जो सर्कल की सीमा को पार नहीं करेगा, तो आप इस कोड की जांच कर सकते हैं। यह मेरे लिए पूरी तरह से काम करता है। बस याद रखें, आपको ripple_blue.xml में id = @ android: id / mask देना होगा

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

Answer 10

बस इस आइटम को अपने में जोड़ें

           <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?android:attr/actionBarItemBackground"
                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />

Comments

इसके समान लगता है: stackoverflow.com/a/54440773/878126 ।

— Android डेवलपर

Answer 11

Kotlin / Java में आप निम्न कार्य कर सकते हैं

fun View.applyCircularRippleEffect() {
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) {
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    }
}

// getResource extension
fun Context.getResource(resourceId: Int): Int {
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId
}

Comments

— reference.getResource

@RahulMandaliya टिप्पणी के लिए धन्यवाद। मेरा बुरा, यह मेरी कस्टम विस्तार विधि थी। इसे उत्तर में जोड़ा गया

— mihails.kuzmins