Tôi đã tạo một nút và tôi muốn thêm hiệu ứng gợn sóng vào nút đó!

Tôi đã tạo tệp XML bg nút: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

Và đây là tệp hiệu ứng gợn sóng của tôi: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Và đây là Nút của tôi mà tôi muốn thêm hiệu ứng gợn sóng:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

Nhưng sau khi thêm hiệu ứng gợn sóng, nền của nút sẽ trong suốt và nút chỉ hiển thị khi được nhấp vào, như thế này:

Trước khi nhấp

Trong một cái nhấp chuột

Nhưng tôi cần cả màu nền của nút và hiệu ứng gợn sóng, tôi đã tìm thấy một số mã này trong các blog khác nhau của Stack Overflow, nhưng nó vẫn không hoạt động!

Đây là một xml có thể vẽ khác dành cho những ai muốn thêm tất cả nền gradient, bán kính góc và hiệu ứng gợn sóng lại với nhau:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

Thêm cái này vào nền nút của bạn.

<Button
    ...
    android:background="@drawable/button_background" />

Tái bút: câu trả lời này hoạt động cho android api 21 trở lên.

Thêm thuộc tính "?attr/selectableItemBackground"vào chế độ xem của bạn android:foregroundnếu chế độ xem đã có nền cùng với android:clickable="true".

Thêm hiệu ứng / hoạt ảnh Ripple vào nút Android

Chỉ cần thay thế thuộc tính nền nút của bạn bằng android: background = "? Attr / selectableItemBackground" và mã của bạn trông như thế này.

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:text="New Button" />

Một cách khác để thêm hiệu ứng / hoạt ảnh Ripple vào nút Android

Sử dụng phương pháp này, bạn có thể tùy chỉnh màu hiệu ứng gợn sóng. Đầu tiên, bạn phải tạo một tệp xml trong thư mục tài nguyên có thể vẽ của bạn. Tạo tệp ripple_effect.xml và thêm mã sau. res / drawable / ripple_effect.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="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Và đặt nền của nút thành tệp tài nguyên có thể vẽ ở trên

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:padding="16dp"
    android:text="New Button" />

Ngoài giải pháp của Jigar Patel , hãy thêm chất này vào ripple.xml để tránh nền trong suốt của các nút.

<item
    android:id="@android:id/background"
    android:drawable="@color/your-color" />

Hoàn thành xml :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/your-color"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/your-color" />
        </shape>
    </item>
    <item
        android:id="@android:id/background"
        android:drawable="@color/your-color" />
</ripple>

Sử dụng ripple.xml này làm nền trong nút của bạn:

android:background="@drawable/ripple"

Khi nút có nền từ có thể vẽ, chúng ta có thể thêm hiệu ứng gợn sóng vào tham số nền trước .. Kiểm tra mã bên dưới của nó hoạt động đối với nút của tôi với nền khác

    <Button
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:layout_centerHorizontal="true"                                                             
    android:background="@drawable/shape_login_button"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:text="@string/action_button_login"
     />

Thêm thông số bên dưới cho hiệu ứng gợn sóng

   android:foreground="?attr/selectableItemBackgroundBorderless"
   android:clickable="true"

Tham khảo thêm link dưới https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

AppCompat v7 +

Nếu bạn không đặt tiền tố ?android:ứng dụng của bạn sẽ bị lỗi.

Bạn nên sử dụng "?android:attr/selectableItemBackground"hoặc "?android:attr/selectableItemBackgroundBorderless", dựa trên sở thích của bạn. Tôi thích hơn Borderless.

Bạn có thể đặt nó vào android:backgroundhoặc android:foregroundgiữ các thuộc tính hiện có.

Phần tử phải có android:clickable="true"và android:focusable="true"để điều này hoạt động, nhưng nhiều phần tử, chẳng hạn như các nút, có chúng truetheo mặc định.

<Button
    ...
    android:background="@color/white"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
    ...
    android:background="?android:attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:focusable="true"
/>

Lập trình (Java)

TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type

Có lập trình (Kotlin)

val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type

Chức năng mở rộng Kotlin có thể tái sử dụng

myView.ripple()

fun View.ripple(): View {
    val value = TypedValue()
    context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
    setBackgroundResource(value.resourceId)
    isFocusable = true // Required for some view types
    return this
}

Thêm thuộc tính nền trước và có thể nhấp đã làm việc cho tôi.

<Button
    ... 
    android:background="@color/your_color"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true" />

Ngoài Sudheesh R

Thêm Hiệu ứng / Hoạt ảnh Ripple vào một nút Android với nút hình chữ nhật có góc

Tạo tệp xml res / drawable / your_file_name.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/colorWhite"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorAccent"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="50dp" />
        </shape>
    </item>
</ripple>

Khi bạn sử dụng android: background, bạn đang thay thế phần lớn kiểu dáng và giao diện của một nút bằng màu trống.

Cập nhật: Kể từ phiên bản 23.0.0 của AppCompat, có một Widget.AppCompat.Button mới, một kiểu màu sử dụng colorButtonNormal của chủ đề cho màu đã tắt và colorAccent cho màu đã bật.

Điều này cho phép bạn áp dụng nó vào nút của mình trực tiếp qua

<Button
 ...
style="@style/Widget.AppCompat.Button.Colored" />

Bạn có thể sử dụng một tệp có thể vẽ trong thư mục v21 cho nền của mình, chẳng hạn như:

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

Điều này sẽ đảm bảo màu nền của bạn là? Attr / colorPrimary và có hoạt ảnh gợn sóng mặc định bằng cách sử dụng? Attr / colorControlHighlight mặc định (bạn cũng có thể đặt trong chủ đề của mình nếu muốn).

Lưu ý: bạn sẽ phải tạo một bộ chọn tùy chỉnh cho ít hơn v21:

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

thử cái này

<Button
            android:id="@+id/btn_location"
            android:layout_width="121dp"
            android:layout_height="38dp"
            android:layout_gravity="center"
            android:layout_marginBottom="24dp"
            android:layout_marginTop="24dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            android:background="@drawable/btn_corner"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="13dp"
            android:paddingRight="13dp"
            android:text="Save"
            android:textColor="@color/color_white" />

Một cách tiếp cận đơn giản là đặt chủ đề chế độ xem như được nêu ở đây .

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>

Chỉ dùng :

android:backgroundTint="#f816a463"

Thay vì:

android:background="#f816a463"

Đừng quên thay đổi của bạn Buttonthànhandroid.support.v7.widget.AppCompatButton

Một giải pháp thay thế để sử dụng <ripple>thẻ (mà cá nhân tôi không muốn làm, vì màu không phải là "mặc định"), là:

Tạo một nền có thể vẽ được cho nền nút và đưa <item android:drawable="?attr/selectableItemBackground">vào<layer-list>

Sau đó (và tôi nghĩ đây là phần quan trọng) được lập trình backgroundResource(R.drawable.custom_button)trên phiên bản nút của bạn.

Hoạt động / Phân mảnh

Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);

Bố trí

<Button
    android:id="@+id/btn_temp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button"
    android:text="Test" />

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:drawable="?attr/selectableItemBackground" />
</layer-list>