Come creare un effetto a catena in un layout semplice


112

Come posso avere un effetto a catena in un layout lineare / relativo semplice quando tocco il layout?

Ho provato a impostare lo sfondo di un layout su qualcosa di simile:

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

Tuttavia vedo solo uno sfondo bianco semplice e nessun effetto a catena quando tocco il layout. Che cosa sto facendo di sbagliato?

Modificare:

Per riferimento, ecco il mio file xml di 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
La vista che ospita il ripple deve essere abilitata e selezionabile o attivabile.
alanv

Grazie Alanv, vedi sotto per la mia risposta. Fondamentalmente sto contrassegnando il mio layout in cui desidero avere l'effetto a catena come cliccabile, ma non funziona ancora.
Zach

Inoltre, questo funziona bene se rimuovo la <item android:drawable="@android:color/white"/>sezione. Quindi non sono sicuro di come dovrebbe funzionare se volessi un colore di sfondo sul layout. Anche il posizionamento su un altro layout con un colore di sfondo non funziona!
Zach

4
Di che colore viene disegnata l'increspatura nella tua vista, ad esempio in che colore si risolve colorControlHighlight?
alanv

Risposte:


260

Imposta queste proprietà sul tuo layout (se il tuo layout ha lo sfondo bianco / chiaro predefinito):

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

In questo caso non è necessario un disegnatore personalizzato.

Tuttavia, se il tuo layout ha uno sfondo nero / scuro, dovresti creare il tuo ripple disegnabile come questo:

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

Quindi imposta questo ripple disegnabile come proprietà android: background .

Puoi vedere molti esempi di questi tipi di increspature in AOSP: qui


11
cosa succede se devo dare un colore diverso come sfondo? Allora quale dovrebbe essere l'approccio migliore?
Anuj Sharma

1
@AnujSharma Hai provato a dare una risorsa colore per background?
IgorGanapolsky


31
Se desideri un altro colore di sfondo, puoi impostare quel colore come sfondo e inserire "? Attr / selectableItemBackground" come android: foreground invece
Lucas Arrefelt

2
Wow! questo è fantastico. Questo dovrebbe essere contrassegnato come risposta +1
Zia Ur Rahman

59

Lo aggiungo in aggiunta alla risposta di Igor Ganapolsky nel caso in cui qualcuno desideri avere un layout con un colore diverso e avere anche un effetto a catena. Crei semplicemente un effetto a catena in drawable come questo:

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>

quindi assegnalo come sfondo del tuo layout o qualsiasi pulsante come menzionato da Igor Ganapolsky nella sua risposta.

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

37

Devi modificare il seguente frammento di codice in qualsiasi widget ( TextView/ Button) e puoi implementare l' effetto Ripple :

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

E sei a posto.


hmm in primo piano? questo è fantastico!
Badr

Questo è utile se hai già un android: background = "@ color / colorAccent" impostato
aero

@aero È utile, anche se non imposti nessuno sfondo.
Pankaj Lilan

1
funziona su layout e visualizzazioni personalizzate oltre che sui widget.
anoo_radha

1
@MichaelKern Sì, hai ragione, inoltre si basa sui requisiti di tutti nel loro codice.
Pankaj Lilan

20

Si scopre che funziona come previsto. Il valore colorControlHighlight del tema Material standard è #40ffffff. Quindi su uno sfondo bianco, questo non verrà visualizzato. Cambiare il colore di evidenziazione in qualcos'altro funziona e / o cambiare il colore di sfondo dell'oggetto.

Grazie a tutti (soprattutto Alanv per avermi indicato la giusta direzione).


se sto usando android: background = "? attr / selectableItemBackground" nella mia vista come posso cambiare lo sfondo dell'oggetto?
codeskraps

1
Non importa, ho scoperto che lo stato predefinito di selectableItemBackground è trasparente. Quindi, ho impostato una vista sotto di essa con il colore che volevo.
codeskraps

1
nota rapida: puoi modificare il colorControlHighlighttuo file styles.xml. Aggiungilo al tuo tema personalizzato, ad esempio.
Nuhman


5

Questo è un esempio per fare clic su un layout di esempio con effetto a catena:

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

È semplice, fantastico quanto sia semplice e il semplice fatto che semplicemente Funziona ™.
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>

Usa questo ripple.xml nella cartella Drawable , quindi assegnalo come View

Android: background = "@ drawable / ripple"

Android: = cliccabili "true"


2

Aggiungi semplicemente l'effetto a catena predefinito con android:background="?selectableItemBackground"

Piace:

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

           ...

</LinearLayout>

0

Mettilo nel tuo layout:

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

Nota: c'è un bug nella documentazione dell'API. Funzionerà solo su API> = 23

Per tutti i livelli di API utilizzare questa soluzione


2
Il tuo link reindirizza questa stessa pagina
TSR

Tieni presente che hai anche la possibilità di utilizzare android: background = "? Attr / selectableItemBackgroundBorderless" Essendo senza bordi L'effetto a catena si estenderà alla vista genitore. Questo può sembrare migliore in molti casi.
Michael Kern

0

Ho provato tutte quelle risposte e niente ha funzionato per me, quindi, ho risolto creando il seguente stile:

<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 poi, ho applicato al mio layout lineare:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.