如何在Android Studio設計並套用自己的Theme

Maggie Kuo
5 min readJul 21, 2016

--

過去寫Android APP時,想要更改配色、字體,就像寫桌機程式一樣,無論是畫面底色、字體顏色、每個元件須單獨更改。Android 3.0 (僅適用於平板) 推出了Holo主題,在那之前,Android畫面並無主題式設計,Android 4.0以後,手機與平板共用同一套Android作業系統,延用主題式設計,為了向下相容,開發Android APP時須加入 Android Support Library 套件,會在安裝APP時自己夾帶需要的類別庫過去,讓Android 1.x、 2.x 作業系統的手機也能正常安裝執行新開發的APP。到了Android 5.0,採用 Material Design 實感設計後,為了讓4.x也能正常使用,同樣的,欲安裝到5.0以下的裝置,APP也須自行夾帶符合Material Design規格的類別庫。

在一般網頁,更改畫面配置、顏色、字體不外乎CSS、Style,在Android內可大不相同,開始講前,我們先看一張表:

Android 5.0以後,New Activity時會自動繼承 AppCompactActivity,主題式設計的特色在於每個元件都有相對應配色,例如下圖:

圖片取自官網

那麼,我們該如何自己設計自己的主題(Theme),進而替換預設 Theme呢?有人會問:我沒學過設計,要從頭到尾調出一整套的配色和樣式,萬一配出來的顏色、樣式、字體不好看怎麼辦?關於這點,Google開發人員非常貼心的都為各位想到了,當我們新增自己的Theme時,有個Parent選項,代表Parent身上的所有內容都可使用,連帶的,Parent的Parent (如果有的話)身上所有內容一並延用。

以下我們就來看看如何設計自己的Theme,範例接續上一篇「 為你的APP設計漂亮的登入畫面」。

設計Theme

截至目前為止,畫面雖然配置好了,但尚稱不上美觀,現在要為它加上底色。開啟 res/values/styles.xml,點選右上角[Open editor],開啟色彩配置頁。

styles.xml和編輯模式對應關係如下:

Create New Theme

點選 [Create New Theme]

輸入自己的主題名稱,Parent theme 預設即可,按[OK]。

按下[OK]後回到此畫面,Theme 新增完成,AppTheme.MaterialLitotom已具有父主題AppTheme身上所有的特性,左邊區塊為不同元件顯示的樣式。

res/values/styles.xml多了一個style

New Color

現在準備更改登入頁面的背景顏色,找到 android:colorBackground,點選左邊色塊。

點選 [New color Value]

直接點選顏色或輸入色碼,下方預設resource name 為 backgound_material_light,因為我們本來就只是要更改背景顏色,所以不須更改,確定後點選[OK]。

新增色彩後,/res/values/values.xml會多出一個tag

圖型編輯畫面隨即改變顯示樣式,所見即所得。

依此方式,依序微調畫面色彩。

套用Theme

套用主題有兩種方式,一種是整個APP套用,一種是單一畫面套用,整個APP套用可維持整個應用程式的整體性,我們這裡只要套用在登入畫面上。開啟AndroidManifast.xml,加入LoginActivity的主題如下:

最後完成的 activity_login.xml

最後完成畫面如下:

是不是比原來好一點了呢?試試看喔!

--

--