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

IgorGanapolsky
sumber
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
1
@ralphspoon Lihat stackoverflow.com/questions/26604134/…
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"
Erfan GLMPR
sumber
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.

Pankaj Lilan
sumber
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).

Zach
sumber
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
9

Atur android:clickable="true"tata letak Anda.

JeromePApp
sumber
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">
Javid Sattar
sumber
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"

Abhishek Sengupta
sumber
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>
yatin deokar
sumber
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

Andrej Sitar
sumber
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>
Ângelo Polotto
sumber