1. ホーム
  2. android

[解決済み] ボタンの背景色で波紋効果を追加する?

2022-04-26 02:40:50

質問

ボタンを作成したのですが、そのボタンに波紋効果をつけたいのですが、どうすればいいですか?

ボタンの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" />

追記:この回答は、android api 21 以上で動作します。