web-dev-qa-db-ja.com

シンプルなレイアウトでリップル効果を作成する方法

レイアウトに触れるときに、単純な線形/相対レイアウトでリップル効果を得るにはどうすればよいですか？

レイアウトの背景を次のように設定しようとしました：

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

    <item Android:drawable="@Android:color/white"/>

</ripple>

ただし、レイアウトに触れると、真っ白な背景のみが表示され、波紋効果は表示されません。私は何が間違っていますか？

編集：

参考までに、ここに私のレイアウトxmlファイルを示します。

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="250dp"
        Android:layout_height="250dp"
        Android:background="@drawable/test"
        Android:clickable="true">
    </RelativeLayout>
androidandroid-5.0-lollipoprippledrawable
86
Zach

これは意図したとおりに機能していることがわかります。標準のマテリアルテーマcolorControlHighlightの値は#40ffffffです。したがって、白い背景では、これは表示されません。ハイライトの色を他の色に変更したり、オブジェクトの背景色を変更したりできます。

すべてに感謝します（特に私を正しい方向に向けてくれたAlanv）。

18
Zach

レイアウトにこれらのプロパティを設定します（レイアウトにデフォルトの白/明るい背景がある場合）：

          Android:clickable="true"
          Android:focusable="true"
          Android:background="?attr/selectableItemBackground"

この場合、カスタムのドロアブルは必要ありません。

ただし、レイアウトの背景が黒/濃い場合は、次のような独自のリップルドローアブルを作成する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@Android:color/white">
    <item
        Android:id="@Android:id/mask"
        Android:gravity="center">
        <shape Android:shape="rectangle">
            <solid Android:color="@Android:color/white"/>
        </shape>
    </item>
</ripple>

そして、このリップルドローアブルをAndroid：backgroundプロパティとして設定します。

AOSPには、これらのタイプのリップルの多くの例を見ることができます。 in here

198
IgorGanapolsky

Igor Ganapolsky の答えに加えて、これを追加します。誰かが異なる色のレイアウトを持ち、波及効果も持ちたい場合に備えて。次のようなドロウアブルにリップル効果を作成するだけです。

ripple.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/rippleColor"
    tools:targetApi="Lollipop"> <!-- ripple effect color -->
    <item Android:id="@Android:id/background">
        <shape Android:shape="rectangle">
            <solid Android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

次に、レイアウトの背景またはボタンとして Igor Ganapolsky のように答えてください。

Android:clickable="true"
Android:background="@drawable/ripple"
50
Erfan GLMPR

任意のウィジェット（TextView/Button）で次のコードスニペットを変更する必要があり、リップル効果を実装できます。

Android:clickable="true"
Android:focusable="true"
Android:foreground="?attr/selectableItemBackground"

そして、あなたは行ってもいいです。

24
Pankaj Lilan

レイアウトにAndroid:clickable="true"を設定します。

9
JeromePApp
<?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="#cfd8dc"
    tools:targetApi="Lollipop">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

これを使用してくださいDrawableフォルダーのripple.xml、それをビューの

Android：background = "@ drawable/ripple"

Android：clickable = "true"

4
Abhishek Sengupta

Android:background="?selectableItemBackground"でデフォルトのリップル効果を追加するだけです

いいね：

<LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:background="?selectableItemBackground"
            Android:clickable="true"
            >

           ...

</LinearLayout>
2
yatin deokar

これをレイアウトに追加します。

Android:clickable="true"
Android:background="?attr/selectableItemBackground"

注：APIドキュメントにはバグがあります。 API> = 23でのみ動作します

すべてのAPIlevelsこれを使用 Solution

0
Andrej Sitar

私はそれらの答えをすべて試してみましたが、何もうまくいきませんでした。そこで、次のスタイルを作成することを解決しました。

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="Android:minHeight">0dp</item>
    <item name="Android:minWidth">0dp</item>
    <item name="Android:layout_marginLeft">-6dp</item>
    <item name="Android:layout_marginRight">-6dp</item>
    <item name="Android:paddingTop">0dp</item>
    <item name="Android:paddingBottom">0dp</item>
    <item name="Android:paddingLeft">6dp</item>
    <item name="Android:paddingRight">6dp</item>
</style>

次に、線形レイアウトに適用しました。

<LinearLayout
      Android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
0
Ângelo Polotto

これは、波及効果のあるサンプルレイアウトをクリックする例です。

 <LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="?attr/selectableItemBackground"
    Android:clickable="true"
    Android:focusable="true"
    Android:orientation="vertical">
0
J.Sattar