Cách tạo hiệu ứng gợn sóng trong bố cục đơn giản

Làm cách nào để tạo hiệu ứng gợn sóng trong bố cục tuyến tính / tương đối đơn giản khi chạm vào bố cục?

Tôi đã thử đặt nền của bố cục thành một cái gì đó như:

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

Tuy nhiên, tôi chỉ nhìn thấy một nền trắng đơn giản và không có hiệu ứng gợn sóng khi chạm vào bố cục. Tôi đang làm gì sai?

Biên tập:

Để tham khảo, đây là tệp xml bố cục của tôi:

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

Đặt các thuộc tính này trên bố cục của bạn (nếu bố cục của bạn có nền trắng / sáng mặc định):

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

Bạn không cần có thể vẽ tùy chỉnh trong trường hợp này.

Tuy nhiên, nếu bố cục của bạn có nền đen / tối, bạn phải tạo gợn sóng có thể vẽ của riêng mình như hình sau:

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

Và sau đó đặt ripple drawable này làm thuộc tính android: background của bạn .

Bạn có thể xem nhiều ví dụ về các loại gợn sóng này trong AOSP: tại đây

Tôi thêm điều này ngoài câu trả lời của Igor Ganapolsky trong trường hợp bất kỳ ai muốn có một bố cục với màu sắc khác và cũng có hiệu ứng gợn sóng. Bạn chỉ cần tạo hiệu ứng gợn sóng trong các ngăn kéo như thế này:

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>

sau đó đặt nó làm nền cho bố cục của bạn hoặc bất kỳ nút nào như Igor Ganapolsky đã đề cập trong câu trả lời của mình.

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

Bạn phải thay đổi đoạn mã sau trong bất kỳ tiện ích con nào ( TextView/ Button) và bạn có thể triển khai Hiệu ứng Ripple :

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

Và bạn tốt để đi.

Nó chỉ ra điều này đang hoạt động như dự định. Giá trị colorControlHighlight của chủ đề Material chuẩn là #40ffffff. Vì vậy, trên nền trắng, điều này sẽ không hiển thị. Thay đổi màu tô sáng thành một thứ khác có tác dụng và / hoặc thay đổi màu nền của đối tượng.

Cảm ơn tất cả (đặc biệt là Alanv đã chỉ cho tôi đúng hướng).

Đặt android:clickable="true"trên bố cục của bạn.

Đây là một ví dụ để nhấp vào một bố cục mẫu có hiệu ứng gợn sóng:

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

Sử dụng ripple.xml này trong thư mục Drawable , sau đó gán nó làm View's

android: background = "@ drawable / ripple"

android: clickable = "true"

Chỉ cần thêm hiệu ứng gợn sóng mặc định với android:background="?selectableItemBackground"

Giống:

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

           ...

</LinearLayout>

Đặt cái này vào bố cục của bạn:

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

Lưu ý: Có một lỗi trong tài liệu API. Nó sẽ chỉ hoạt động trên API> = 23

Đối với tất cả các cấp API, hãy sử dụng Giải pháp này

Tôi thử tất cả các câu trả lời đó và không có gì hiệu quả với tôi, vì vậy, tôi đã giải quyết việc tạo kiểu sau:

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

Và sau đó, tôi áp dụng cho bố cục tuyến tính của mình:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>