सरल लेआउट में तरंग प्रभाव कैसे बनाएं


112

लेआउट को स्पर्श करते समय मैं एक सरल रैखिक / सापेक्ष लेआउट में एक लहर प्रभाव कैसे कर सकता हूं?

मैंने लेआउट की पृष्ठभूमि को कुछ इस तरह सेट करने की कोशिश की है:

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

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

</ripple>

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

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

संदर्भ के लिए, यहाँ मेरा लेआउट xml फ़ाइल है:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

2
रिपल को होस्ट करने का दृश्य सक्षम और क्लिक करने योग्य या ध्यान देने योग्य होना चाहिए।
अलानव

धन्यवाद एलनव, मेरी प्रतिक्रिया के लिए नीचे देखें। मूल रूप से मैं अपने लेआउट को चिह्नित कर रहा हूं मैं क्लिक करने योग्य के रूप में लहर प्रभाव चाहता हूं, लेकिन यह अभी भी काम नहीं करता है।
Zach

इसके अलावा, यदि मैं <item android:drawable="@android:color/white"/>अनुभाग को हटाता हूं तो यह ठीक काम करता है । इसलिए मुझे यकीन नहीं है कि अगर मुझे लेआउट पर पृष्ठभूमि का रंग चाहिए तो यह कैसे काम करना चाहिए। पृष्ठभूमि रंग के साथ एक और लेआउट के शीर्ष पर यह भी काम नहीं करता है!
ज़च

4
आपके विचार में किस रंग को खींचा जा रहा है, उदाहरण के लिए कलर किस रंग को नियंत्रित करता है?
एलानव

जवाबों:


260

इन गुणों को अपने लेआउट पर सेट करें (यदि आपके लेआउट में डिफ़ॉल्ट सफेद / प्रकाश पृष्ठभूमि है):

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

आपको इस मामले में एक कस्टम ड्रॉबल की आवश्यकता नहीं है।

हालाँकि, यदि आपके लेआउट में एक काले / गहरे रंग की पृष्ठभूमि है, तो आपको इस तरह से अपना स्वयं का तरंग बनाने योग्य बनाना होगा:

<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white">
    <item
        android:id="@android:id/mask"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

और फिर इस तरंग को अपने Android: बैकग्राउंड प्रॉपर्टी के रूप में ड्रा करने योग्य सेट करें ।

आप AOSP में इन प्रकार के तरंगों के कई उदाहरण देख सकते हैं: यहाँ


11
क्या होगा अगर मुझे पृष्ठभूमि के रूप में अलग रंग देना है? तो फिर सबसे अच्छा तरीका क्या होना चाहिए?
अनुज शर्मा

1
@AnujSharma क्या आपने रंग संसाधन देने की कोशिश की है background?
इगोरगानपोलस्की


31
यदि आप एक और पृष्ठभूमि रंग चाहते हैं, तो आप उस रंग को पृष्ठभूमि के रूप में सेट कर सकते हैं और "रख सकते हैं?"
लुकास अर्टेल्टेल

2
वाह! यह महान है। इसे उत्तर +1
ज़िया उर रहमान

59

मैं इगोर गानापोलस्की के जवाब के अलावा इसे जोड़ रहा हूं , अगर कोई अलग रंग के साथ एक लेआउट चाहता है और इसका एक प्रभावशाली प्रभाव भी है। आप बस इस तरह की ड्रॉबल्स में एक लहर प्रभाव बनाते हैं:

ripple.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/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

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

android:clickable="true"
android:background="@drawable/ripple"

37

आपको किसी भी विजेट ( TextView/ Button) में कोड स्निपेट को बदलना होगा और आप रिपल इफेक्ट को लागू कर सकते हैं :

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

और आप जाने के लिए अच्छे हैं।


हम्म अग्रभूमि? यह महान है!
बद्र

यदि आपके पास पहले से ही एक android: background = "@ color / colorAccent" सेट है तो यह मददगार है
aero

@aero यह मददगार है, भले ही आप कोई भी पृष्ठभूमि सेट न करें।
पंकज लीलण

1
यह विगेट्स के अलावा लेआउट और कस्टम दृश्यों पर काम करता है।
anoo_radha

1
@MichaelKern हाँ, आप सही कह रहे हैं, यह भी उनके कोड में हर किसी की आवश्यकता पर आधारित है।
पंकज लीलण

20

यह इस उद्देश्य के अनुसार काम कर रहा है। मानक सामग्री विषय colorControlHighlight मान है #40ffffff। तो एक सफेद पृष्ठभूमि पर, यह दिखाई नहीं देगा। हाइलाइट कलर को किसी और चीज़ में बदलना, और / या ऑब्जेक्ट का बैकग्राउंड कलर बदलना।

सभी को धन्यवाद (विशेषकर एलनव ने मुझे सही दिशा में इंगित करने के लिए)।


अगर मैं android का उपयोग कर रहा हूं: पृष्ठभूमि = "? मेरे विचार पर attr / selectableItemBackground" मैं ऑब्जेक्ट की पृष्ठभूमि कैसे बदल सकता हूं?
codekraps

1
कोई बात नहीं, मैंने पाया कि SelectableItemBackground डिफ़ॉल्ट स्थिति पारदर्शी है। इसलिए, मैं उस रंग के साथ एक दृश्य निर्धारित करता हूं जिसे मैं चाहता था।
कोडक्रेप्स

1
त्वरित नोट: आप colorControlHighlightअपने में बदल सकते हैं styles.xml। उदाहरण के लिए इसे अपने कस्टम थीम में जोड़ें।
नुहमैन


5

यह तरंग प्रभाव के साथ एक नमूना लेआउट पर क्लिक करने के लिए एक उदाहरण है:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

यह कितना सरल है कि यह कितना सरल है और सरल तथ्य यह है कि यह बस काम करता है ™।
मचाडो

4
<?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="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

ड्रा करने योग्य फ़ोल्डर में इस ripple.xml का उपयोग करें , फिर इसे व्यू के रूप में असाइन करें

एंड्रॉयड: पृष्ठभूमि = "@ drawable / तरंग"

एंड्रॉयड: क्लिक करने योग्य = "true"


2

बस के साथ डिफ़ॉल्ट लहर प्रभाव जोड़ें android:background="?selectableItemBackground"

पसंद:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

0

इसे अपने लेआउट में डालें:

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

नोट: एपीआई प्रलेखन में एक बग है। यह केवल API> = 23 पर काम करेगा

के लिए सभी एपीआई का स्तर इस का उपयोग समाधान


2
आपका लिंक इसी पृष्ठ को पुनः निर्देशित करता है
TSR

ध्यान रखें कि आपके पास एंड्रॉइड: बैकग्राउंड = "का उपयोग करने का विकल्प भी है?" Attr / selectableItemBackgroundBorderless "इसके साथ सीमा कम होने के कारण रिपल इफेक्ट पैरेंट दृश्य तक विस्तारित हो जाएगा। यह कई मामलों में बेहतर लग सकता है।
माइकल केर्न

0

मैं उन सभी उत्तरों की कोशिश करता हूं और मेरे लिए कुछ भी काम नहीं करता है, इसलिए, मैंने निम्नलिखित शैली बनाने का हल किया:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

और फिर, मैंने अपने रैखिक लेआउट पर लागू किया:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.