我前兩天在群里又看到有人問“Button 背景改了好幾次還是紫色是不是我代碼寫錯(cuò)了”底下好幾個(gè)人附和說自己也踩過這個(gè)坑。這個(gè)問題在 Android 開發(fā)里太常見了尤其是從老項(xiàng)目遷移到 Material 組件、或者新建項(xiàng)目默認(rèn)勾選了 Material Components 主題之后原本一套android:background走天下的經(jīng)驗(yàn)突然就不靈了。按鈕永遠(yuǎn)頂著那個(gè)默認(rèn)紫色看著就讓人頭大。今天我就把這個(gè)問題的來龍去脈、背后原理、各種解決辦法一次性說清楚順手把我在實(shí)際項(xiàng)目里踩過的坑和排查思路也整理出來希望能幫正被這個(gè)問題折磨的朋友省下半天時(shí)間。這個(gè)內(nèi)容適合作者范圍很廣剛?cè)腴T Android 的初學(xué)者、從 Eclipse 老項(xiàng)目切到 Android Studio 的開發(fā)者、以及在做 UI 定制時(shí)需要精細(xì)控制按鈕樣式的同學(xué)。不管你是只用 XML 布局還是喜歡純代碼控制下面這些方案都能落地。我會把問題分成“為什么改不動”和“怎么才能真正改掉”兩大部分講每個(gè)方案都會給出完整寫法方便你直接照著抄。1. 問題根源按鈕的紫色到底從哪來的1.1 不是“背景”是主題色在作怪很多人第一反應(yīng)是去改android:background結(jié)果發(fā)現(xiàn)怎么改都沒反應(yīng)。這不是你操作姿勢不對而是從 Android 5.0 開始系統(tǒng)在渲染 Button 的時(shí)候就不再單純依賴background屬性了。尤其是你用 Android Studio 默認(rèn)模板新建項(xiàng)目后主題通常繼承自Theme.MaterialComponents.DayNight或Theme.Material3.DayNight這類 Material 主題布局里寫的Button會被自動替換成MaterialButton來渲染。MaterialButton的默認(rèn)背景是一層由backgroundTint控制的著色效果而它的默認(rèn)顏色值取自主題里的colorPrimary。Material 官方默認(rèn)主題的colorPrimary就是這個(gè)標(biāo)志性的紫色通常接近#6200EE。所以你在布局里寫B(tài)utton實(shí)際看到的是MaterialButton按主題色繪制出來的紫色而不是傳統(tǒng)意義上的背景色。1.2 MaterialButton 與普通 Button 的渲染差異為了搞清楚為什么android:background失效我先說一下MaterialButton的內(nèi)部機(jī)制。MaterialButton繼承自AppCompatButton但它額外引入了MaterialShapeDrawable作為背景繪制器然后用backgroundTint把這個(gè)繪制器重新著色。也就是說就算你給android:background塞了一張圖片或者一個(gè)色值MaterialButton也會在上面再蓋一層半透明狀態(tài)遮罩把最終顯示顏色拉向主題色。用一句大白話說普通 Button 是你給什么背景就顯示什么而MaterialButton是先畫一個(gè)形狀背景再刷上一層主題色油漆。所以你在布局里寫android:background#FF0000最后看到的不是純紅而是被紫色油漆調(diào)過味的暗紅色有時(shí)候甚至完全看不出變化。這種機(jī)制本意是為了讓整個(gè)應(yīng)用的按鈕保持統(tǒng)一風(fēng)格但到了自定義定制場景就成了很多人的頭號困擾。1.3 如何確認(rèn)你用的到底是哪種 Button在動手改顏色之前建議先確認(rèn)當(dāng)前按鈕是不是被替換成了MaterialButton。最快的方法是在布局文件里直接寫android.widget.Button然后看預(yù)覽效果有沒有變化。如果換成完整類名后顏色和樣式都變了說明之前用的就是 Material 系列的自動替換。也可以在代碼里打印按鈕的類名驗(yàn)證val button findViewByIdButton(R.id.my_button) Log.d(ButtonType, button.javaClass.name)輸出如果是com.google.android.material.button.MaterialButton那就確認(rèn)走了 Material 渲染路徑。這個(gè)判斷很關(guān)鍵因?yàn)楹竺娴慕鉀Q方案里有幾條只對MaterialButton生效有幾條需要換成普通 Button 才能用先搞清楚類型能少走很多彎路。2. 解決方案全景六種改顏色的路子總有一種適合你2.1 最省事直接用 app:backgroundTint 覆蓋如果你只希望某一個(gè)按鈕變成指定顏色不想動全局主題最直接的方法就是給MaterialButton設(shè)置app:backgroundTint。這個(gè)屬性就是用來控制那個(gè)紫色油漆的只要指定了它就能蓋掉主題默認(rèn)的colorPrimary。Button android:idid/btn_primary android:layout_widthwrap_content android:layout_heightwrap_content android:text登錄 app:backgroundTintcolor/btn_blue app:strokeColorcolor/btn_blue_stroke app:strokeWidth1dp /注意兩點(diǎn)布局根節(jié)點(diǎn)上要聲明xmlns:apphttp://schemas.android.com/apk/res-auto命名空間否則app:開頭的屬性會報(bào)錯(cuò)。另外app:backgroundTint和android:backgroundTint都可以用但為了兼容性和統(tǒng)一性推薦都用app:前綴的版本。2.2 全局統(tǒng)一修改主題 colorPrimary如果你希望整個(gè)應(yīng)用里所有按鈕統(tǒng)一切換到某個(gè)品牌色那就直接改主題里的colorPrimary。比如你公司的主色調(diào)是橙色就可以在values/themes.xml里把默認(rèn)的紫色換成橙色。style nameTheme.MyApp parentTheme.MaterialComponents.DayNight item namecolorPrimarycolor/brand_orange/item item namecolorPrimaryVariantcolor/brand_orange_dark/item /style這個(gè)方案的好處是改一處生效全部所有使用默認(rèn)MaterialButton樣式的按鈕都會變成橙色。但副作用也很明顯colorPrimary不只是控制按鈕還影響FloatingActionButton、選中狀態(tài)的TabLayout滑塊、Switch的開關(guān)背景、ProgressBar的進(jìn)度顏色等。改之前一定要在全局組件多的地方先評估影響范圍不然按鈕顏色對了別的地方顏色也跟著變可能又要花時(shí)間排查。2.3 繞開 Material用 android.widget.Button 或 AppCompatButton如果你不喜歡 MaterialButton 那套著色機(jī)制或者項(xiàng)目里要高度自定義按鈕樣式最徹底的方法就是繞開它顯式使用普通Button或AppCompatButton。這種方式下android:background是真正生效的你給什么顏色就顯示什么顏色。android.widget.Button android:layout_widthwrap_content android:layout_heightwrap_content android:text舊版按鈕 android:backgroundcolor/btn_red /這樣寫有個(gè)缺點(diǎn)按鈕會失去 Material 風(fēng)格的圓角、水波紋觸摸反饋和狀態(tài)層疊效果看起來會比較原生、比較扁平。如果你不介意這種樣式或者本來就要用自定義drawable做背景這反而是最省心、最不受約束的方案。2.4 進(jìn)階定制用 style 統(tǒng)一定制 MaterialButton如果項(xiàng)目中很多按鈕都要用同一種自定義顏色但又不是全局所有按鈕都改那么style是最優(yōu)雅的解決方案。你可以定義一個(gè)繼承自官方 Button 樣式的自定義 style在里面覆蓋backgroundTint、strokeColor、cornerRadius等屬性。style nameWidget.MyApp.PrimaryButton parentWidget.MaterialComponents.Button item namebackgroundTintcolor/btn_green/item item namestrokeColorcolor/btn_green_dark/item item namestrokeWidth2dp/item item namecornerRadius16dp/item item nameandroid:textColorcolor/white/item item nameandroid:textStylebold/item /style布局里這樣引用Button stylestyle/Widget.MyApp.PrimaryButton android:layout_widthmatch_parent android:layout_heightwrap_content android:text確認(rèn)支付 /這套方案適合品牌色統(tǒng)一、多處復(fù)用的場景。想調(diào)整顏色時(shí)只需要改 style 里的一個(gè) item不用一個(gè)按鈕一個(gè)按鈕去改布局。后期如果要加陰影、改字體也都在同一個(gè) style 里維護(hù)非常方便。2.5 要按壓效果用 selector 定義背景顏色列表上面幾種方案改的是靜態(tài)顏色但真實(shí)項(xiàng)目里按鈕通常都需要按下變色、禁用變灰這樣的交互反饋。這里就需要用到 ColorStateList也就是res/color目錄下的 selector 文件。以 MaterialButton 為例創(chuàng)建一個(gè)res/color/btn_bg_selector.xmlselector xmlns:androidhttp://schemas.android.com/apk/res/android item android:colorcolor/btn_disabled android:state_enabledfalse / item android:colorcolor/btn_pressed android:state_pressedtrue / item android:colorcolor/btn_normal / /selector然后把這個(gè) selector 設(shè)置給app:backgroundTintButton android:idid/btn_dynamic android:layout_widthwrap_content android:layout_heightwrap_content android:text帶狀態(tài)切換 app:backgroundTintcolor/btn_bg_selector /這里要特別說明MaterialButton的backgroundTint屬性接受的是ColorStateList不是普通的 color 資源。所以你可以放心地把 selector 傳給它它會根據(jù)按鈕當(dāng)前狀態(tài)自動切換顏色。這種方案的按壓反饋比單純換個(gè)靜態(tài)顏色自然得多建議有交互要求的按鈕優(yōu)先這么寫。2.6 要圓角和漸變用 shape drawable backgroundDrawable如果你對按鈕的要求不只是純色還要帶圓角、漸變、描邊這些效果就會發(fā)現(xiàn) MaterialButton 的app:backgroundTint并不能直接滿足所有需求。cornerRadius可以調(diào)圓角但漸變背景還是得靠自定義 drawable。先寫一個(gè)res/drawable/bg_btn_gradient.xmlshape xmlns:androidhttp://schemas.android.com/apk/res/android gradient android:startColor#FF6A00 android:endColor#FF3D00 android:angle0 / corners android:radius12dp / stroke android:width1dp android:color#CCFF3D00 / /shape然后在MaterialButton里用app:backgroundDrawable指定這個(gè) drawableButton android:layout_widthwrap_content android:layout_heightwrap_content android:text漸變按鈕 app:backgroundDrawabledrawable/bg_btn_gradient /注意MaterialButton里要用的是app:backgroundDrawable而不是android:background。這個(gè)屬性的優(yōu)先級比backgroundTint更高可以覆蓋掉默認(rèn)的形狀著色。用這種方式做出來的按鈕圓角、漸變、描邊都能正常顯示而且依然保留 MaterialButton 的點(diǎn)擊水波紋效果是自定義風(fēng)格里比較推薦的組合。3. 實(shí)操走一遍從新建工程到按鈕顏色真正落地3.1 環(huán)境準(zhǔn)備與工程初始化動手之前先把環(huán)境理清楚。我用的是 Android Studio 新版創(chuàng)建項(xiàng)目時(shí)選擇 Empty Views Activity語言 Kotlin 或 Java 都行不影響最終結(jié)果。主題默認(rèn)就是 Material 系列這正好可以復(fù)現(xiàn)并解決標(biāo)題里說的紫色無法修改問題。創(chuàng)建完項(xiàng)目后先看一眼values/themes.xml確認(rèn)當(dāng)前主題的 parent 到底是誰。不同 parent 對應(yīng)的解決方案會有細(xì)微差異比如Theme.MaterialComponents.DayNight和Theme.Material3.DayNight里colorPrimary的默認(rèn)值就不同。這一步看似不起眼但能幫你后續(xù)精準(zhǔn)定位問題根源。3.2 第一步先定位問題按鈕的類型和主題環(huán)境我在實(shí)際排查時(shí)會先寫一個(gè)最普通的 Activity布局里只放一個(gè) Button然后分別用三種方式測試直接寫B(tài)utton、寫androidx.appcompat.widget.AppCompatButton、寫android.widget.Button看看哪個(gè)能正常變色。這個(gè)過程能幫你確認(rèn)是不是MaterialComponentsViewInflater自動替換了 Button 類型。同時(shí)通過adb shell看一下主題實(shí)際生效情況adb shell dumpsys activity top | grep theme這一步能確認(rèn)當(dāng)前 Activity 用的主題文件方便判斷是不是從父主題繼承了什么奇怪的colorPrimary。多數(shù)情況下紫色問題就是在這里被發(fā)現(xiàn)的。3.3 第二步用 backgroundTint 實(shí)現(xiàn)單個(gè)按鈕變色假設(shè)你已經(jīng)確認(rèn)項(xiàng)目用的是 Material 主題而且按鈕就是 MaterialButton?，F(xiàn)在只想讓這個(gè)按鈕變成藍(lán)色不動其它按鈕那就用app:backgroundTint。先在res/values/colors.xml里定義好顏色color namebrand_blue#2196F3/color color namebrand_blue_dark#1976D2/color然后在布局里加上Button android:idid/btn_blue android:layout_widthwrap_content android:layout_heightwrap_content android:text藍(lán)色按鈕 app:backgroundTintcolor/brand_blue app:strokeColorcolor/brand_blue_dark app:strokeWidth2dp app:cornerRadius8dp /改完后運(yùn)行到模擬器或真機(jī)按鈕就會變成藍(lán)色同時(shí)保留圓角和描邊。這個(gè)方案我推薦用在單點(diǎn)按鈕的特殊配色場景改動量小風(fēng)險(xiǎn)低而且不用影響全局樣式。3.4 第三步全局換主題色或封裝公共 Button 樣式如果你的項(xiàng)目是給企業(yè)做內(nèi)部工具品牌色固定比如統(tǒng)一用綠色那就別一個(gè)個(gè)按鈕去設(shè)backgroundTint了直接在themes.xml里把colorPrimary改成綠色。這樣所有默認(rèn)按鈕、FloatingActionButton、TabLayout 選中態(tài)等都會統(tǒng)一變化團(tuán)隊(duì)一致性也更好維護(hù)。但做這類全局改動前我強(qiáng)烈建議你全局搜一下項(xiàng)目里直接使用?attr/colorPrimary或者color/xxx的地方避免遺漏或者產(chǎn)生不必要的樣式?jīng)_突。另外如果你只需要讓主要操作按鈕統(tǒng)一為綠色而次要操作按鈕是白色描邊風(fēng)格那還是用 style 的方式更合適。定義兩個(gè) stylestyle nameWidget.MyApp.PrimaryButton parentWidget.MaterialComponents.Button item namebackgroundTintcolor/brand_green/item item nameandroid:textColorcolor/white/item /style style nameWidget.MyApp.SecondaryButton parentWidget.MaterialComponents.Button.OutlinedButton item namebackgroundTintcolor/transparent/item item namestrokeColorcolor/brand_green/item item nameandroid:textColorcolor/brand_green/item /style然后在布局里給需要的按鈕分別引用style/Widget.MyApp.PrimaryButton或style/Widget.MyApp.SecondaryButton兩個(gè) style 因?yàn)?parent 不同一個(gè)實(shí)心、一個(gè)描邊視覺層次清晰后續(xù)維護(hù)也方便。3.5 第四步編寫帶按壓反饋的完整按鈕顏色狀態(tài)真實(shí)場景里按鈕不可能只有一個(gè)靜態(tài)顏色至少要區(qū)分正常、按下、禁用三種狀態(tài)。我常用的做法是建一個(gè)res/color/btn_login_selector.xmlselector xmlns:androidhttp://schemas.android.com/apk/res/android item android:color#B3E5FC android:state_pressedtrue / item android:color#80CBC4 android:state_enabledfalse / item android:color#2196F3 / /selector布局里直接用Button android:idid/btn_login android:layout_widthmatch_parent android:layout_height52dp android:text登錄 app:backgroundTintcolor/btn_login_selector /這種寫法在 Android 6.0 及以上版本表現(xiàn)很穩(wěn)定按下時(shí)按鈕會變淺禁用時(shí)自動變灰交互反饋明確用戶也不會覺得按鈕失靈。要注意的是state_enabledfalse的 item 必須寫在最前面selector 是按從上到下的順序匹配的順序錯(cuò)了會導(dǎo)致狀態(tài)永遠(yuǎn)命中第一個(gè)符合條件的 item效果就會出問題。3.6 代碼動態(tài)修改按鈕顏色的方法有些場景需要在代碼里動態(tài)切換按鈕顏色比如表單驗(yàn)證通過后才讓按鈕變成可點(diǎn)擊的亮色。用 Kotlin 或 Java 也能直接設(shè)置背景色狀態(tài)列表val color ContextCompat.getColor(this, R.color.brand_blue) val colorStateList ColorStateList.valueOf(color) button.backgroundTintList colorStateList如果需要在不同狀態(tài)間切換可以手動構(gòu)造 ColorStateListval states arrayOf( intArrayOf(android.R.attr.state_pressed), intArrayOf(-android.R.attr.state_enabled), intArrayOf() ) val colors intArrayOf( ContextCompat.getColor(this, R.color.btn_pressed), ContextCompat.getColor(this, R.color.btn_disabled), ContextCompat.getColor(this, R.color.btn_normal) ) button.backgroundTintList ColorStateList(states, colors)這種方式適合做業(yè)務(wù)邏輯驅(qū)動的按鈕狀態(tài)切換比如倒計(jì)時(shí)按鈕、提交按鈕等。要注意backgroundTintList屬性名在不同 API 級別上有差異如果項(xiàng)目 minSdk 低于 21需要走AppCompatButton的supportBackgroundTintList方法。4. 常見問題與排查技巧實(shí)錄4.1 高頻問題速查表為了方便你對照排查我把這個(gè)主題下常見的問題整理成了表格每一條都是我實(shí)際項(xiàng)目里撞見過或者幫別人解決過的?，F(xiàn)象根本原因解決方案設(shè)置了android:background#FF0000按鈕還是紫色MaterialButton 被 backgroundTint 著色改用app:backgroundTint指定顏色所有按鈕都跟著響應(yīng)式變色改動影響全局修改了主題里的colorPrimary限定范圍到 style 或單獨(dú)給按鈕設(shè)backgroundTint設(shè)置android:background后圓角丟失普通 Button 加載 shape 時(shí)遮住了默認(rèn)形狀用 MaterialButton 的app:cornerRadius或app:backgroundDrawable按鈕按壓后沒有變色反饋只設(shè)置了靜態(tài)顏色缺少 ColorStateList使用res/color下的 selector 作為backgroundTint圓角、漸變、描邊同時(shí)生效困難backgroundTint只能控制顏色不能控制復(fù)雜 drawable用app:backgroundDrawable指定 shape 或 selector drawable同一個(gè)按鈕在深色模式下顏色異常主題使用了 DayNight顏色沒有適配在values-night里定義對應(yīng)顏色資源這張表基本覆蓋了絕大多數(shù)按鈕顏色改不動的場景。如果你遇到的問題不在表里可以繼續(xù)往下看我在下面兩個(gè)小節(jié)里補(bǔ)充了更細(xì)節(jié)的排查思路。4.2 為什么改了 backgroundTint 以后背景還是怪怪的這是我被問得最多的一種情況明明已經(jīng)設(shè)置了app:backgroundTint按鈕也確實(shí)變成了目標(biāo)顏色但是圓角沒了、高度塌了、點(diǎn)擊效果也沒了。這通常是因?yàn)槟阍谕粫r(shí)間混用了android:background和app:backgroundTint。MaterialButton內(nèi)部用的是MaterialShapeDrawable如果你手動給它設(shè)置了一個(gè)普通 shape drawable 作為android:background那 MaterialButton 就無法按自己的邏輯繪制圓角和狀態(tài)層疊最終效果就變成沒有圓角的普通色塊。正確的做法是如果要用 MaterialButton就不要去動它的android:background全部通過app:backgroundTint控制顏色通過app:cornerRadius控制圓角通過app:strokeColor和app:strokeWidth控制描邊。實(shí)在有復(fù)雜背景需求再用app:backgroundDrawable一次性替換。4.3 混用主題和 style 導(dǎo)致樣式不可控還有一種隱蔽情況主題里已經(jīng)改了colorPrimary某個(gè) Button 又設(shè)置了 stylestyle 里又寫了backgroundTint它們之間是有優(yōu)先級的。style 的屬性優(yōu)先級高于主題單控件屬性優(yōu)先級高于 style。所以如果按鈕一直不是你預(yù)期的顏色要按單控件屬性 style 主題這個(gè)順序逐層排查。我最開始從 Eclipse 項(xiàng)目遷移時(shí)遇到過這種問題主題里colorPrimary是藍(lán)色但某個(gè)按鈕始終是紫色排查了很久才發(fā)現(xiàn)是父主題Theme.MaterialComponents.Light里某個(gè) style 默認(rèn)值覆蓋了colorPrimary。這種問題靠肉眼看很難發(fā)現(xiàn)建議在布局預(yù)覽里使用 Show in Preview 的 Theme 切換功能快速測試不同主題下的渲染效果縮小排查范圍。5. 一些實(shí)在的避坑建議寫到這里核心問題基本都講透了。最后分享幾個(gè)我實(shí)際開發(fā)中總結(jié)的小習(xí)慣雖然看起來瑣碎但能幫你省下不少排查時(shí)間。第一顏色資源一定要放在res/values/colors.xml里統(tǒng)一管理不要在布局里直接寫十六進(jìn)制色值。項(xiàng)目稍微大一點(diǎn)散落的色值就像定時(shí)炸彈改起來讓人崩潰。第二如果你維護(hù)的是多人協(xié)作項(xiàng)目建議約定好按鈕樣式的統(tǒng)一命名規(guī)范比如Widget.模塊名.Button.場景。這樣通過布局里的 style 一眼就能看出按鈕屬于哪個(gè)業(yè)務(wù)線替換顏色時(shí)不會誤傷。第三遇到顏色問題先跑一次真機(jī)再說。模擬器的渲染效果和真機(jī)在某些主題細(xì)節(jié)上存在差異尤其是深色模式、廠商定制系統(tǒng)經(jīng)常會出現(xiàn)模擬器正常、真機(jī)顏色不對的情況。實(shí)測下來很多奇怪的按鈕變色問題在真機(jī)上反而能更快暴露真正原因。第四如果是動態(tài)設(shè)置按鈕顏色別忘了考慮按鈕的點(diǎn)擊區(qū)域和響應(yīng)狀態(tài)。顏色變化只是視覺反饋真正決定交互體驗(yàn)的是點(diǎn)擊事件是否及時(shí)、禁用狀態(tài)是否生效。有些按鈕顏色對了但點(diǎn)擊事件沒處理對用戶會誤以為是顏色問題。這個(gè)主題看似簡單背后的原理卻牽扯到 Material 組件、主題系統(tǒng)、狀態(tài)列表、drawable 層級等多個(gè)知識點(diǎn)。遇到問題別急著硬編碼先理清按鈕類型和顏色來源再選擇對應(yīng)的方案基本都能快速解決。希望這篇內(nèi)容能幫到還在被紫色按鈕折磨的朋友如果你在實(shí)操中碰到了新的坑歡迎按我這個(gè)排查思路再捋一遍大概率能自己找到答案。