วิธีสร้างเอฟเฟกต์ระลอกคลื่นในรูปแบบง่ายๆ

ฉันจะมีเอฟเฟกต์ระลอกคลื่นในเลย์เอาต์เชิงเส้น / สัมพัทธ์อย่างง่ายได้อย่างไร

ฉันได้ลองตั้งค่าพื้นหลังของเค้าโครงเป็น:

<?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>

ตั้งค่าคุณสมบัติเหล่านี้บนเค้าโครงของคุณ (หากเค้าโครงของคุณมีพื้นหลังสีขาว / สีอ่อนเริ่มต้น):

          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: background ของคุณ

คุณสามารถดูตัวอย่างระลอกคลื่นประเภทนี้ใน AOSP ได้ที่นี่

ฉันกำลังเพิ่มสิ่งนี้นอกเหนือจากคำตอบของIgor Ganapolskyในกรณีที่ใครก็ตามต้องการจัดเลย์เอาต์ที่มีสีแตกต่างกันและมีเอฟเฟกต์ระลอกคลื่นด้วย คุณเพียงแค่สร้างเอฟเฟกต์ระลอกคลื่นใน drawables ดังนี้:

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>

จากนั้นให้เป็นพื้นหลังของเค้าโครงหรือปุ่มใด ๆ ตามที่Igor Ganapolskyกล่าวไว้ในคำตอบของเขา

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

คุณต้องแก้ไขข้อมูลโค้ดต่อไปนี้ในวิดเจ็ตใด ๆ ( TextView/ Button) และคุณสามารถใช้Ripple Effect :

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

และคุณพร้อมที่จะไป

ปรากฎว่าใช้งานได้ตามที่ตั้งใจไว้ มาตรฐานธีมวัสดุค่า colorControlHighlight #40ffffffคือ ดังนั้นบนพื้นหลังสีขาวสิ่งนี้จะไม่ปรากฏขึ้น การเปลี่ยนสีไฮไลต์เป็นอย่างอื่นใช้ได้ผลและ / หรือเปลี่ยนสีพื้นหลังของวัตถุ

ขอบคุณทุกคน (โดยเฉพาะ Alanv ที่ชี้ให้ฉันไปในทิศทางที่ถูกต้อง)

ตั้งค่าandroid:clickable="true"ในเค้าโครงของคุณ

นี่คือตัวอย่างสำหรับการคลิกที่เค้าโครงตัวอย่างที่มีเอฟเฟกต์ระลอกคลื่น:

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

<?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จากนั้นกำหนดเป็น View's

android: background = "@ drawable / ripple"

android: clickable = "จริง"

เพียงเพิ่มเอฟเฟกต์ระลอกเริ่มต้นด้วย android:background="?selectableItemBackground"

ชอบ:

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

           ...

</LinearLayout>

ใส่สิ่งนี้ลงในเลย์เอาต์ของคุณ:

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

หมายเหตุ: มีข้อบกพร่องในเอกสาร API จะใช้ได้เฉพาะกับAPI> = 23

สำหรับระดับAPI ทั้งหมดให้ ใช้โซลูชันนี้

ฉันลองคำตอบเหล่านั้นทั้งหมดและไม่มีอะไรได้ผลสำหรับฉันฉันจึงแก้ไขการสร้างสไตล์ต่อไปนี้:

<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>