Android เปลี่ยนสีปุ่มการดำเนินการลอยตัว

ฉันพยายามเปลี่ยนสีของปุ่มการดำเนินการลอยตัวของวัสดุ แต่ไม่ประสบความสำเร็จ

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp" />

ฉันพยายามเพิ่ม:

android:background="@color/mycolor"

หรือผ่านรหัส:

FloatingActionButton fab = (FloatingActionButton) rootView.findViewById(R.id.profile_edit_fab);
fab.setBackgroundColor(Color.parseColor("#mycolor"));

หรือ

fab.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#mycolor")));

แต่ไม่มีการทำงานใด ๆ ข้างต้น ฉันได้ลองวิธีแก้ปัญหาในคำถามที่ซ้ำกันที่เสนอ แต่ไม่มีวิธีใดที่ใช้งานได้ ปุ่มยังคงเป็นสีเขียวและกลายเป็นสี่เหลี่ยมจัตุรัส

ป.ล. มันก็เป็นการดีที่จะรู้วิธีเพิ่มเอฟเฟกต์ระลอกคลื่นไม่เข้าใจเช่นกัน

ตามที่อธิบายไว้ในเอกสารโดยปกติจะใช้เวลาชุดสีในstyles.xmlแอตทริบิวต์colorAccent

สีพื้นหลังของมุมมองนี้จะใช้ค่าเริ่มต้นเป็น colorAccent ของชุดรูปแบบของคุณ หากคุณต้องการเปลี่ยนแปลงสิ่งนี้ในขณะทำงานคุณสามารถทำได้ผ่าน setBackgroundTintList (ColorStateList)

หากคุณต้องการเปลี่ยนสี

• ใน XML ด้วยแอปคุณลักษณะ: backgroundTint

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" >

• ในรหัสด้วย. setBackgroundTintList (คำตอบด้านล่างโดยywwynm )

ดังที่ @Dantalian พูดถึงในความคิดเห็นหากคุณต้องการเปลี่ยนสีไอคอนสำหรับ Library Support Design สูงสุด v22 (รวม)คุณสามารถใช้

android:tint="@color/white"     

สำหรับห้องสมุดสนับสนุนการออกแบบตั้งแต่ v23คุณสามารถใช้:

app:tint="@color/white"   

นอกจากนี้ยังมีandroidXไลบรารีที่คุณต้องการตั้งค่าขอบ 0dp ในเค้าโครง xml ของคุณ:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    app:backgroundTint="@color/orange"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:fabSize="normal" />

คำตอบของ Vijet Badigannavar นั้นถูกต้อง แต่การใช้ColorStateListมักจะซับซ้อนและเขาไม่ได้บอกเราว่าต้องทำอย่างไร เนื่องจากเรามักจะเน้นที่การเปลี่ยนViewสีในสภาวะปกติและกดฉันจะเพิ่มรายละเอียดเพิ่มเติม:

1. หากคุณต้องการเปลี่ยนFABสีในสภาวะปกติคุณสามารถเขียนได้

   mFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

2. หากคุณต้องการเปลี่ยนFABสีในสถานะที่ถูกกดขอบคุณสำหรับ Design Support Library 22.2.1คุณสามารถเขียนได้

   mFab.setRippleColor(your color in int);

   โดยการตั้งค่าแอตทริบิวต์นี้เมื่อคุณยาวกดเป็นระลอกที่มีสีของคุณจะปรากฏที่จุดสัมผัสของคุณและเปิดเผยเข้าไปในพื้นผิวทั้งหมดของFAB FABโปรดสังเกตว่ามันจะไม่เปลี่ยนFABสีในสภาวะปกติ ด้านล่าง API 21 (Lollipop) ไม่มีผลกระเพื่อม แต่FABสีของจะยังคงเปลี่ยนเมื่อคุณกด

ท้ายที่สุดถ้าคุณต้องการใช้เอฟเฟ็กต์ที่ซับซ้อนมากขึ้นสำหรับรัฐคุณควรเจาะลึกลงไปColorStateListนี่คือคำถาม SO ที่พูดถึงมัน: ฉันจะสร้าง ColorStateList โดยทางโปรแกรมได้อย่างไร.

อัปเดต: ขอบคุณสำหรับความคิดเห็นของ @ Kaitlyn ในการลบลายเส้นของ FAB โดยใช้ backgroundTint เป็นสีคุณสามารถตั้งค่าapp:borderWidth="0dp"ใน xml ของคุณ

ตามที่Vasil Valchevตั้งข้อสังเกตในความคิดเห็นมันง่ายกว่าที่ดู แต่มีความแตกต่างเล็กน้อยที่ฉันไม่ได้สังเกตเห็นใน XML ของฉัน

<android.support.design.widget.FloatingActionButton
    android:id="@+id/profile_edit_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_mode_edit_white_24dp"
    app:backgroundTint="@android:color/white"/>

สังเกตว่ามันคือ:

app:backgroundTint="@android:color/white"

และไม่

android:backgroundTint="@android:color/white"

หากคุณพยายามเปลี่ยนสีของ FAB โดยใช้แอพแสดงว่ามีปัญหา กรอบของปุ่มมีสีต่างกันดังนั้นคุณต้องทำอะไร:

app:backgroundTint="@android:color/transparent"

และในรหัสชุดสี:

actionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.white)));

เพียงแค่ใช้

app:backgroundTint="@color/colorPrimary"

อย่าใช้

android:backgroundTint="@color/colorPrimary"

โรงงาน Fab colorAccentเป็นสีขึ้นอยู่กับคุณ

<style name="AppTheme" parent="Base.Theme.AppCompat.Light">
    <item name="colorAccent">@color/accent</item>
</style>

mFab.setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(mContext,R.color.mColor)));

วิธีแก้ปัญหาอื่นอาจใช้งานได้ นี่คือวิธีลิงกอริลลา 10 ปอนด์ที่มีข้อได้เปรียบในการใช้อย่างกว้างขวางในกรณีนี้และกรณีที่คล้ายกัน:

Styles.xml:

<style name="AppTheme.FloatingAccentButtonOverlay" >
    <item name="colorAccent">@color/colorFloatingActionBarAccent</item>
</style>

เค้าโครง xml ของคุณ:

<android.support.design.widget.FloatingActionButton
       android:theme="AppTheme.FloatingAccentButtonOverlay"
       ...
 </android.support.design.widget.FloatingActionButton>

เอกสารแนะนำว่าให้ใช้ @ color / accent เป็นค่าเริ่มต้น แต่เราสามารถลบล้างมันบนโค้ดโดยใช้

fab.setBackgroundTintList(ColorStateList)

ยังจำได้

API ขั้นต่ำในการใช้ไลบรารีนี้คือ 15 ดังนั้นคุณต้องอัปเดต! หากคุณไม่ต้องการที่จะทำมันคุณต้องกำหนด drawable ที่กำหนดเองและตกแต่งมัน!

การเปลี่ยนสีพื้นหลังของปุ่มการกระทำลอยโดยใช้บรรทัดด้านล่าง

app:backgroundTint="@color/blue"

การเปลี่ยนสีไอคอนปุ่มการดำเนินการลอยตัว

android:tint="@color/white"     

ขอบคุณที่เติมข้อความอัตโนมัติ ฉันโชคดีหลังจากได้รับความนิยมและการทดลองไม่กี่ครั้ง:

    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:backgroundTint="@color/whicheverColorYouLike"

- หรือ - (ทั้งคู่เป็นแบบเดียวกัน)

    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:backgroundTint="@color/whicheverColorYouLike"

สิ่งนี้ใช้ได้กับฉันใน API เวอร์ชัน 17 พร้อมไลบรารีการออกแบบ 23.1.0

ฉันได้รับปัญหาเดียวกันและทุกอย่างก็ฉกผมของฉัน ขอบคุณสำหรับ https://stackoverflow.com/a/35697105/5228412

เราทำอะไรได้ ..

 favourite_fab.setImageDrawable(ContextCompat.getDrawable(getBaseContext(), R.drawable.favourite_selected));

มันใช้งานได้ดีสำหรับฉันและต้องการให้ผู้อื่นที่จะมาถึงที่นี่

 <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:elevation="6dp"
    app:backgroundTint="@color/colorAccent"
    app:pressedTranslationZ="12dp"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/add"/>

โปรดทราบว่าคุณเพิ่มสีใน res / values ​​/ color.xml และรวมถึงแอตทริบิวต์ใน fab ของคุณ

   app:backgroundTint="@color/addedColor"

ด้วยวัสดุรูปแบบและส่วนประกอบวัสดุ FloatingActionButtonโดยค่าเริ่มต้นมันต้องใช้สีที่ตั้งอยู่ในแอตทริบิวต์styles.xmlcolorSecondary

• คุณสามารถใช้app:backgroundTintคุณลักษณะใน xml:

<com.google.android.material.floatingactionbutton.FloatingActionButton
       ...
       app:backgroundTint=".."
       app:srcCompat="@drawable/ic_plus_24"/>

• คุณสามารถใช้ได้ fab.setBackgroundTintList();

• คุณสามารถปรับแต่งสไตล์ของคุณโดยใช้แอ<item name="backgroundTint">ททริบิวต์

  <!--<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item> -->
  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="backgroundTint">#00f</item>
    <!-- color used by the icon -->
    <item name="tint">@color/...</item>
  </style>

• เริ่มจากเวอร์ชัน1.1.0ของส่วนประกอบวัสดุคุณสามารถใช้materialThemeOverlayแอตทริบิวต์ใหม่เพื่อแทนที่สีเริ่มต้นสำหรับส่วนประกอบบางส่วนเท่านั้น:

  <style name="MyFloatingActionButton" parent="@style/Widget.MaterialComponents.FloatingActionButton">
    <item name="materialThemeOverlay">@style/MyFabOverlay</item>
  </style>

  <style name="MyFabOverlay">
    <item name="colorSecondary">@color/custom2</item>
    <!-- color used by the icon -->
    <item name="colorOnSecondary">@color/...</item>
  </style>

การแมปแอตทริบิวต์ของชุดรูปแบบใหม่สำหรับปุ่มการกระทำลอยในวัสดุ 1.1.0

ในธีมแอพของคุณ:

• ตั้ง colorSecondary เพื่อตั้งค่าสีสำหรับพื้นหลังของ FAB (แผนที่เป็น backgroundTint)
• ตั้งค่า colorOnSecondary เพื่อตั้งค่าสีสำหรับไอคอน / ข้อความและสีระลอกของ FAB (แผนที่เป็นสีอ่อนและ rippleColor)

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- ...whatever else you declare in your app theme.. -->
    <!-- Set colorSecondary to change background of FAB (backgroundTint) -->
    <item name="colorSecondary">@color/colorSecondary</item>
    <!-- Customize colorSecondary to change icon/text of FAB (maps to tint and rippleColor) -->
    <item name="colorOnSecondary">@android:color/white</item>
</style>

เมื่อใช้การผูกข้อมูลคุณสามารถทำสิ่งนี้:

android:backgroundTint="@{item.selected ? @color/selected : @color/unselected}"

ฉันทำตัวอย่างง่าย ๆ

ฉันทำมันเหมือน android: background = "@ color / colorAccent" ฉันแค่ไปที่ res โฟลเดอร์แล้วคลิกที่ค่าของโฟลเดอร์และจากนั้นใน colors.xml ใน colors.xml ฉันเพิ่งเปลี่ยนสีของ colorAccent และเรียกมันใน android: พื้นหลัง และมันทำ

จุดที่เราขาดหายไปคือก่อนที่คุณจะตั้งค่าสีบนปุ่มสิ่งสำคัญคือการทำงานกับค่าที่คุณต้องการสำหรับสีนี้ ดังนั้นคุณสามารถไปที่ค่า> สี คุณจะพบค่าเริ่มต้น แต่คุณสามารถสร้างสีได้โดยการกดและวางเปลี่ยนสีและชื่อ จากนั้น ... เมื่อคุณไปเปลี่ยนสีของปุ่มลอยน้ำ (ใน activity_main) คุณสามารถเลือกสีที่คุณสร้างขึ้น

ตัวอย่าง - โค้ดเกี่ยวกับค่า> สีที่มีสีเริ่มต้น + อีก 3 สีที่ฉันสร้างขึ้น:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="corBotaoFoto">#f52411</color>
    <color name="corPar">#8e8f93</color>
    <color name="corImpar">#494848</color>

</resources>

ตอนนี้ปุ่มแอ็คชั่นลอยน้ำของฉันพร้อมสีที่ฉันสร้างขึ้นและตั้งชื่อว่า "corPar":

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_input_add"
        android:tint="#ffffff"
        app:backgroundTint="@color/corPar"/>

มันใช้งานได้สำหรับฉัน โชคดี!

หากคุณมีปุ่มการดำเนินการลอยตัวที่ไม่มี drawable คุณสามารถเปลี่ยนโทนสีโปรแกรมโดยใช้:

fab.getBackground().mutate().setTint(ContextCompat.getColor(yourContext, R.color.anyColor));

เพิ่มสีในไฟล์ color.xml จากนั้นเพิ่มรหัสบรรทัดนี้ ... floatingActionButton.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.fab2_color)));

คุณสามารถใช้รหัสนี้ในกรณีที่คุณต้องการเปลี่ยนสีโดยทางโปรแกรม

floating.setBackgroundTintList(getResources().getColorStateList(R.color.vermelho));

ใช้

แอป: backgroundTint = "@ color / orange" ใน

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/id_share_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/share"
        app:backgroundTint="@color/orange"
        app:fabSize="mini"
        app:layout_anchorGravity="end|bottom|center" />



</androidx.coordinatorlayout.widget.CoordinatorLayout>

สำหรับการออกแบบวัสดุฉันเพิ่งเปลี่ยนสีของปุ่มการกระทำแบบลอยตัวเพิ่มสองบรรทัดด้านล่างในปุ่มการกระทำแบบลอยของคุณ xml และทำ

 android:backgroundTint="@color/colorPrimaryDark"
 app:borderWidth="0dp"

ใน Kotlin:

val gray = getColor(requireContext(), R.color.green)
binding.fabSubmit.backgroundTintList = ColorStateList.valueOf(gray)