Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Theming In Android++
Search
Pabi Moloi
July 03, 2019
Programming
1
43
Theming In Android++
In this talk, I spoke about some of the mistakes I made with theming and how I overcame them.
Pabi Moloi
July 03, 2019
Tweet
Share
More Decks by Pabi Moloi
See All by Pabi Moloi
Theming In Android
pabimoloi
0
53
My Journey To Becoming And Android Engineer
pabimoloi
0
48
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
2
670
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
670
ニーリーにおけるプロダクトエンジニア
nealle
0
890
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
450
What's new in AppKit on macOS 26
1024jp
0
140
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
Porting a visionOS App to Android XR
akkeylab
0
660
GPUを計算資源として使おう!
primenumber
1
200
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
310
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Site-Speed That Sticks
csswizardry
10
700
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Pabi Moloi @pabiforbes www.peckishpabi.co.za Android Engineer
Theming In Android Color Typography Style Theme
What is theming, and why is it important?
Material Components implementation "com.google.android.material:material:$material_version"
Theming In Android Color Typography Style Theme
Theming In Android Blog
None
None
None
So how should we ideally name our colors?
Colors have names :)
Parmesan
Material Color Tool
<!--?xml version="1.0" encoding="UTF-8"?--> <resources> <color name="primaryColor">#f9a825</color> <color name="primaryLightColor">#ffd95a</color> <color name="primaryDarkColor">#c17900</color>
<color name="secondaryColor">#ffffff</color> <color name="secondaryLightColor">#ffffff</color> <color name="secondaryDarkColor">#25cccccc</color> <color name="primaryTextColor">#ffffff</color> <color name="secondaryTextColor">#000000</color> </resources>
<!--?xml version="1.0" encoding="UTF-8"?--> <resources> <color name="primaryColor">#f9a825</color> <color name="primaryLightColor">#ffd95a</color> <color name="primaryDarkColor">#c17900</color>
<color name="secondaryColor">#ffffff</color> <color name="secondaryLightColor">#ffffff</color> <color name="secondaryDarkColor">#25cccccc</color> <color name="primaryTextColor">#ffffff</color> <color name="secondaryTextColor">#000000</color> </resources>
Give colors their names!
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="red">#d32f2f</color> <color name="mustard">#F9A825</color> <color name="yellow">#ffd95a</color>
<color name="dark_mustard">#c17900</color> <color name="white">#ffffff</color> <color name="light_grey">#25CCCCCC</color> <color name="black">#000000</color> </resources>
<style name="..." parent="..."> <item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryDark">@color/dark_mustard</item>
<item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> </style>
Recap - Color - Give colors names, which helps in
the reduction of duplication. - “On” colours are usually used for iconography, text, and strokes
Theming In Android Color Typography Style Theme
Typography
Attributes • textAppearanceHeadline1 - textAppearanceHeadline6 • textAppearanceSubtitle1 - textAppearanceSubtitle2 •
textAppearanceBody1 - textAppearanceBody2 • textAppearanceCaption • textAppearanceButton • textAppearanceOverline
None
<style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> ... </style>
<style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> ... </style>
<style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> ... </style>
<style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> ...
</style>
<style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> <item
name="android:textStyle">normal</item> </style>
None
Theming In Android Color Typography Style Theme
Style
Font Color Font Size Background Colour Padding MinHeight MinWidth ...
<style name="headline3" parent="TextAppearance.MaterialComponents.Headline3"> <item name="android:letterSpacing">0</item> <item name="android:textAllCaps">false</item> <item name="android:textSize">24sp</item> <item
name="android:textStyle">normal</item> </style>
None
<style name="FloatingActionButtonStyle" parent="Widget.MaterialComponents.FloatingActionButton"> ... </style>
<style name="FloatingActionButtonStyle" parent="Widget.MaterialComponents.FloatingActionButton"> <item name="backgroundTint">@color/mustard</item> <item name="tint">@color/white</item> <item name="rippleColor">@color/white</item> </style>
<com.google.android.material.floatingactionbutton.FloatingActi onButton ... style="@style/FloatingActionButtonStyle"/>
Theming In Android Color Typography Style Theme
Theme
...is a type of style that is applied to: •
The entire application • Activity • View Hierarchy
<style name="NoActionBarTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/mustard</item> <item name= "colorOnPrimary">@color/white</item> <item name="colorPrimaryVariant">@color/yellow</item>
<item name="colorPrimaryDark">@color/dark_mustard</item> <item name="colorAccent">@color/red</item> <item name="colorSecondary">@color/white</item> <item name="colorOnSecondary">@color/black</item> <item name="android:windowBackground">@color/white</item> </style>
Dark Theme
None
<style name="NoActionBarTheme" parent= "Theme.MaterialComponents.Light.NoActionBar"> ... </style>
<style name="NoActionBarTheme" parent= "Theme.MaterialComponents.DayNight.NoActionBar"> ... </style>
AppCompatDelegate.setDefaultNightMode (AppCompatDelegate.MODE)
Modes: • MODE_NIGHT_FOLLOW_SYSTEM • MODE_NIGHT_YES • MODE_NIGHT_NO • MODE_NIGHT_AUTO_BATTERY
Honourable Mention: • MODE_NIGHT_AUTO_TIME • MODE_NIGHT_AUTO
What to keep at the back of your mind: Android’s
Style Hierarchy
View Specific Styling Theme Default Styling Applying a style to
a view Setting individual attributes
Programmatically applying attributes Character/Paragraph styling