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.

android xml android-5.0-lollipop imagebutton material-design sanic
fonte

Respostas:

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