Switching themes on the go

Video: https://www.youtube.com/watch?v=K-gjMWQLI1U

Let's talk about customizations. Even though Android allows creating different themes for your designs and apply them to all your screen fairly easy, doing this dynamically requires both some coding and design decisions.
In this talk, Alex will showcase how to setup your app in order to enable dynamic theme switching, and talk about good practices on both code and design side of the things.

This talk was presented in barcamp droidcon Greece 2016

Sample project: https://github.com/alexstyl/Theming-Android

Transcript

1. Switching themes on the go Alex Styl
2. Alex Styl Software Craftsman @ Novoda
3. Why theming?
4. Make it mine
5. Power users already do it the hard way
6. The Dark Theme Syndrome
7. What about the Brand? Your brand is not just colors What about Accessibility? Brand logos and assets should work on different backgrounds
8. Themes “Almost like the good ol’ Sony Ericsson times”
9. Themes Primary Dark Color
 Primary Color 
 Accent Color Text Color Primary Color
 + Inverse Google Design: Style https://www.google.com/design/spec/style/color.html Main Attributes
10. Things to consider Design with attributes in mind Create fallback colors Consider Accessibility when creating Themes Simulate color space in Developer Options
11. “But how?” - You (2016)
12. Themes are XML, hence read-only (˽°□°҂˽︵ ˍʓˍ
13. Create a bunch of themes switch them on Runtime ʾʒʾϛ( º _ ºϛ)
14. Theme Resources themes.xml <style name="Theme.DefaultBlue"
 parent="Theme.AppCompat.Light.DarkActionBar">
 <item name=“colorPrimaryDark">@color/dark_blue</item>
 <item name="colorPrimary">@color/blue</item>
 <item name="colorAccent">@color/pink</item>
 </style>
15. Custom Attributes <attr name="colorSecondary" format=“color"/> <attr name="headlineColor" format=“color”/> <attr name="cardItemBackground" format=“color"/> <style name="Theme.DefaultBlue"
 parent="Theme.AppCompat.Light.DarkActionBar">
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorAccent">@color/colorAccent</item> <item name="colorSecondary">@color/colorSecondary</item> <item name="headlineColor">@color/headlineColor</item> <item name="cardItemBackground">@color/cardBackground</item>
 </style>
16. Base Themes Theme.AppCompat.Light.DarkActionBar Theme.AppCompat.Light Theme.AppCompat Use the .NoActionBar variant if creating your own Toolbar
17. Styling the Toolbar <attr name="toolbarTheme" format=“reference”/> themes.xml <style name="Theme.Light"
 parent="Theme.AppCompat.Light.NoActionBar">
 <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
 <item name=“toolbarTheme”>@style/ThemeOverlay.AppCompat.Dark.ActionBar</item> </style> layout.xml <android.support.v7.widget.Toolbar
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="?attr/toolbarTheme" />
18. Toolbar Icons <attr name="actionEditIcon" format=“reference”/> <style name="Theme.Light"
 parent=“Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorAccent">@color/colorAccent</item>
 <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
 <item name=“themeTheme”>@style/ThemeOverlay.AppCompat.Dark.ActionBar/item> <item name=“actionEditIcon”>@drawable/ic_action_edit_dark</item> </style> menu.xml <menu xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:id=“@+id/action_edit"
 android:icon="?attr/actionEditIcon"
 android:title="@string/title" />
 </menu>
 as attributes
19. Applying the Theme Activity.java Switch theme anytime before setContentView() @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 
 AppTheme theme = getUserSelectedTheme();
 setTheme(theme.getThemeId());
 setContentView(R.layout.activity_main); 
 …
 } 

20. Applying the Theme when user selects a new theme private final OnThemeSelectedListener themeSelectedListener = new OnThemeSelectedListener() {
 
 @Override
 public void onThemeSelected(AppTheme theme) { persistThemePreference(theme); recreateActivity(); // or for legacy devices 
 Intent intent = getIntent();
 startActivity(intent);
 finish();
 overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);
 }
 };
21. One last detail
22. Use a Global Dark Theme AndroidManifest.xml <manifest>
 ... <application
 android:theme=“@style/Theme.AppTheme”> ... </application> </manifest> themes.xml <style name="Theme.AppTheme"
 parent="Theme.AppCompat" /> Transitioning from dark to light works better than the other way round
23. Final Result screenshots from Memento Calendar
24. https://github.com/alexstyl/Theming-Android Sample Project
25. Wrap it up Customizations ftw! Use attributes instead of color references Structure your themes by Light/Dark
26. Thank you Questions? Alex Styl @alexstyl https://github.com/alexstyl/Theming-Android