ฉันจะแก้ไขสีระลอกเมื่อใช้? attr / selectableItemBackground เป็นพื้นหลังได้อย่างไร?


107

ฉันเคยเห็นคำถาม SO และพวกเขาให้วิธีการที่เป็นไปได้เพื่อบรรลุสิ่งที่ฉันต้องการ ตัวอย่างเช่น:

  1. ใช้colorControlHighlightแอตทริบิวต์ใน styles.xml

    นี่คือสไตล์ของฉัน -v21.xml:

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

    และวิดเจ็ตของฉัน:

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

    และไม่ได้ผล ฉันยังพยายามเพิ่มparent="Theme.AppCompatในสไตล์ "SelectableItemBackground" หรือเปลี่ยนเป็นcolorControlHighlight(no android: prefix)"หรือเปลี่ยน?android:attr/selectableItemBackgroundเป็นก็ไม่มีประโยชน์

  2. ใช้backgroundTintแอตทริบิวต์ในเค้าโครง

    ดังนั้นผมจึงเพิ่มของฉันandroid:backgroundTint="#5677FC" TextViewยังไม่มีประโยชน์. จากนั้นผมก็พยายามที่จะเปลี่ยนandroid:backgroundTintModeไปsrc_inและsrc_atopและพวกเขาไม่เคยสร้างความแตกต่าง

ดังนั้นฉันจะเปลี่ยนสีของระลอกคลื่นได้อย่างไรเมื่อใช้?attr/selectableItemBackgroundเป็นพื้นหลัง ฉันเน้นเฉพาะ Lollipop ขึ้นไปเท่านั้น ขอบคุณล่วงหน้า!

คำตอบ:


155

ในที่สุดฉันก็พบวิธีแก้ปัญหา: แทนที่จะใช้android:colorControlHighlightในธีมโดยตรงSelectableItemBackgroundฉันควรเขียนสไตล์อื่น:

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

จากนั้น:

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

ในที่สุดเพิ่มstyle="@style/SelectableItemBackground"ไปViewใน layout.xml

อัปเดตเมื่อวันที่ 2016/8/26 หลังจากการเปิดตัวของ N ฉันพบว่าบางครั้งเราไม่สามารถใช้วิธีนี้ในการตั้งค่าสีระลอกสำหรับบางประเภทได้View(ตัวอย่างเช่นCardView) ตอนนี้ฉันขอแนะนำให้นักพัฒนาใช้RippleDrawableซึ่งสามารถประกาศเป็น xml ได้ นี่คือตัวอย่าง:

ฉันต้องการแสดงเอฟเฟกต์ระลอกคลื่นเมื่อผู้ใช้แตะ / คลิกCardViewAPI21 ด้านบนและแน่นอนว่าควรมีการตอบรับแบบอื่นก่อน Lollipop ดังนั้นฉันควรเขียน:

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

และselectable_item_backgroundในdrawableโฟลเดอร์:

<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_backgroundในdrawable-v21โฟลเดอร์:

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

ในที่สุดโฟลเดอร์ripple_blackในdrawable(หรือ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-->

แค่นั้นแหละ. สำหรับมุมมองอื่น ๆ android:background="@drawable/selectable_item_background"บางทีคุณควรใช้ อย่าลืมที่จะตั้งค่าOnClickListener, OnTouchListenerหรือสิ่งที่ต้องการเหล่านั้นสำหรับพวกเขามิฉะนั้นระลอกจะไม่แสดง


14
ใช้colorControlHighlightแทนได้android:colorControlHighlightผลดีกว่าสำหรับฉันมิฉะนั้นจะใช้สำหรับ v21 + เท่านั้น
Liuting

1
นี่ไม่ใช่คำตอบที่ถูกต้องโปรดดูคำตอบของ @ harrane ด้านล่าง
จิน

2
ในกรณีที่คุณไม่ได้ตั้งค่า ClickListener เพียงแค่ทำให้มุมมองคลิกได้clickable="true"และเอฟเฟกต์ระลอกจะทำงาน
hedisam

58

Ripple effect บนอุปกรณ์ก่อนและ Lollipop +

harrane และ Liuting พูดถูก คำตอบที่ได้รับการยอมรับไม่ใช่วิธีที่ดีที่สุด ให้ฉันแสดงวิธีเปลี่ยนสีระลอกคลื่นสำหรับเวอร์ชันก่อนอมยิ้มและสูงกว่า

  1. AppTheme ของคุณควรสืบทอดมาจากธีม AppCompat และมีแอตทริบิวต์ colorControlHighlight (โดยไม่มีคำนำหน้า "android:")

    <!-- Application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
    <item name="colorControlHighlight">#40ffffff</item>
    </style>
    
  2. มุมมองของคุณควรมี clickable = "true" (หรือควรตั้งค่าฟังก์ชั่นการคลิกโดยใช้โปรแกรม) และพื้นหลังควรเป็น "? attr / selectableItemBackgroundBorderless" หรือ "? attr / selectableItemBackground":

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

หมายเหตุ: หากมุมมองหลักของคุณมีพื้นหลังสีขาวคุณจะไม่เห็นเอฟเฟกต์การกระเพื่อมเนื่องจากเป็นสีขาว เปลี่ยนค่า colorControlHighlight สำหรับสีอื่น

นอกจากนี้หากคุณต้องการสีระลอกคลื่นที่แตกต่างกันสำหรับกิจกรรมต่างๆคุณสามารถกำหนดธีมส่วนตัวสำหรับแต่ละกิจกรรมในไฟล์ Manifest ได้เช่น:

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

สีของการกระเพื่อมที่แตกต่างกันสำหรับชิ้นส่วนที่แตกต่างกันในกิจกรรมเดียวกัน?

คุณสามารถเปลี่ยนแอ็ตทริบิวต์ของธีมกิจกรรมสำหรับแต่ละส่วนในรันไทม์ เพียงเขียนทับก่อนที่ส่วนย่อยจะพองด้วยสไตล์ที่คุณกำหนดเองและนำไปใช้กับธีมปัจจุบัน:

ในค่า / styles.xml

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

จากนั้นในส่วนของคุณก่อนเงินเฟ้อใน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;
    }

สไตล์นี้จะใช้ได้กับส่วนนี้เท่านั้น


สีของการกระเพื่อมที่แตกต่างกันสำหรับมุมมองที่แตกต่างกัน? (อมยิ้ม +)

คุณสามารถเปลี่ยนสีระลอกสำหรับแต่ละมุมมองแยกกันโดยใช้ colorControlHighlightแอตทริบิวต์ซึ่งจะใช้ไม่ได้หากคุณใช้กับมุมมองโดยตรง:

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

คุณควรใช้เป็นธีม:

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

ป.ล. บางครั้งวิธีนี้จะช่วยได้หากคุณมีปัญหาที่ไม่ทราบสาเหตุเกี่ยวกับระลอกคลื่นและคุณไม่สามารถเข้าใจได้ ในกรณีของฉันฉันใช้ lib เลื่อนของบุคคลที่สามซึ่งทำให้เอฟเฟกต์ระลอกคลื่นสำหรับเลย์เอาต์ทั้งหมดยุ่งเหยิงและเพิ่มธีมนี้อย่างชัดเจนให้กับมุมมองที่คลิกได้ทั้งหมดสำหรับฉัน


11

มันแสดงเอฟเฟกต์ระลอกด้วยสีบน API +21 และพื้นหลังสีเทาเรียบง่ายเมื่อกดสำหรับ API -21 เพิ่มรูปแบบนี้:

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

และตั้งค่าเป็นมุมมอง:

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

4
มันเป็นสิ่งสำคัญที่จะแจ้งให้ทราบว่ามันเป็นจริงตามที่คุณเขียนและไม่ใช่สิ่งที่คนมักจะใช้android:theme style
นักพัฒนา Android

7

คำตอบที่ยอมรับนั้นผิด

วิธีใช้ที่ถูกต้องคือสิ่งที่ Liuting กล่าวถึงในความคิดเห็น ใช้colorControlHighlightแทนandroid:colorControlHighlightการเปลี่ยนค่าเริ่มต้นcolorControlHighlightจากAppCompat

* โปรดดูที่http://android-developers.blogspot.co.uk/2014/10/appcompat-v21-material-design-for-pre.htmlในส่วน Theming *


6

ใช้ขั้นตอนด้านล่าง:

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

- แอตทริบิวต์สไตล์เรียกสไตล์ที่เราสร้างขึ้น

แอตทริบิวต์ -Foreground เรียกแอตทริบิวต์ที่เลือกได้เริ่มต้นของ 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

รหัสนี้ใช้ได้กับฉันในการสร้างระลอก:

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

ฉันไม่พบวิธีใด ๆ ในการแก้ไขแอตทริบิวต์ selectableItemBackground นั่นเป็นเหตุผลที่ฉันทำเหมือนข้างบน


0

ในแอปธีมสีดำเข้ม (หรืออื่น ๆ ) ให้ลองใช้เช่นด้านล่างก่อนสร้างripple_effect.xmlในdrawableโฟลเดอร์และเพิ่มรหัสเช่น

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

จากนั้นตั้งค่าพื้นหลังเป็นมุมมองใด ๆ เช่นLinear layout, Button, TextViewฯลฯ

 <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

ใช้แอตทริบิวต์เบื้องหน้าเป็นแอตทริบิวต์ selectableItemBackground และ background เป็นสีที่คุณต้องการ

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

1
เมื่อทำเช่นนี้คุณจะไม่มีตัวเลือกในการเปลี่ยนสีเอฟเฟกต์ระลอกคลื่น คำถาม -How can I modify ripple color when using ?attr/selectableItemBackground as background?
HB.
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.