Android Lollipop CardViewの波及効果


189

Android開発者ページで説明さているように、アクティビティXMLファイルでandroid:backgound属性を設定して、CardViewに触れたときにリップル効果を表示しようとしていますが、機能しません。アニメーションはまったくありませんが、onClickのメソッドが呼び出されます。ここで提案されているとおり、ripple.xmlファイルの作成も試みましたが、結果は同じです。

アクティビティのXMLファイルに表示されるCardView:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="155dp"
    android:layout_height="230dp"
    android:elevation="4dp"
    android:translationZ="5dp"
    android:clickable="true"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:onClick="showNotices"
    android:background="?android:attr/selectableItemBackground"
    android:id="@+id/notices_card"
    card_view:cardCornerRadius="2dp">

</android.support.v7.widget.CardView> 

私はAndroid開発に比較的慣れていないため、いくつかの明らかな間違いを犯した可能性があります。
前もって感謝します。

回答:


590

以下を追加する必要がありますCardView

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

8
リップル効果のあるロリポップで動作しますが、古いプラットフォームで実行した場合にのみ単色になります。私には十分です:)
マッハ

16
少し注意:クリック可能な属性は必須ではなく、いくつかのことを壊すことさえあることに気付きました!クリック可能なCardViewで満たされたGridViewがあり、リスナーが正しく機能していませんでした。XMLからクリック可能なタグを削除し、すべてが問題なく動作するようになりました
Joaquin Iurchuk

2
クリッカブルなしの@joaquinを使用すると、波紋が中央からのみ発生します
凍りつくような素晴らしい2015年

2
?android:attr/selectableItemBackgroundAPIレベル11が必要
Pratik Butani 2015

9
なしで働くandroid:clickable="true"
Sean

30

これらの2行のコードをxmlビューに追加して、cardViewに波及効果を与えます。

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

驚くばかり!foregroundチャームのようなカスタム背景ビューで動作します!いいね!
sud007 2017

24

私はなんとかカードビューに波及効果をもたらしました:

<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:clickable="true" 
    android:foreground="@drawable/custom_bg"/>

上記のコードで確認できるcustom_bgの場合、lollipop(drawable-v21パッケージ内)およびpre-lollipop(drawableパッケージ内)デバイスの両方に対してxmlファイルを定義する必要があります。drawable-v21パッケージのcustom_bgの場合、コードは次のとおりです。

<ripple 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"/>
</ripple>

ドローアブルパッケージのcustom_bgの場合、コードは次のとおりです。

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

<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/colorHighlight"></solid>
    </shape>
</item>
<item>
    <shape>
        <solid android:color="@color/navigation_drawer_background"></solid>
    </shape>
</item>
</selector>

したがって、ロリポップ前のデバイスではしっかりしたクリック効果があり、ロリポップデバイスではカードビューに波及効果があります。


1
こんにちは、私はCardViewの最前面にセレクタ(またはリップル)を適用することで実現する、それがCardView自身の子供たちをブロックします- stackoverflow.com/questions/33763403/...は、私が行ったように、あなたが同じPROBが発生します知っているかもしれませんか?または、何かを見逃していますか?ありがとう。
Cheok Yan Cheng

@CheokYanCheng:私はあなたのような問題に直面していませんが、個人的な経験から、cardViewにはロリポップ前のバグがいくつかあると思います。プレロリポップでcardview:elevationプロパティを使用しないでください。上記は私や他の賛成投票には問題ありません。
Rahul Ahuja、2015年

colorHighlightとnavigation_drawer_backgroundの値を教えてください。透明度なしで独自に定義した色を使用した場合でも、カードの子を見ることができますか?
Cheok Yan Cheng

@CheokYanCheng:値は、<color name = "navigation_drawer_background">​​#FFFFFF </ color> <color name = "colorHighlight">#FF8A65 </ color>
Rahul Ahuja、

私の場合は働きません。セレクタをフォアグラウンドとして使用します。予想通り、カードビューの前景として使用される白い純色(navigation_drawer_background)は、すべての子の可視性をブロックします-i.imgur.com/CleYh5B.pngこれは、前景としてセレクターを適用しない場合の外観です-i.imgur。 com / ZXk5Aoq.png
Yan Cheng

14

使用しているappcompatサポートライブラリでは、波及効果が省略されました。波紋を確認するには、Android Lバージョンを使用して、Android Lデバイスでテストします。AppCompat v7サイトごと:

「以前のロリポップに波紋がないのはなぜですか?RippleDrawableをスムーズに実行できるようにする多くの要素は、Android 5.0の新しいRenderThreadです。以前のバージョンのAndroidでパフォーマンスを最適化するために、今のところRippleDrawableを省略しています。」

このリンクをチェックアウトここの詳細は


それでおしまい。ありがとう!
AkraticCritic 2014年

39
しかし、その後、Android LollipopのcardViewにリップル効果をどのように適用しますか?
Android開発者

それで、appcompatを使用する下位互換性か、すべての新しい効果を使用するか、Androidコアのクラスを使用してAPI 21に制限するかを決定する必要がありますか?
Urs Reupke、2014

2つのうち21つ以上のAPKと<21のAPKを作成できます。または、21 +はsupportActionbarなどを使用しないため、コードを分割します。
Mathijs Segers 2014

1
これが、現時点で「純粋な」Android Lアプリケーションを作成することが現実的でない理由です。2015年7月の時点で、Androidユーザーベースの12%をターゲットにしています。
Glenn Bech

10

minSdkVersion作業しているアプリがレベル9の場合、次のアプリを使用できます。

android:foreground="?selectableItemBackground"
android:clickable="true"

代わりに、レベル11から始めて、次のものを使用します。

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

ドキュメントから:

clickable-このビューがクリックイベントに反応するかどうかを定義します。「true」または「false」のブール値でなければなりません。

foreground-コンテンツの上に描画するドローアブルを定義します。これはオーバーレイとして使用できます。フォアグラウンドドローアブルは、重力が塗りつぶされるように設定されている場合、コンテンツのパディングに参加します。


android:foreground = "?android:attr / selectableItemBackground"を使用すると、AndroidXとの互換性が確保されます。
dianakarenms

6

私にとって、を追加しforegroundても機能CardViewしませんでした(理由は不明です:/)

子のレイアウトに同じものを追加するとうまくいきました。

コード:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:focusable="true"
    android:clickable="true"
    card_view:cardCornerRadius="@dimen/card_corner_radius"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:id="@+id/card_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?android:attr/selectableItemBackground"
        android:padding="@dimen/card_padding">

    </LinearLayout>
</android.support.v7.widget.CardView>

2
これは、子供がイベントをインターセプトするためです。カードビューにパディングを追加するようなもの(20 dpなど)を試み、パディングを配置する部分をクリックすると、子供がいなくても波及効果が表示されますフォアグラウンド属性セット
Cruces

1
これは、新しいマテリアルコンポーネントであるcom.google.android.material.card.MaterialCardViewを使用して、私にとっても機能しました。カードビューの標高stateListAnimatorを使用して、標高を調整し、クリック可能な属性なしでフォアグラウンドで選択可能なアイテムの背景を持つ内部制約レイアウトに適用される波紋を設定しました。
Patty P

今は覚えていませんが、クリックイベントに反応しないように子ビューを設定する方法があります
Someone Somewhere

3

これら2つのようなコードを追加して、Button、Linear Layout、CardViewなどのビューのチャームのように機能します。これら2つの行を挿入して、魔法を見てください...

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

2

CardViewのすべてのアダプターアイテムのコンポーネントを含むRelativeLayoutやLinearLayoutのようなルートレイアウトがある場合、そのルートレイアウトで背景属性を設定する必要があります。お気に入り:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
card_view:cardCornerRadius="4dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/touch_bg"/>
</android.support.v7.widget.CardView>

2

Android Cardviewコントロールのリップルイベント:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:layout_marginBottom="4dp"
    android:layout_marginTop="4dp" />

1

AppCompatに満足できなかったため、独自のCardViewを記述し、リップルをバックポートしました。ここでは、ジンジャーブレッドを備えたGalaxy Sで実行されているため、それは確実に可能です。

Galaxy SのRippleのデモ

詳細については、ソースコードを確認してください。


リンクが壊れている
テミルベク2017

1

以下をXMLに追加します。

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

アダプターに追加します(それがあなたの場合)

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            val attrs = intArrayOf(R.attr.selectableItemBackground)
            val typedArray = holder.itemView.context.obtainStyledAttributes(attrs)
            val selectableItemBackground = typedArray.getResourceId(0, 0)
            typedArray.recycle()

            holder.itemView.isClickable = true
            holder.itemView.isFocusable = true
            holder.itemView.foreground = holder.itemView.context.getDrawable(selectableItemBackground)
        }
    }

0

プログラムで作成されたCardView(または私の場合はCardViewを拡張するカスタムビュー)がRecyclerViewに表示されないため、波及効果の問題の解決策を探している人にとって、次の方法でうまくいきました。基本的に、他の回答で言及されているXML属性をXMLレイアウトファイルで宣言的に宣言することは、プログラムで作成されたCardView、またはカスタムレイアウトから作成されたもの(ルートビューがCardViewまたはマージ要素が使用されている場合でも)では機能しないようです。それらはプログラムで次のように設定する必要があります:

private class MadeUpCardViewHolder extends RecyclerView.ViewHolder {
    private MadeUpCardView cardView;

    public MadeUpCardViewHolder(View v){
        super(v);

        this.cardView = (MadeUpCardView)v;

        // Declaring in XML Layout doesn't seem to work in RecyclerViews
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            int[] attrs = new int[]{R.attr.selectableItemBackground};
            TypedArray typedArray = context.obtainStyledAttributes(attrs);
            int selectableItemBackground = typedArray.getResourceId(0, 0);
            typedArray.recycle();

            this.cardView.setForeground(context.getDrawable(selectableItemBackground));
            this.cardView.setClickable(true);
        }
    }
}

パートのこの答えに対するMadeupCardView extends CardView称賛の場所。TypedArray


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

API 21のみを使用し、これを使用して、このリスト行カードビューを使用しない

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.