Como criar efeito cascata em layout simples


112

Como posso ter um efeito cascata em um layout linear / relativo simples ao tocar no layout?

Tentei definir o plano de fundo de um layout para algo como:

<?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>

No entanto, estou vendo apenas um fundo branco simples e nenhum efeito cascata ao tocar no layout. O que estou fazendo de errado?

Editar:

Para referência, aqui está o meu arquivo xml de layout:

<?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>

2
A visualização que hospeda a ondulação precisa ser habilitada e clicável ou focalizável.
alanv

Obrigado Alanv, veja abaixo minha resposta. Basicamente, estou marcando meu layout e desejo que o efeito cascata seja clicável, mas ainda não funciona.
Zach

Além disso, isso funciona bem se eu remover a <item android:drawable="@android:color/white"/>seção. Portanto, não tenho certeza de como isso deveria funcionar se eu quisesse uma cor de fundo no layout. Colocar isso em cima de outro layout com uma cor de fundo também não funciona!
Zach

4
Qual é a cor da ondulação sendo desenhada em sua visualização, por exemplo, para qual cor colorControlHighlight resolve?
alanv

Respostas:


260

Defina essas propriedades em seu layout (se seu layout tiver o fundo branco / claro padrão):

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

Você não precisa de um drawable personalizado neste caso.

No entanto, se o seu layout tiver um fundo preto / escuro, você terá que criar seu próprio drawable ondulado como este:

<?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>

Em seguida, defina este drawable ondulação como sua propriedade android: background .

Você pode ver muitos exemplos desses tipos de ondulações no AOSP: aqui


11
e se eu tiver que dar uma cor diferente como plano de fundo? Então, qual deve ser a melhor abordagem?
Anuj Sharma

1
@AnujSharma Você já tentou fornecer recursos de cores para background?
IgorGanapolsky de


31
Se você quiser outra cor de fundo, pode definir essa cor como fundo e colocar "? Attr / selectableItemBackground" como android: primeiro plano
Lucas Arrefelt

2
Uau! isso é ótimo. Deve ser marcado como resposta +1
Zia Ur Rahman

59

Estou adicionando isso além da resposta de Igor Ganapolsky caso alguém queira ter um layout com cor diferente e também ter um efeito cascata. Você simplesmente cria um efeito cascata em drawables como este:

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>

em seguida, coloque -o como plano de fundo do layout ou qualquer botão, conforme Igor Ganapolsky mencionou em sua resposta.

android:clickable="true"
android:background="@drawable/ripple"

37

Você deve alterar o seguinte snippet de código em qualquer widget ( TextView/ Button) e pode implementar o efeito ondulação :

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

E você está pronto para ir.


hmm primeiro plano? isso é ótimo!
Badr

Isso é útil se você já tem um android: background = "@ color / colorAccent" definido
aero

@aero É útil, mesmo se você não definir nenhum plano de fundo.
Pankaj Lilan

1
isso funciona em layouts e visualizações personalizadas, além de widgets.
anoo_radha

1
@MichaelKern Sim, você está certo, também é baseado nos requisitos de todos em seus códigos.
Pankaj Lilan

20

Acontece que isso está funcionando conforme o esperado. O valor padrão de colorControlHighlight do tema Material é #40ffffff. Portanto, em um fundo branco, isso não aparecerá. Alterar a cor de destaque para outra funciona e / ou alterar a cor de fundo do objeto.

Obrigado a todos (especialmente Alanv por me apontar na direção certa).


se estou usando android: background = "? attr / selectableItemBackground" na minha visualização, como posso alterar o fundo do objeto?
codeskraps

1
Não importa, descobri que o estado padrão selectableItemBackground é transparente. Então, eu coloquei uma visão abaixo dela com a cor que eu queria.
codeskraps

1
nota rápida: você pode mudar colorControlHighlightno seu styles.xml. Adicione-o ao seu tema personalizado, por exemplo.
Nuhman


5

Este é um exemplo para clicar em um layout de amostra com efeito cascata:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

Isso é simplesmente incrível como isso é simples e o simples fato de que simplesmente Funciona ™.
Machado

4
<?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>

Use este ripple.xml na pasta Drawable e atribua-o como View's

android: background = "@ drawable / ripple"

android: clickable = "true"


2

Basta adicionar o efeito cascata padrão com android:background="?selectableItemBackground"

Gostar:

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

           ...

</LinearLayout>

0

Coloque isso em seu layout:

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

Observação: há um bug na documentação da API. Funcionará apenas na API> = 23

Para todos os níveis de API , use esta solução


2
Seu link redireciona esta mesma página
TSR

Lembre-se de que você também tem a opção de usar android: background = "? Attr / selectableItemBackgroundBorderless" Sendo sem borda, o efeito cascata se estenderá até a visualização pai. Isso pode parecer melhor em muitos casos.
Michael Kern

0

Eu tentei todas essas respostas e nada funcionou para mim, então, resolvi criar o seguinte estilo:

<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>

E então, apliquei ao meu layout linear:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.