Bagaimana cara mengubah warna riak saat menggunakan? Attr / selectableItemBackground sebagai latar belakang?


103

Saya telah melihat beberapa pertanyaan SO dan mereka memberikan beberapa metode yang mungkin untuk mencapai apa yang saya inginkan. Sebagai contoh:

  1. Gunakan colorControlHighlightatribut di styles.xml.

    Inilah styles-v21.xml saya:

    <style name="SelectableItemBackground">
        <item name="android:colorControlHighlight">#5677FC</item>
        <item name="android:background">?attr/selectableItemBackground</item>
    </style>

    Dan widget saya:

    <TextView
        android:id="@+id/tv_take_photo_as_bt"
        android:layout_width="280dp"
        android:layout_height="48dp"
        android:text="@string/act_take_photo"
        style="@style/SelectableItemBackground"/>

    Dan itu tidak berhasil. Saya juga mencoba menambahkan parent="Theme.AppCompatgaya "SelectableItemBackground", atau mengubah ke colorControlHighlight(no android: prefix)", atau mengubah ke ?android:attr/selectableItemBackground, tidak ada yang berguna.

  2. Gunakan backgroundTintatribut dalam tata letak.

    Jadi saya tambahkan android:backgroundTint="#5677FC"ke saya TextView. Masih tidak berguna. Kemudian saya mencoba untuk mengubah android:backgroundTintModeke src_indan src_atop, dan mereka tidak pernah membuat perbedaan.

Jadi, bagaimana saya bisa mengubah warna riak saat saya gunakan ?attr/selectableItemBackgroundsebagai latar belakang. Saya hanya fokus pada Lollipop ke atas. Terima kasih sebelumnya!

Jawaban:


154

Akhirnya saya menemukan solusinya: daripada menggunakan android:colorControlHighlightlangsung di tema SelectableItemBackground, saya harus menulis gaya lain:

<style name="SelectableItemTheme">
    <item name="colorControlHighlight">@color/ripple_color</item>
</style>

Kemudian:

<style name="SelectableItemBackground">
    <item name="android:theme">@style/SelectableItemTheme</item>
    <item name="android:background">?attr/selectableItemBackground</item>
</style>

Akhirnya menambahkan style="@style/SelectableItemBackground"untuk Viewdi layout.xml.

DIPERBARUI PADA 2016/8/26 Setelah rilis N, saya menemukan bahwa terkadang kita tidak dapat menggunakan metode ini untuk mengatur warna riak untuk beberapa jenis View(misalnya, CardView). Sekarang saya sangat menyarankan pengembang menggunakan RippleDrawable, yang juga dapat dideklarasikan dalam xml. Berikut ini contohnya:

Saya ingin menunjukkan efek riak ketika pengguna menyentuh / mengklik CardViewAPI21 di atas, dan tentu saja harus ada jenis umpan balik lain sebelum Lollipop. Jadi saya harus menulis:

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:foreground="@drawable/selectable_item_background"/>

dan selectable_item_backgrounddi drawablefolder:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:drawable="@color/color_clicked" />
</selector>

selectable_item_backgrounddalam drawable-v21folder:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ripple_black" />
</selector>

terakhir, folder ripple_blackdalam drawable(atau drawable-v21):

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/color_clicked"
    tools:ignore="NewApi" /> <!--you can remove this line if it's in v21 folder-->

Itu dia. Untuk tampilan lain, mungkin sebaiknya Anda gunakan android:background="@drawable/selectable_item_background". Jangan lupa untuk mengatur OnClickListener, OnTouchListeneratau sesuatu seperti itu untuk mereka, jika tidak, riak tidak akan muncul.


14
Gunakan colorControlHighlightalih-alih android:colorControlHighlightberfungsi lebih baik untuk saya, selain itu hanya untuk v21 +
Liuting

1
Ini bukan jawaban yang benar, silakan lihat jawaban @ harrane di bawah.
Jin

2
Jika Anda belum menyetel ClickListener, cukup buat tampilan dapat diklik clickable="true"dan efek riak akan berfungsi
hedisam

58

Efek riak pada perangkat pra dan Lollipop +

harrane dan Liuting benar. Jawaban yang diterima bukanlah cara terbaik. Izinkan saya menunjukkan dalam kode cara mengubah warna riak untuk versi pra-Lollipop dan yang lebih tinggi

  1. AppTheme Anda harus mewarisi dari tema AppCompat apa pun dan berisi atribut colorControlHighlight (tanpa awalan 'android:')

    <!-- Application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlHighlight">#40ffffff</item>
    </style>
  2. Tampilan Anda harus berisi clickable = "true" (atau harus memiliki pendengar klik yang disetel secara terprogram) dan latar belakang harus "? Attr / selectableItemBackgroundBorderless" atau "? Attr / selectableItemBackground":

    <LinearLayout
    ...
    android:clickable="true"
    android:background="?attr/selectableItemBackgroundBorderless"/>

Catatan: jika tampilan induk memiliki latar belakang putih, Anda tidak akan melihat efek riak karena warnanya putih. Ubah nilai colorControlHighlight untuk warna lain

Selain itu, jika Anda menginginkan warna riak yang berbeda pada aktivitas yang berbeda, Anda dapat menyetel tema pribadi untuk setiap aktivitas dalam file Manifes, misalnya:

       <activity
        android:name="com.myapp.GalleryActivity"
        android:theme="@style/RedRippleTheme"
        />

Warna riak yang berbeda untuk fragmen berbeda dalam aktivitas yang sama?

Anda dapat mengubah atribut Tema Aktivitas untuk setiap fragmen dalam waktu proses. Timpa saja sebelum fragmen digelembungkan dengan gaya kustom Anda dan terapkan ke Tema saat ini:

di values ​​/ styles.xml

    <style name="colorControlHighlight_blue">
       <item name="colorControlHighlight">@color/main_blue_alpha26</item>
    </style>

Kemudian, dalam fragmen Anda sebelum inflasi onCreateView():

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
       getContext().getTheme().applyStyle(R.style.colorControlHighlight_blue, true); //blue ripple color
       View view = inflater.inflate(R.layout.my_fragment_layout, container, false);
       return view;
    }

Gaya ini hanya akan berfungsi untuk fragmen ini


Warna riak berbeda untuk Tampilan berbeda? (Lollipop +)

Anda dapat mengubah warna riak untuk setiap tampilan secara terpisah menggunakan colorControlHighlightatribut, ini tidak akan berfungsi jika Anda menerapkannya ke tampilan secara langsung:

    <TextView
     ...
     colorControlHighlight="#40ffffff"/> <!-- DOESN'T WORK -->

Anda harus menerapkannya sebagai tema:

<TextView
  ...
  android:theme="@style/colorControlHighlight_blue"/>

PS Juga, terkadang pendekatan ini membantu jika Anda memiliki masalah yang tidak diketahui dengan riak dan Anda tidak dapat mengetahuinya. Dalam kasus saya, saya menggunakan lib geser pihak ketiga yang mengacaukan efek riak untuk seluruh tata letak dan menambahkan secara eksplisit tema ini ke semua tampilan yang dapat diklik berhasil bagi saya.


10

Ini menunjukkan efek riak dengan warna pada API +21, dan latar belakang abu-abu sederhana saat ditekan untuk API -21. Tambahkan gaya ini:

<style name="AppTheme.MyRipple">
   <item name="colorControlHighlight">@color/your_color</item>
   <item name="android:background">?selectableItemBackgroundBorderless</item>
</style>

Dan atur ke tampilan:

<Button
   ...
   android:theme="@style/AppTheme.MyRipple" />

3
Penting untuk diperhatikan bahwa ini memang seperti yang Anda tulis android:themedan bukan yang biasa digunakan orang style.
Pengembang android


5

Gunakan langkah-langkah di bawah ini:

1. Make changes to button view in your layout.xml
2. Add new styles in styles.xml

your_layout.xml

<Button
                        android:id="@+id/setup_submit_button"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="16dp"
                        android:text="@string/action_sign_in"
                        android:textStyle="bold"
                        android:background="@color/colorPrimary"
                        android:textColor="@color/white"
                        style="@style/SelectableItemBackground"
                        android:foreground="?android:attr/selectableItemBackground"/>

-Atribut style memanggil gaya yang kita buat.

Atribut -Foreground memanggil atribut default yang dapat dipilih dari andorid.

styles.xml

 <style name="SelectableItemTheme">
        <item name="colorControlHighlight">@color/white</item>
    </style>


    <style name="SelectableItemBackground">
        <item name="android:theme">@style/SelectableItemTheme</item>
        <item name="android:background">?attr/selectableItemBackground</item>
    </style>

0

Kode ini berfungsi untuk saya membuat riak:

public static void setRippleDrawable(View view, int normalColor, int touchColor) {
    try {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            RippleDrawable rippleDrawable = new RippleDrawable(ColorStateList.valueOf(touchColor), view.getBackground(), null);
            view.setBackground(rippleDrawable);
        } else {
            StateListDrawable stateListDrawable = new StateListDrawable();
            stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, new ColorDrawable(touchColor));
            stateListDrawable.addState(new int[]{android.R.attr.state_focused}, new ColorDrawable(touchColor));
            stateListDrawable.addState(new int[]{}, new ColorDrawable(normalColor));
            view.setBackground(stateListDrawable);
            }
    } catch (Exception e) {
        Log.e(LOG_TAG, "" + e);
    }
}

Saya tidak menemukan cara apa pun untuk mengubah atribut selectableItemBackground. Itu sebabnya saya melakukannya seperti di atas.


0

Dalam aplikasi tema hitam gelap (Atau lainnya) coba gunakan seperti di bawah ini, buat pertama ripple_effect.xmldi drawablefolder dan tambahkan kode suka

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#f5f5f5">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f5f5f5" />

        </shape>
    </item>

</ripple>

lalu atur latar belakang ke tampilan Apa saja seperti Linear layout, Button, TextViewdll.

 <TextView
                    android:id="@+id/tvApply"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ripple_effect"
                    android:clickable="true"
                    android:text="APPLY"
                    android:textColor="#FFFFFF"
                    android:gravity="center"
                    android:textSize="@dimen/_8sdp"
                    android:padding="@dimen/_8sdp"
                    android:focusable="true" />

-1

Gunakan atribut latar depan sebagai selectableItemBackground dan atribut latar belakang sebagai warna yang Anda inginkan.

android:foreground="?attr/selectableItemBackground"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@color/white"

1
Dengan melakukannya seperti ini, Anda tidak akan memiliki opsi untuk mengubah warna efek riak. Pertanyaannya -How can I modify ripple color when using ?attr/selectableItemBackground as background?
HB.
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.