Androidでテキストビューまたはイメージビューにリップル効果を設定するにはどうすればよいですか?


127

Android Studioでテキストビューとイメージビューに波及効果を設定したい。どうすればできますか?


1
最初に質問を詳しく説明してください。実際に何が必要で、これまでに何を試しましたか。単に波及効果が欲しいと言っているだけで、非常に幅広い質問になります。また、必要なものを参照するためのリンクを提供することもできます。stackoverflowも参照してください。 com / help / how-to-ask
Anirudh Sharma

実際、私はテキストビューとイメージビューの選択/選択解除効果に効果が欲しいです。
Vasant 2015年

同じものを検索してみましたか?
Anirudh Sharma、2015

回答:


276

参照:http : //developer.android.com/training/material/animations.html

http://wiki.workassis.com/category/android/android-xml/

<TextView
.
.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
/>

<ImageView
.
.
.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
/>

2
ロリポップで私と一緒にうまくいきましたが、この方法はどのアンドロイドアンドロイドバージョンですか?そしてそれはプレロリポップで動作しますか?
Basheer AL-MOMANI 2016年

2
@Richard 1年前にKitKat(またはICS)で問題が発生し、クリックリスナーはそのバージョンのandroid:
clickable

25
Androidの最新バージョンでは、これは現在android:background="?android:attr/selectableItemBackground"
tmm1

2
カスタム背景が必要なときにこれをどのように使用できますか?
mrid


81

リップルをTextView / ImageViewのサイズに制限したい場合は、以下を使用します。

<TextView
android:background="?attr/selectableItemBackground"
android:clickable="true"/>

(見た目が良いと思います)


2
selectableItemBackgroundvsの使用に違いはありますかselectableItemBackgroundBorderless
rakesh kashyap

境界線に縛られず、レイアウト全体に拡大する理由がわかりません
VSB

4
@rakeshkashyapの違いは、selectableItemBackgroundがそのリップルをビューのサイズ(幅/高さ)内に維持することです。selectableItemBackgroundBorderlessは、リップルを他のビュー(公式の電卓アプリのリップルなど)に拡大します
Tudor

1
また、これを設定する必要があります>>> android:focusable = "true"
Amos

25

波及効果については以下の回答を参照してください。

Textviewまたはviewのリップル:

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

ボタンまたはImageviewの波紋:

android:foreground="?android:attr/selectableItemBackgroundBorderless"

4
selectableItemBackgroundBorderlessAPI 21+であることに注意してください。以下ではselectableItemBackground、互換性の問題を回避することを選択できます
StevenTB

10

あなたはandroid-ripple-backgroundを使うことができます

開始効果

final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
ImageView imageView=(ImageView)findViewById(R.id.centerImage);
imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        rippleBackground.startRippleAnimation();
    }
});

アニメーションを停止:

rippleBackground.stopRippleAnimation();

いいね!これのKotlinバージョンはありますか?
rengineer

8
<TextView
            android:id="@+id/txt_banner"
            android:layout_width="match_parent"
            android:text="@string/banner"
            android:gravity="center|left"
            android:layout_below="@+id/title"
            android:background="@drawable/ripple_effect"
            android:paddingLeft="15dp"
            android:textSize="15sp"
            android:layout_height="45dp" />

これをドローアブルに追加

<?xml version="1.0" encoding="utf-8"?>
<!--this ribble animation only working for >= android version 21-->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/click_efect" />

これを試して。



5

上記の回答に加えて、UIエディターの警告を回避するためにフォーカス可能を追加しています

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

4

@Bikesh M Annur(こちら)が投稿したよく投票されたソリューションが機能しない場合は、次を使用してみてください。

<TextView
...
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true" />

<ImageView
...
android:background="?android:attr/selectableItemBackgroundBorderless"
android:clickable="true" />

また、次の理由でandroid:clickable="true"追加を使用する場合android:focusable="true"

クリック可能であると宣言されているが、フォーカス可能であると宣言されていないウィジェットには、キーボードからアクセスできません。


3

追加 android:clickable="true" android:focusable="true"

波及効果

android:background="?attr/selectableItemBackgroundBorderless"

選択可能な効果

android:background="?android:attr/selectableItemBackground"

ボタン効果

android:adjustViewBounds="true" style="?android:attr/borderlessButtonStyle"

2

@Bikesh M Annurの回答に加えて、サポートライブラリを更新してください。以前は23.1.1を使用していましたが、何も起こりませんでした。23.3.0にアップデートすることでうまくいきました。


1

または、このライブラリ(android 9+)を使用してみてください:RippleEffect

統合

dependencies {
    compile 'com.github.traex.rippleeffect:library:1.3'
}

使用法:

<com.andexert.library.RippleView
  android:id="@+id/more"
  android:layout_width="?android:actionBarSize"
  android:layout_height="?android:actionBarSize"
  android:layout_toLeftOf="@+id/more2"
  android:layout_margin="5dp"
  rv_centered="true">

  <ImageView
    android:layout_width="?android:actionBarSize"
    android:layout_height="?android:actionBarSize"
    android:src="@android:drawable/ic_menu_edit"
    android:layout_centerInParent="true"
    android:padding="10dp"
    android:background="@android:color/holo_blue_dark"/>

</com.andexert.library.RippleView>

8
かなり長い間使ってきましたが、Android 2.3を目指しない限り、もうお勧めしません。これはバグが多く、遅延し、定型コードを生成します。現時点では、すべてのデバイスの43%にAndroid 5または6が搭載されているためselectableItemBackground、Android 4以上をターゲットにする場合はそのまま使用できます。
0101100101 2016年

1

サークルリップルの場合: android:background="?attr/selectableItemBackgroundBorderless"

長方形の波紋の場合: android:background="?attr/selectableItemBackground"


0

その追加の最良の方法:

    <ImageView
        android:id="@+id/ivBack"
        style="?attr/actionButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:src="@drawable/ic_back_arrow_black"
        android:tint="@color/white" />

-4

ライブラリの使用。これはその1つです。依存関係を追加し、リップル効果を必要とする各要素の前に、以下のコードをxmlに入れます。

<com.balysv.materialripple.MaterialRippleLayout
android:id="@+id/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content">

4
ああ、いやいや、それはあなたがそれを制御することが少なく、Android SDK自体で広くサポートされているので、それは最善の方法ではありません。誰かがこれを読んだ場合、色を制御したい場合は、@ BikeshまたはKarthikのコメントを参照することをお勧めします。
Dion Segijn 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.