Aplicar Material Design Touch Ripple ao ImageButton?

95

Eu tenho um botão de imagem que não responde com uma animação de toque quando é clicado porque é uma imagem estática, ao contrário dos botões regulares no pirulito que vêm com o efeito de ondulação embutido. Gostaria de adicionar o efeito cascata de toque do material design à imagem, mas não consigo encontrar uma maneira de implementá-lo. Posso definir um filtro de cor sobre a imagem, mas esse não é o efeito cascata. Um exemplo do que estou tentando fazer é quando você segura a imagem da capa de um álbum no Google Play Música e uma onda de sombra se move pela imagem.

— sanic
fonte

259

Para resultados ainda melhores:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

— i.shadrin
fonte

6

Esta é a melhor resposta - dando uma sensação circular e também o efeito cascata, obrigado.

— ElliotM

3

Isso também deve funcionar com drawables coloridos? Para mim, nenhum efeito de toque é visível ao aplicar o fundo. Meu tema está estendendo de Theme.AppCompat.Light.DarkActionBar, isso pode ser um problema?

— Nome de exibição

12

em vez disso, use-o em primeiro plano para todas as visualizações, pois está funcionando bem.

— Gopi Cg

1

Alguém encontrou uma maneira de fazer isso e também mudar a cor de fundo? Alterar BackgroundTint não funciona e definir Foreground como "? Attr / selectableItemBackgroundBorderless" fornece um preenchimento desagradável no botão.

— Sev

1

Se você estiver usando um fundo escuro, a ondulação pode não ser visível o suficiente. Você muda para uma ondulação de cor clara adicionando android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(funciona no <API 21). Consulte stackoverflow.com/q/28605031/599535 para outras soluções.

— Lifes

28

Você pode simplesmente adicionar um plano de fundo ao seu ImageButton como este:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />

— Nicolas
fonte

2

Use android: foreground = "? Attr / selectableItemBackgroundBorderless"

— MFQ

@MFQ Como ele é diferente do? Android: attr / selectableItemBackground

— Killer

1

@killer selectableItemBackgroundBorderless = dá uma ondulação circular sem limites, como se você clicar em um ícone na barra de ferramentas, mas selectableItemBackground dá ondulação de retângulo, você pode ver a diferença se clicar longamente no ícone que implementa este drawbels

— MFQ

6

Obtive boas respostas de i.shadrin ( aqui ) e Nicolars ( aqui ).

A diferença entre as respostas deles é que ?attr/selectableItemBackgroundBorderlesspode dar a você um android.view.InflateException, então ?android:attr/selectableItemBackgroundé a solução.

FWIW, não sei por que a exceção acontece, porque a primeira resposta funcionou bem em todos os meus projetos antigos, mas no meu projeto recente não (talvez porque o tema do aplicativo = android:Theme.Material?).

O estranho que estava acontecendo é que, embora o efeito cascata tenha sido mostrado, ele estava ultrapassando o ImageButton, então a solução é:

Para usar o em android:foreground="?android:attr/selectableItemBackgroundBorderless"vez deandroid:background="?android:attr/selectableItemBackgroundBorderless"

Espero que ajude você se você estiver enfrentando o mesmo.

— Filipe brito
fonte

3

Se você já tem um plano de fundo e não deseja alterá-lo, use o primeiro plano;

<ImageButton
    android:layout_width="60dp"
    android:layout_height="match_parent"
    android:background="@drawable/preview_in_4k_background"
    android:src="@drawable/ic_full_screen_24px"
    android:layout_marginLeft="5dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:layout_column="2"/>

— Sabri Meviş
fonte