web-dev-qa-db-ja.com

ボタンの背景色でボタンに波及効果を追加しますか？

ボタンを作成し、そのボタンに波及効果を追加したいです。

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

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

クリックする前に

クリックで

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

androidandroid-layoutandroid-drawablerippledrawable
83
rakcode

グラデーションの背景、コーナーの半径、波紋効果をまとめて追加したい人のためのもう1つの描画可能な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" />
83
Pei

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

111
backslashN

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" />
55
Jigar Patel

Jigar Patelの解決策に加えて、これを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"
30
Sudheesh R

ボタンがドロウアブルからの背景を持っているとき、私たちは前景パラメータに波及効果を加えることができます。

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

26
Jasmine John

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

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

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

Android：backgroundを使用すると、ボタンのスタイルや外観の多くが空白の色に置き換えられます。

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

これにより、ボタンを介してボタンに直接適用することができます。

<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>
4
Atman Bhatt

これを試して

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

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>
4
Digvijay Machale

ただ使用してください：

Android:backgroundTint="#f816a463"

の代わりに：

Android:background="#f816a463"

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

2
Gilad Shapira

<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>
1
Aidan Host