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
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
PipeCDのプラグイン化で目指すところ
warashi
1
280
Team operations that are not burdened by SRE
kazatohiei
1
310
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Hack Claude Code with Claude Code
choplin
4
2.2k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
120
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
2
160
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
230
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Making Projects Easy
brettharned
116
6.3k
Designing Experiences People Love
moore
142
24k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
KATA
mclloyd
30
14k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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