RecyclerView आइटम में रिपल इफेक्ट जोड़ना


105

मैं RecyclerView के आइटम में रिपल इफेक्ट जोड़ने की कोशिश कर रहा हूं। मेरे पास ऑनलाइन एक नज़र थी, लेकिन मुझे वह नहीं मिला, जिसकी मुझे ज़रूरत है। मुझे लगता है कि यह एक कस्टम प्रभाव होना चाहिए। मैंने एंड्रॉइड की कोशिश की है: RecyclerView के लिए बैकग्राउंड एट्रिब्यूट और इसे "एंड्रॉइड: सेलेबल इटेमबेकग्राउंड" पर सेट करें, लेकिन यह काम नहीं किया।:

    <android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:clickable="true"
    android:background="?android:selectableItemBackground"
    android:id="@+id/recyclerView"
    android:layout_below="@+id/tool_bar"/>

यह RecyclerView है जिसे मैं इसमें जोड़ने की कोशिश कर रहा हूं:

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


1
मैं इसे फिर से खोल रहा हूं क्योंकि इस सवाल का कोई डुप्लिकेट नहीं है । यद्यपि समाधान समान हो सकते हैं, इस CardViewप्रश्न में एक होने के कुछ पहलू हैं जो इस सामान्य प्रश्न से संबंधित नहीं हैं।
सुरगाछ

@ सुरगच अंतर को नोटिस करने के लिए धन्यवाद :)
जॉर्जी कोमदेज़िवे

जवाबों:


222

मुझे पता लगा। केवल एक चीज जो मुझे करनी थी वह है इस विशेषता को जोड़ना:

android:background="?android:attr/selectableItemBackground"

लेआउट का मूल तत्व जिसे मेरा RecyclerView एडॉप्टर उस तरह से फुलाता है:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:background="?android:attr/selectableItemBackground"
    tools:background="@drawable/bg_gradient">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="17sp"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp"
        android:id="@+id/shoppingListItem"
        android:hint="@string/enter_item_hint"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/shopping_list_item_checkbox_label"
        android:id="@+id/shoppingListCheckBox"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:checked="false"/>

</RelativeLayout>

परिणाम:

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

यदि आप अभी भी तरंग प्रभाव नहीं देख पा रहे हैं, तो इन पंक्तियों को लेआउट के मूल तत्व में भी जोड़ें।

android:clickable="true"
android:focusable="true"

3
अगर मूल तत्व कार्ड व्यू है तो क्या होगा?
नबीन

6
@SpiderMan आपको अपने कोड को किसी रिलेटिव या रैखिक लेआउट के अंदर लिखना चाहिए और फिर इसे कार्ड लेआउट के अंदर रखें।
SanVed

7
@pronoobsanved, इससे मुझे मदद मिली! जो लोग अभी भी समस्या का सामना कर रहे हैं, उनके लिए CardView एक बच्चे के रूप में एक ही लेआउट लेता है। उस बच्चे के लिए, सच और पृष्ठभूमि के रूप में क्लिक करने योग्य, ध्यान देने योग्य सेट करें; Attr /
selectableItemBackground

42
@NabinKhadka फॉर ए कार्डव्यू ने इसे अग्रभूमि के रूप में सेट किया, अर्थातandroid:foreground="?android:attr/selectableItemBackground"
लोर्ने लालबर्ते

6
मुझे android:clickable="true"यह काम करने के लिए विकल्प भी जोड़ना था
जोआक्विन इराचुक

69

जैसा कि पहले ही उत्तर दिया जा चुका है, सबसे आसान उपाय यह है कि अपनी RecyclerViewपंक्ति की पृष्ठभूमि के रूप में निम्न में से कोई एक जोड़ें :

  • android:background="?android:attr/selectableItemBackground"
  • android:background="?attr/selectableItemBackground"

हालाँकि यदि आप अनुभव कर रहे हैं समस्याओं का कर इस पद्धति से या यदि आप रंगों पर बेहतर नियंत्रण चाहते हैं, तो आप निम्न कार्य कर सकते हैं।

कस्टम लहर प्रभाव

यह उत्तर इस सरल Android RecyclerView उदाहरण के साथ शुरू हो रहा है । यह निम्न छवि की तरह दिखाई देगा।

तरंग प्रभाव उदाहरण GIF

प्री एपीआई 21 उपकरणों के लिए चयनकर्ता जोड़ें

एपीआई 21 (एंड्रॉइड 5.0 लॉलीपॉप) से पहले, एक RecyclerViewआइटम पर क्लिक करने से बस उसकी पृष्ठभूमि का रंग बदल गया (कोई लहर प्रभाव नहीं)। यही हम करने जा रहे हैं। यदि आपके पास अभी भी उन उपकरणों के साथ उपयोगकर्ता हैं, तो उनका उपयोग उस व्यवहार के लिए किया जाता है, इसलिए हम उनके बारे में बहुत अधिक चिंता करने वाले नहीं हैं। (बेशक, यदि आप वास्तव में उनके लिए लहर प्रभाव चाहते हैं, तो भी, आप एक कस्टम लाइब्रेरी का उपयोग कर सकते हैं ।)

अपने res/drawableफ़ोल्डर पर राइट क्लिक करें और नया> ड्रा करने योग्य संसाधन फ़ाइल चुनें । इसे कहते हैंcustom_ripple । ठीक क्लिक करें और निम्नलिखित कोड में पेस्ट करें।

custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

मैंनें इस्तेमाल किया colorAccent दबाए गए राज्य के लिए हाइलाइट रंग के रूप में क्योंकि यह पहले से ही उपलब्ध था, लेकिन आप जो भी रंग चाहते हैं उसे परिभाषित कर सकते हैं।

एपीआई 21+ उपकरणों के लिए तरंग प्रभाव जोड़ें

अपने res/drawableफ़ोल्डर पर राइट क्लिक करें और नया> ड्रा करने योग्य संसाधन फ़ाइल चुनेंcustom_rippleफिर से बुलाओ । ठीक है पर क्लिक न करें, फिर भी इस बार, हालांकि। से उपलब्ध क्वालिफायर सूची चुनें संस्करण , उसके बाद >> बटन और लिखने 21के लिए प्लेटफ़ॉर्म API स्तर । अब OK पर क्लिक करें और निम्नलिखित कोड में पेस्ट करें।

V21 / custom_ripple.xml

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

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

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

पृष्ठभूमि के रूप में सेट करें

अपने RecyclerView आइटम के रूट लेआउट में, उस पृष्ठभूमि को सेट करें जिसे हमने बनाया है।

android:background="@drawable/custom_ripple"

हमारे द्वारा शुरू की गई उदाहरण परियोजना में , यह इस तरह दिखता है:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/custom_ripple"
    android:padding="10dp">

    <TextView
        android:id="@+id/tvAnimalName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>

</LinearLayout>

ख़त्म होना

बस। अब आपको अपना प्रोजेक्ट चलाने में सक्षम होना चाहिए। इस उत्तर और मदद के लिए इस YouTube वीडियो के लिए धन्यवाद ।


यदि आप एक डिफॉल्ट बैकग्राउंड कलर करना चाहते हैं, तो बस 'android: id = "@ android: id / mask' लाइन को हटा दें और फिर जो भी आप चाहते हैं, उसका रंग सेट करें।
जॉर्डन होचस्टलर

26

मुझे लगता है कि एक छोटा विवरण है जो छूट गया है।

यदि android:background="?android:attr/selectableItemBackground"लेआउट के मूल में इन निम्न पंक्तियों को जोड़ने का प्रयास करने के बाद भी आपको रिपल इफ़ेक्ट नहीं मिलता है ।

android:clickable="true"
android:focusable="true"

ये सुनिश्चित करेंगे कि दृश्य क्लिक करने योग्य है और ऊपर वर्णित पृष्ठभूमि विशेषता के साथ तरंग प्रभाव को सक्षम करेगा


5

अपने एडेप्टर xml रूट दृश्य में इस पंक्तियों को जोड़ें

android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"

2

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

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>

अन्य कस्टम कार्यान्वयन यहाँ पाए जा सकते हैं


1

बटन शैली का उपयोग करना

इसने मेरे लिए अनगिनत काम किया है।

अपने लेआउट के मूल तत्व में Borderless बटन शैली जोड़ें। इसके लिए focusableया clickableविशेषताओं की कोई आवश्यकता नहीं है , डिफ़ॉल्ट स्टाइल आपके लिए वह सब कुछ समाप्‍त कर देता है।

<androidx.constraintlayout.widget.ConstraintLayout
    style="@android:style/Widget.Material.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

शांत, लेकिन यह पैडिंग जोड़ रहा है
ededede

@ededede आप मिनट-ऊँचाई, अधिकतम-ऊँचाई, चौड़ाई ... XML विशेषताओं का उपयोग करके इसे अपने स्वाद के अनुरूप बना सकते हैं।
फेलिक्स फेम चिनेरेम
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.