Làm cách nào để sửa đổi màu gợn sóng khi sử dụng? Attr / selectableItemBackground làm nền?


103

Tôi đã thấy một số câu hỏi SO và họ đã đưa ra một số phương pháp khả thi để đạt được điều tôi muốn. Ví dụ:

  1. Sử dụng colorControlHighlightthuộc tính trong styles.xml.

    Đây là styles-v21.xml của tôi:

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

    Và tiện ích của tôi:

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

    Và nó không hoạt động. Tôi cũng đã cố gắng thêm parent="Theme.AppCompatvào kiểu "SelectableItemBackground" hoặc thay đổi thành colorControlHighlight(no android: prefix)", hoặc thay đổi thành ?android:attr/selectableItemBackground, đều không hữu ích.

  2. Sử dụng backgroundTintthuộc tính trong bố cục.

    Vì vậy, tôi thêm android:backgroundTint="#5677FC"vào của tôi TextView. Vẫn vô ích. Sau đó, tôi đã cố gắng thay đổi android:backgroundTintModethành src_insrc_atop, và họ không bao giờ tạo ra sự khác biệt.

Vì vậy, làm thế nào tôi có thể thay đổi màu gợn sóng khi tôi sử dụng ?attr/selectableItemBackgroundlàm nền. Tôi chỉ tập trung vào Lollipop trở lên. Cảm ơn bạn trước!

Câu trả lời:


154

Cuối cùng, tôi tìm ra giải pháp: thay vì sử dụng android:colorControlHighlighttrực tiếp trong theme SelectableItemBackground, tôi nên viết một phong cách khác:

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

Sau đó:

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

Cuối cùng thêm style="@style/SelectableItemBackground"vào Viewtrong Layout.xml.

CẬP NHẬT VÀO NGÀY 26/8/2016 Sau khi N phát hành, tôi thấy rằng đôi khi chúng ta không thể sử dụng phương pháp này để thiết lập màu gợn sóng cho một số loại View(ví dụ CardView:). Bây giờ tôi thực sự khuyên các nhà phát triển sử dụng RippleDrawable, cũng có thể được khai báo bằng xml. Đây là một ví dụ:

Tôi muốn hiển thị hiệu ứng gợn sóng khi người dùng chạm / nhấp vào CardViewAPI21 ở trên và tất nhiên phải có một loại phản hồi khác trước Lollipop. Vì vậy, tôi nên viết:

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

selectable_item_backgroundtrong drawablethư mục:

<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_backgroundtrong drawable-v21thư mục:

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

cuối cùng là thư mục ripple_blacktrong drawable(hoặc 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-->

Đó là nó. Đối với các quan điểm khác, có lẽ bạn nên sử dụng android:background="@drawable/selectable_item_background". Đừng quên để thiết lập một OnClickListener, OnTouchListenerhoặc một cái gì đó giống như những người cho họ, nếu không gợn sẽ không hiển thị.


14
Sử dụng colorControlHighlightthay vì android:colorControlHighlighthoạt động tốt hơn đối với tôi, nếu không thì nó chỉ dành cho v21 +
Liuting

1
Đây không phải là câu trả lời đúng, hãy xem câu trả lời của @ harrane bên dưới.
Jin

2
Trong trường hợp bạn đã không đặt ClickListener, chỉ cần thực hiện có thể click xem clickable="true"và hiệu ứng gợn sóng sẽ làm việc
hedisam

58

Hiệu ứng gợn sóng trên các thiết bị trước và Lollipop +

harrane và Liuting đúng. Câu trả lời được chấp nhận không phải là cách tốt nhất. Hãy để tôi chỉ trong mã cách thay đổi màu gợn sóng cho các phiên bản trước Lollipop và cao hơn

  1. AppTheme của bạn phải kế thừa từ bất kỳ chủ đề AppCompat nào và chứa thuộc tính colorControlHighlight (không có tiền tố 'android:')

    <!-- Application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlHighlight">#40ffffff</item>
    </style>
    
  2. Chế độ xem của bạn phải chứa clickable = "true" (hoặc phải có trình xử lý nhấp chuột được đặt theo chương trình) và nền phải là "? Attr / selectableItemBackgroundBorderless" hoặc "? Attr / selectableItemBackground":

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

Lưu ý: nếu chế độ xem gốc của bạn có nền trắng, bạn sẽ không thấy hiệu ứng gợn sóng vì nó có màu trắng. Thay đổi giá trị colorControlHighlight cho một màu khác

Ngoài ra, nếu bạn muốn các màu gợn khác nhau trên các hoạt động khác nhau, bạn có thể đặt chủ đề cá nhân cho từng hoạt động trong tệp Manifest, ví dụ:

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

Màu gợn khác nhau cho các mảnh khác nhau trong cùng một hoạt động?

Bạn có thể thay đổi các thuộc tính của Chủ đề hoạt động cho từng phân đoạn trong thời gian chạy. Chỉ cần ghi đè chúng trước khi phân đoạn được thổi phồng với phong cách tùy chỉnh của bạn và áp dụng cho Chủ đề hiện tại:

trong giá trị / styles.xml

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

Sau đó, trong phần của bạn trước khi lạm phát trong 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;
    }

Kiểu này sẽ chỉ hoạt động cho phân đoạn này


Màu gợn khác nhau cho các Chế độ xem khác nhau? (Kẹo mút +)

Bạn có thể thay đổi màu gợn sóng cho từng chế độ xem riêng biệt bằng cách sử dụng colorControlHighlightthuộc tính, nó không hoạt động nếu bạn áp dụng chúng cho chế độ xem trực tiếp:

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

bạn nên áp dụng nó như một chủ đề:

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

PS Ngoài ra, đôi khi cách tiếp cận này hữu ích nếu bạn gặp vấn đề không xác định với ripple và bạn không thể tìm ra. Trong trường hợp của tôi, tôi đã sử dụng lib trượt của bên thứ ba, điều này làm rối tung các hiệu ứng gợn sóng cho toàn bộ bố cục và thêm chủ đề này một cách rõ ràng vào tất cả các chế độ xem có thể nhấp đã làm việc cho tôi.


10

Nó hiển thị hiệu ứng gợn sóng với màu trên API +21 và nền màu xám đơn giản khi nhấn cho API -21. Thêm kiểu này:

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

Và đặt nó ở chế độ xem:

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

3
Điều quan trọng cần lưu ý là nó thực sự như bạn đã viết android:themechứ không phải những gì mọi người thường sử dụng style.
nhà phát triển Android


4

Sử dụng các bước sau:

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

- Thuộc tính style gọi kiểu mà chúng ta đã tạo.

Thuộc tính -Foreground gọi thuộc tính có thể chọn mặc định của 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

Mã này hoạt động để tôi tạo ra một gợn sóng:

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);
    }
}

Tôi không tìm thấy bất kỳ cách nào để sửa đổi thuộc tính selectableItemBackground. Chính vì vậy tôi đã làm như trên.


0

Trong chủ đề màu đen đậm (Hoặc bất kỳ ứng dụng nào khác), hãy thử sử dụng như bên dưới, trước tiên hãy tạo ripple_effect.xmltrong drawablethư mục và thêm mã như

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

sau đó đặt nền thành Chế độ xem bất kỳ của bạn như Linear layout, Button, TextViewv.v.

 <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

Sử dụng thuộc tính nền trước làm selectableItemBackground và thuộc tính nền làm màu bạn muốn.

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

1
Bằng cách làm như vậy, bạn sẽ không có tùy chọn để thay đổi màu hiệu ứng gợn sóng. Câu hỏi -How can I modify ripple color when using ?attr/selectableItemBackground as background?
HB.
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.