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.