Cara membuat efek riak dalam tata letak sederhana


112

Bagaimana saya bisa memiliki efek riak dalam tata letak linier / relatif sederhana saat menyentuh tata letak?

Saya sudah mencoba mengatur latar belakang tata letak menjadi sesuatu seperti:

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

Namun saya hanya melihat latar belakang putih polos dan tidak ada efek riak saat menyentuh tata letak. Apa yang saya lakukan salah?

Edit:

Untuk referensi, ini file xml layout saya:

<?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
Tampilan yang menghosting riak harus diaktifkan dan dapat diklik atau difokuskan.
alanv

Terima kasih Alanv, lihat tanggapan saya di bawah. Pada dasarnya saya menandai tata letak saya, saya ingin memiliki efek riak sebagai dapat diklik, tetapi masih tidak berfungsi.
Zach

Juga, ini berfungsi dengan baik jika saya menghapus <item android:drawable="@android:color/white"/>bagian tersebut. Jadi saya tidak yakin bagaimana ini seharusnya bekerja jika saya menginginkan warna latar belakang pada tata letak. Meletakkan ini di atas tata letak lain dengan warna latar belakang juga tidak berfungsi!
Zach

4
Apa warna riak yang digambar dalam tampilan Anda, misalnya warna apa yang dihasilkan oleh colorControlHighlight?
alanv

Jawaban:


260

Setel properti ini pada tata letak Anda (jika tata letak Anda memiliki latar belakang putih / terang default):

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

Anda tidak memerlukan drawable khusus dalam kasus ini.

Namun, jika tata letak Anda memiliki latar belakang hitam / gelap, Anda harus membuat drawable riak sendiri seperti ini:

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

Lalu setel drawable riak ini sebagai properti android: background Anda .

Anda dapat melihat banyak contoh jenis riak ini di AOSP: di sini


11
bagaimana jika saya harus memberikan warna yang berbeda sebagai background? Lalu apa yang harus menjadi pendekatan terbaik?
Anuj Sharma

1
@AnujSharma Sudahkah Anda mencoba memberikan sumber warna untuk background?
IgorGanapolsky


31
Jika Anda ingin warna latar belakang lain, Anda dapat menyetel warna itu sebagai latar belakang dan meletakkan "? Attr / selectableItemBackground" sebagai android: foreground
Lucas Arrefelt

2
Wow! ini bagus. Ini harus ditandai sebagai jawaban +1
Zia Ur Rahman

59

Saya menambahkan ini sebagai tambahan jawaban Igor Ganapolsky jika ada yang ingin memiliki tata letak dengan warna berbeda dan juga memiliki efek riak. Anda cukup membuat efek riak di drawable seperti ini:

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>

kemudian berikan itu sebagai latar belakang tata letak Anda atau tombol apa saja seperti yang disebutkan Igor Ganapolsky dalam jawabannya.

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

37

Anda harus mengubah cuplikan kode berikut di widget mana pun ( TextView/ Button) dan Anda dapat menerapkan Efek Ripple :

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

Dan Anda siap untuk pergi.


hmm latar depan? ini bagus!
Badr

Ini berguna jika Anda sudah memiliki set android: background = "@ color / colorAccent"
aero

@aero Sangat membantu, meskipun Anda tidak menyetel latar belakang apa pun.
Pankaj Lilan

1
ini berfungsi pada tata letak dan tampilan khusus selain widget.
anoo_radha

1
@MichaelKern Ya, Anda benar, juga didasarkan pada persyaratan semua orang dalam kode mereka.
Pankaj Lilan

20

Ternyata ini berfungsi sebagaimana mestinya. Nilai standar Material tema colorControlHighlight adalah #40ffffff. Jadi dengan latar belakang putih, ini tidak akan muncul. Mengubah warna sorotan menjadi sesuatu yang lain berfungsi, dan / atau mengubah warna latar belakang objek.

Terima kasih semuanya (terutama Alanv karena telah mengarahkan saya ke arah yang benar).


jika saya menggunakan android: background = "? attr / selectableItemBackground" pada tampilan saya, bagaimana cara mengubah latar belakang objek?
Codeskraps

1
Nevermind Saya menemukan bahwa status default selectableItemBackground transparan. Jadi, saya menetapkan tampilan di bawahnya dengan warna yang saya inginkan.
Codeskraps

1
catatan singkat: Anda dapat mengubah colorControlHighlightfile styles.xml. Tambahkan ke tema kustom Anda misalnya.
Nuhman


5

Ini adalah contoh untuk mengklik contoh tata letak dengan efek riak:

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

Sungguh mengagumkan betapa sederhananya ini dan fakta sederhananya bahwa ini Just Works ™.
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>

Gunakan ripple.xml ini dalam folder Drawable , lalu tetapkan sebagai View's

android: background = "@ drawable / ripple"

android: clickable = "true"


2

Cukup tambahkan efek riak default dengan android:background="?selectableItemBackground"

Suka:

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

           ...

</LinearLayout>

0

Masukkan ini ke dalam tata letak Anda:

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

Catatan: Ada bug dalam dokumentasi API. Ini hanya akan bekerja pada API> = 23

Untuk semua level API gunakan Solusi ini


2
Tautan Anda mengarahkan ulang halaman yang sama ini
TSR

Ingatlah bahwa Anda juga memiliki opsi untuk menggunakan android: background = "? Attr / selectableItemBackgroundBorderless" Dengan tidak ada batas tepi. Efek riak akan meluas ke tampilan induk. Ini mungkin terlihat lebih baik dalam banyak kasus.
Michael Kern

0

Saya mencoba semua jawaban itu dan tidak ada yang berhasil bagi saya, jadi, saya menyelesaikannya dengan menciptakan gaya berikut:

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

Dan kemudian, saya menerapkan tata letak linier saya:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.