จะเปลี่ยนสีพื้นหลังของสแน็คบาร์ได้อย่างไร?


103

ฉันกำลังแสดงสแน็คบาร์ใน DialogFragment ภายในคลิกบวกของ alertDialog นี่คือข้อมูลโค้ดของฉัน

Snackbar snackbar = Snackbar.make(view, "Please enter customer name", Snackbar.LENGTH_LONG)
                .setAction("Action", null);
View sbView = snackbar.getView();
sbView.setBackgroundColor(Color.BLACK);
snackbar.show();

อย่างที่คุณเห็นสีพื้นหลังของสแน็คบาร์ของฉันแสดงสีขาว

ฉันกำลังส่งมุมมองของไดอะล็อกแฟรกเมนต์ไปที่สแน็คบาร์ ฉันต้องการพื้นหลังสีดำ? ฉันจะทำเช่นนี้ได้อย่างไร? ฉันกำลังส่งคืน alertDialog ใน DialogFragment และธีมที่ฉันตั้งค่าเป็นไดอะล็อกดังต่อไปนี้

<style name="MyAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">

    <!-- Used for the buttons -->
    <item name="colorAccent">@color/accent</item>
    <!-- Used for the title and text -->
    <item name="android:textColorPrimary">@color/primary</item>
    <!-- Used for the background -->
    <item name="android:background">@color/white</item>
</style>

แม้ว่าฉันจะตั้งค่าสีพื้นหลังเป็นสีขาวสำหรับกล่องโต้ตอบ แต่ก็ควรแทนที่ด้วยการตั้งค่าสีพื้นหลังเป็นสแน็คบาร์



พยายามแล้วไม่ช่วยฉัน ... ฉันกำลังเรียกสแน็คบาร์จากส่วนโต้ตอบ + alertDialog อยู่ในนั้นและฉันกำลังส่งผ่านมุมมองการคลิกปุ่มบวกไปยังสแน็คบาร์
Ajinkya

คำตอบ:


173

ลองตั้งค่าสีพื้นหลังดังนี้:

sbView.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.BLACK));

มันจะทำงาน 100%!


51
คุณอาจต้องทำsnackBarView.getView().setBackgrondColor(ContextCompat.getColor(getActivity(), R.color.BLACK));
jaytj95

2
หากคุณพบว่าหน้านี้จาก Google และโซลูชันด้านบนไม่ได้ผลสำหรับคุณคุณอาจต้องลองใช้หน้านี้แทน:sbView.setBackgroundColor(getResources().getColor(R.color.BLACK))
modu

@modu หมายเหตุที่getResources#getColorเลิกใช้งานตั้งแต่ API ระดับ 23 (Marshmallow) และContextCompat#getColorควรใช้แทน
Edric

90

คุณสามารถทำได้เช่นนี้

Snackbar snackbar;
snackbar = Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT);
View snackBarView = snackbar.getView();
snackBarView.setBackgroundColor(yourColor);
TextView textView = (TextView) snackBarView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(textColor);
snackbar.show();

1
อย่างที่คุณเห็นว่าฉันทำสิ่งเดียวกัน แต่มันไม่แสดงเป็นสีดำ
Ajinkya

ฉันใช้สิ่งเดียวกันนี้ในหนึ่งในโครงการของฉันพยายามแสดงในกิจกรรมเพื่อการทดสอบอาจเป็นเพราะมันไม่ทำงานเนื่องจากกล่องโต้ตอบ
Zubair Akber

ยามันทำงานในกิจกรรม แต่ฉันต้องการให้มันอยู่ในส่วนของกล่องโต้ตอบ
Ajinkya

ฉันคิดว่าเป็นเพราะมุมมองของคุณที่คุณผ่านมันไป
Zubair Akber

20

หากคุณต้องการกำหนดสีพื้นหลังสำหรับสแน็คบาร์ทั้งหมดของคุณเพียงแค่ลบล้างdesign_snackbar_background_colorค่าที่อยู่ในทรัพยากรของคุณ ตัวอย่างเช่น:

<color name="design_snackbar_background_color" tools:override="true">@color/colorPrimaryLight</color>

วิธีนี้สะอาดและดีที่สุด ขอบคุณ!
AloDev

1
ใช้งานได้ดีเพียงติดใน colors.xml เท่านี้คุณก็พร้อมแล้ว!
Avi Parshan

ไม่ ไม่ได้ผลสำหรับฉัน ไม่มีวิธีแก้ปัญหาอื่น ๆ
AndroidDev

20

เนื่องจากไม่มีคำตอบอื่นใดที่ให้การลบล้างสไตล์ที่กำหนดเอง (ซึ่งฉันคิดว่าเป็นวิธีการอัปเดตที่ปลอดภัยที่สุดวิธีหนึ่ง) ฉันโพสต์วิธีแก้ปัญหาไว้ที่นี่

ฉันโพสต์วิธีแก้ปัญหาที่กล่าวถึงธีมAndroidX( support design 28) ใหม่แล้ว

โดยมีเงื่อนไขว่าแอปพลิเคชันของคุณใช้แบบกำหนดเองที่เรียกMyAppThemeในAndroidManifest.xml:

<application
        android:name=".MyApplicationName"
        android:allowBackup="true"
        android:icon="@mipmap/icon"
        android:roundIcon="@mipmap/icon_round"
        android:label="@string/app_name"
        android:theme="@style/MyAppTheme">

สร้างไฟล์ (ถ้าคุณยังไม่ได้ทำ) ซึ่งvalues/style.xmlจะลบล้างธีมที่แอปพลิเคชันของคุณใช้:

<style name="MyAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/myColorPrimary</item>
    <item name="colorPrimaryDark">@color/myColorPrimaryDark</item>
    <item name="colorAccent">@color/myColorAccent</item>
    <item name="snackbarStyle">@style/MySnackBarStyle</item>
</style>

<!-- snackbar style in res/values -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@color/mySnackbarBackgroundColor</item>
</style>

และระบุสีของคุณในvalues/colors.xmlไฟล์ของคุณ

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="myColorPrimary">#008577</color>
    <color name="myColorPrimaryDark">#00574B</color>
    <color name="myColorAccent">#D81B60</color>
    <color name="mySnackbarBackgroundColor">#D81B60</color>
</resources>

อัปเดต 2020

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

  1. หากคุณกำหนดเป้าหมายเป็น API 21+

แทนที่android:backgroundด้วยandroid:backgroundTint

<!-- snackbar style in res/values-21/ -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:backgroundTint">@color/mySnackbarBackgroundColor</item>
</style>
  1. หากคุณกำหนดเป้าหมาย API <21 ถ้าคุณตัดสินใจที่จะใช้สแน็กบาร์แบบเดิมสำหรับ API <21 คุณสามารถตั้งค่า abouve ของคุณMySnackbarStyleในres / values-21 /โฟลเดอร์และปล่อยสไตล์เดิมไว้ในโฟลเดอร์res / values ​​ของคุณ

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

<!-- snackbar style in res/values/ -->
<style name="MySnackBarStyle" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:background">@drawable/my_snackbar_background</item>
</style>

และยืมของคุณmy_snackbar_backgroundจากrepo อย่างเป็นทางการด้วยวิธีนี้:

<!-- in res/drawable/ -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="4dp"/>
    <solid android:color="@color/mySnackbarBackgroundColor"/>
</shape>

นี่คือrepo สนามเด็กเล่น

ป้อนคำอธิบายภาพที่นี่


3
นี่คือทางออกที่สะอาดและดีที่สุด
TrackDave

มันเปลี่ยนขนาดของ snakbar
William

โปรดทราบว่า AppTheme ของคุณต้องสืบทอดจาก Theme.MaterialComponents เพื่อรวบรวม
A.Mamode

ขอบคุณสำหรับmy_snackbar_background. หากไม่มีสแน็คบาร์ก็ดึงด้วยมุมที่กลมกว่า
CoolMind

ฉันจะเพิ่มมากขึ้นอีกนิดจัดแต่งทรงผมในstackoverflow.com/a/62006413/2914140
CoolMind

17

เวอร์ชัน Kotlin (พร้อมส่วนขยาย ):

สร้างในไฟล์ (สำหรับตัวอย่าง SnackbarExtension.kt) ส่วนขยาย:

fun Snackbar.withColor(@ColorInt colorInt: Int): Snackbar{
   this.view.setBackgroundColor(colorInt)
   return this
}

ถัดไปในกิจกรรม / ส่วนของคุณคุณจะสามารถทำสิ่งนี้ได้:

Snackbar
  .make(coordinatorLayout, message, Snackbar.LENGTH_LONG)
  .withColor(YOUR_COLOR)
  .show()

ชอบคำตอบนี้มากฉันได้เพิ่มการระบายสีข้อความด้วย: สนุก Snackbar.withColor (@ColorInt backgroundColor: Int, @ColorInt textColor: Int): Snackbar {this.view.setBackgroundColor (backgroundColor) this.view.findViewById <TextView> ( android.support.design.R.id.snackbar_text) .setTextColor (textColor) คืนค่านี้}
willcwf

13

รหัสร้องมีประโยชน์สำหรับการเปลี่ยนสีข้อความของข้อความ

Snackbar snackbar = Snackbar.make(rootView, "Enter Your Message",Snackbar.LENGTH_SHORT);
View view = snackbar.getView();
TextView tv = (TextView)view.findViewById(android.support.design.R.id.snackbar_text);
tv.setTextColor(Color.RED);
snackbar.show();

วิธีที่สอง: คุณสามารถเปลี่ยนสีได้โดยเปลี่ยนธีมของกิจกรรมด้วย


7

มันสายเกินไป แต่ในกรณีที่ยังมีคนต้องการความช่วยเหลือ นี่คือวิธีการทำงาน

      Snackbar snackbar = Snackbar.make(mainView, text, Snackbar.LENGTH_LONG);
    View snackBarView = snackbar.getView();
    snackBarView.setBackgroundColor(context.getResources().getColor(R.color.btn_background_color));
    snackbar.show();

4

ในขณะที่ทำงานกับ xamarin android ฉันพบว่า ContextCompat.GetColor () ส่งคืน Int แต่ setBackgroundColor () คาดว่าจะมีพารามิเตอร์ประเภทสี นี่คือวิธีที่ฉันทำให้มันทำงานในโครงการ xamarin android ของฉัน

Snackbar snackbarview =  Snackbar.Make(toolbar, message, Snackbar.LengthLong);
View snckView = snackbarview.View;                
snckView.SetBackgroundColor(Color.ParseColor(GetString(Resource.Color.colorPrimary)));
snackbarview.Show();

+1 สำหรับ Xamarin View snckView = snackbarview.View;แทนsnackbar.getView();ซึ่งใช้ไม่ได้ แต่ใช้งานParseColorไม่ได้
Cfun

@Cfun คุณช่วยอธิบายปัญหาของคุณอีกหน่อยได้ไหมเพื่อที่ฉันจะได้ช่วยคุณแก้ไข
SATYAJEET RANJAN

ฉันไม่ดีฉันใช้System.Drawing.Color.ParseColorแทนAndroid.Graphics.Color.ParseColor. ตอนนี้ฉันมี: "ชื่อ 'getstring' ไม่มีอยู่ในบริบทปัจจุบัน"
Cfun

@Cfun คุณได้รับข้อผิดพลาดนี้ในกิจกรรมหรือส่วนย่อยหรือคุณกำลังเรียก getString () ในคลาสอื่น
SATYAJEET RANJAN

ฉันเรียกมันในคลาสอื่น ๆ
Cfun

3

ฉันสร้างคลาส utils เล็กน้อยเพื่อให้ฉันสามารถสร้างสแน็คบาร์สีที่กำหนดเองผ่านแอพได้อย่างง่ายดาย

package com.yourapppackage.yourapp;

import android.support.design.widget.Snackbar;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class SnackbarUtils {

    private int BACKGROUND_COLOR;
    private int TEXT_COLOR;
    private int BUTTON_COLOR;
    private String TEXT;


    public SnackbarUtils(String aText, int aBgColor, int aTextColor, int aButtonColor){
        this.TEXT = aText;
        this.BACKGROUND_COLOR = aBgColor;
        this.TEXT_COLOR = aTextColor;
        this.BUTTON_COLOR = aButtonColor;
    }

    public Snackbar snackieBar(){
        Snackbar snackie = Snackbar.make(MainActivity.getInstance().findViewById(android.R.id.content), TEXT, Snackbar.LENGTH_LONG);
        View snackView = snackie.getView();
        TextView snackViewText = (TextView) snackView.findViewById(android.support.design.R.id.snackbar_text);
        Button snackViewButton = (Button) snackView.findViewById(android.support.design.R.id.snackbar_action);
        snackView.setBackgroundColor(BACKGROUND_COLOR);
        snackViewText.setTextColor(TEXT_COLOR);
        snackViewButton.setTextColor(BUTTON_COLOR);
        return snackie;
    }
}

จากนั้นจึงจะใช้งานได้เช่นนี้ที่ใดก็ได้ในแอป:

new SnackbarUtils("This is the text displayed", Color.RED, Color.BLACK, Color.YELLOW).snackieBar().setAction("OTAY", v -> { 
     //donothing
     }).show();


2

ใส่ไว้ในคลาส Utility:

public class Utility {
    public static void showSnackBar(Context context, View view, String text) {
        Snackbar sb = Snackbar.make(view, text, Snackbar.LENGTH_SHORT);
        sb.getView().setBackgroundColor(ContextCompat.getColor(context, R.color.colorAccent));
        sb.show();
    }
}

โดยใช้สิ่งนี้:

Utility.showSnackBar(getApplicationContext(), findViewById(android.R.id.content), "Add success!!!");

2

โดยทั่วไปโซลูชันที่ให้มามีข้อเสียอย่างหนึ่ง พวกเขาเปลี่ยนรูปร่างของสแน็คบาร์และลบรัศมี

ส่วนตัวชอบอะไรแบบนั้นมากกว่า

val snackbar = Snackbar.make(view, text, Snackbar.LENGTH_LONG);
val view = snackbar.getView();
val color = view.resources.getColor(colorId)
view.background.setColorFilter(color, PorterDuff.Mode.SRC_ATOP)

1

ไม่มีวิธีแก้ปัญหาอื่นใดที่ใช้ได้ผลกับฉันเลย หากฉันกำหนดเฉพาะสีพื้นหลังของ Snackbar เค้าโครงภายใต้ TextView และปุ่มจะเป็นสีเริ่มต้น ถ้าฉันตั้งค่าพื้นหลังของ TextView มันจะกระพริบเล็กน้อยหลังจากที่ SnackBar แสดงขึ้น และปุ่มเค้าโครงรอบยังคงเป็นสีเริ่มต้น

ในตอนท้ายฉันพบว่าวิธีที่ดีที่สุดสำหรับฉันคือการเปลี่ยนสีพื้นหลังของแม่ของ TextView (SnackbarContentLayout) ตอนนี้แถบสแน็คบาร์ทั้งหมดมีสีอย่างถูกต้องและจะไม่กะพริบเมื่อปรากฏขึ้น

snack = Snackbar.make(view, text, duration)
View view = snack.getView();
view.setBackgroundColor(BACKGROUND_COLOR);
TextView tv = view.findViewById(android.support.design.R.id.snackbar_text);
tv.setTextColor(TEXT_COLOR);
((SnackbarContentLayout) tv.getParent()).setBackgroundColor(BACKGROUND_COLOR);


1

ฉันไม่รู้ว่าทำไม setBackgroundColor () ไม่พบในโปรเจ็กต์ของฉัน นั่นเป็นเหตุผลที่ฉันสร้างฟังก์ชันส่วนขยายและตอนนี้ก็เรียบร้อยดี

fun View.showSnackBar(message: String) {
    val snackBar = Snackbar.make(this, message, Snackbar.LENGTH_LONG)
    snackBar.setBackgroundTint(ContextCompat.getColor(this.context, R.color.colorAccent))
    snackBar.show()
}

และเรียกมันว่าร้อง

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/login_holder_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   // your UI

</FrameLayout>

LoginActivity.kt

login_holder_layout.showSnackBar("Invalid Email") 

0
public class CustomBar {

public static void show(View view, String message, boolean isLong) {
    Snackbar s = Snackbar.make(view, message, isLong ? Snackbar.LENGTH_LONG : Snackbar.LENGTH_SHORT);
    s.getView().setBackgroundColor(ContextCompat.getColor(view.getContext(), R.color.red_900));
    s.show();
}

public static void show(View view, @StringRes int message, boolean isLong) {
    Snackbar s = Snackbar.make(view, message, isLong ? Snackbar.LENGTH_LONG : Snackbar.LENGTH_SHORT);
    s.getView().setBackgroundColor(ContextCompat.getColor(view.getContext(), R.color.red_900));
    s.show();
}

}

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.