ボタンを作成し、そのボタンに波及効果を追加したいと思います！

ボタンbg XMLファイルを作成しました：（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>

そして、これは私の波及効果ファイルです：（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>

そして、これは私が波及効果を追加したい私のボタンです：

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

しかし、リップル効果を追加した後、ボタンの背景は透明になり、ボタンはクリックされたときのみ次のように表示されます。

クリックする前

クリック時

しかし、ボタンの背景色と波及効果の両方が必要です。このコードの一部をスタックオーバーフローの別のブログで見つけましたが、それでも機能しません。

以下は、グラデーションの背景、角の半径、波紋効果をすべて一緒に追加したい人のための別の描画可能なxmlです。

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

これをボタンの背景に追加します。

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

に背景がすでにある場合は"?attr/selectableItemBackground"、ビューのandroid:foreground属性にを追加しますandroid:clickable="true"。

Androidボタンにリップルエフェクト/アニメーションを追加する

ボタンの背景属性をandroid：background = "？attr / selectableItemBackground"に置き換えるだけで、コードは次のようになります。

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

Androidボタンに波紋効果/アニメーションを追加する別の方法

この方法を使用すると、リップル効果の色をカスタマイズできます。まず、ドローアブルリソースディレクトリにxmlファイルを作成する必要があります。ripple_effect.xmlファイルを作成し、次のコードを追加します。 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>

ボタンの背景を上記のドローアブルリソースファイルに設定します

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

加えて、Jigarパテルの溶液にこれを追加しripple.xmlボタンの透明な背景を避けるために。

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

完全な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>

ボタンの背景として、このripple.xmlを使用します。

android:background="@drawable/ripple"

ボタンにドローアブルの背景がある場合、前景パラメーターにリップル効果を追加できます。以下のコードを確認して、異なる背景を持つボタンの動作を確認してください

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

波及効果のために以下のパラメータを追加します

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

以下のリンクを参照してください https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

AppCompat v7 +

プレフィックスを付けないと?android:、アプリがクラッシュします。

好みに応じて、"?android:attr/selectableItemBackground"またはを使用する必要"?android:attr/selectableItemBackgroundBorderless"があります。私は好むBorderless。

あなたはどちらかにそれを置くことができるandroid:backgroundか、android:foreground既存のプロパティを維持します。

これが機能するにはandroid:clickable="true"、要素にとが必要ですが、android:focusable="true"ボタンなどの多くの要素には、trueデフォルトでそれらが含まれています。

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

プログラムで（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

プログラム的に（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

再利用可能なKotlin拡張関数

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
}

前景とクリック可能な属性を追加するとうまくいきました。

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

Sudheesh Rに加えて

角のあるボタン長方形の形状を持つAndroidボタンに波紋効果/アニメーションを追加する

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>

android：backgroundを使用すると、ボタンのスタイリングとルックアンドフィールの多くが空白の色に置き換わります。

更新：AppCompatのバージョン23.0.0リリース以降、新しいWidget.AppCompat.Button.Aの色付きスタイルがあり、無効な色にはテーマのcolorButtonNormal、有効な色にはcolorAccentを使用します。

これにより、ボタンに直接適用できます

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

次のような背景には、v21ディレクトリのドローアブルを使用できます。

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

これにより、背景色が？attr / colorPrimaryになり、デフォルトの？attr / colorControlHighlight（必要に応じてテーマに設定することもできます）を使用したデフォルトのリップルアニメーションが設定されます。

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

これを試して

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

簡単な方法は、ここで概説するようにビューのテーマを設定することです。

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>

ただ使う：

android:backgroundTint="#f816a463"

の代わりに：

android:background="#f816a463"

に変更するButtonことを忘れないでくださいandroid.support.v7.widget.AppCompatButton

を使用する代替ソリューション <ripple>タグ（色が「デフォルト」ではないため、個人的ない方がよい）は次のとおりです。

ボタンの背景にドローアブルを作成<item android:drawable="?attr/selectableItemBackground">し、<layer-list>

次に（これは重要な部分だと思います）、プログラムでbackgroundResource(R.drawable.custom_button)ボタンのインスタンスを設定します。

アクティビティ/フラグメント

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

レイアウト

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