web-dev-qa-db-ja.com

クリックされたときにボタンに円形の波紋を作成する方法は？

バックグラウンド

Androidのダイヤラーアプリで何かの検索を開始し、EditTextの左側にある矢印ボタンをクリックすると、円形の波紋効果が表示されます。

enter image description here

問題

私もそれを試してみましたが、長方形のものを手に入れました：

    <ImageButton
        Android:id="@+id/navButton"
        Android:layout_width="40dp"
        Android:layout_height="40dp"
        Android:layout_gravity="center_vertical"
        Android:layout_marginLeft="8dp"
        Android:background="?android:attr/selectableItemBackground"
        Android:src="@drawable/search_ic_back_arrow"/>

質問

クリックされたときにボタンに円形の波紋効果を持たせるにはどうすればよいですか？新しいドロウアブルを作成する必要がありますか、それともその方法が組み込まれていますか？

androidbuttonrippledrawable
95
android developer

すでに背景画像がある場合、selectableItemBackgroundBorderlessに近い波紋の例を次に示します。

            <ImageButton
                Android:id="@+id/btn_show_filter_dialog"
                Android:layout_width="24dp"
                Android:layout_height="24dp"
                Android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_pressed="true"
        Android:state_enabled="true"
        Android:drawable="@drawable/state_pressed_ripple"/>
    <item
        Android:state_enabled="true"
        Android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml：（白い背景で不透明度を10％に設定）1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:Android="http://schemas.Android.com/apk/res/Android">
        <item>
            <shape Android:shape="oval">
                <solid Android:color="#1AFFFFFF"/>
            </shape>
            <color Android:color="#FFF"/>
        </item>
    </ripple>
14
live-love

AppCompatテーマを使用している場合、ビューの背景を次のように設定できます。

Android:background="?selectableItemBackgroundBorderless"

これにより、21以上で円形のリップルが追加され、21以下で正方形の背景が追加されます。

230
bond

特にアクションバー用の、ラウンドリップル効果を持つ別の属性：

Android:background="?actionBarItemBackground"
45
Anrimian

背景としてリップルドローアブルを作成して設定します。このようなもの。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/grey_15">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="oval">
            <solid Android:color="?android:colorPrimary"/>
        </shape>
        <color Android:color="@color/white"/>
    </item>
</ripple>
40
Thomas R.

XmlのAndroid:radius属性を使用して、円リップル描画可能を作成できます。

例：

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="your_color"
    Android:radius="your_radius" />

your_radiusはビューの幅と高さよりも小さくする必要があることに注意してください。たとえば、サイズが60dp x 60dpのビューがある場合、your_radiusは30dp（width/2またはheight/2）に近いはずです。

Android 5.0以降で動作します。

13
Volodymyr Yatsykiv

この背景をビューに追加してください"Android:background=?android:attr/actionBarItemBackground"

9
Dipak

より一般的なXMLファイルが必要な場合、2つのファイルがあります。

1）btn_ripple_backgroundコード付き：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
    Android:state_pressed="true"
    Android:state_enabled="true"
    Android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2）ripple_circuler_shapeコードあり：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/btn_state_pressed_text_color"
    Android:shape="oval">
    <solid Android:color="@color/btn_state_pressed_text_color" />
</shape>

最後に使用法：Android:foreground="@drawable/ripple_btn_background"

3
100RaBH