Switching themes on the go

Slide 1

Slide 1 text

Switching themes on the go Alex Styl

Slide 2

Slide 2 text

Alex Styl Software Craftsman @ Novoda

Slide 3

Slide 3 text

Why theming?

Slide 4

Slide 4 text

Make it mine

Slide 5

Slide 5 text

Power users already do it the hard way

Slide 6

Slide 6 text

The Dark Theme Syndrome

Slide 7

Slide 7 text

What about the Brand? Your brand is not just colors What about Accessibility? Brand logos and assets should work on different backgrounds

Slide 8

Slide 8 text

Themes “Almost like the good ol’ Sony Ericsson times”

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Things to consider Design with attributes in mind Create fallback colors Consider Accessibility when creating Themes Simulate color space in Developer Options

Slide 11

Slide 11 text

“But how?” - You (2016)

Slide 12

Slide 12 text

Themes are XML, hence read-only (˽°□°҂˽︵ ˍʓˍ

Slide 13

Slide 13 text

Create a bunch of themes switch them on Runtime ʾʒʾϛ( º _ ºϛ)

Slide 14

Slide 14 text

Theme Resources themes.xml   <item name=“colorPrimaryDark">@color/dark_blue</item>  <item name="colorPrimary">@color/blue</item>  <item name="colorAccent">@color/pink</item> 

Slide 15

Slide 15 text

Custom Attributes   <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> 

Slide 16

Slide 16 text

Base Themes Theme.AppCompat.Light.DarkActionBar Theme.AppCompat.Light Theme.AppCompat Use the .NoActionBar variant if creating your own Toolbar

Slide 17

Slide 17 text

Styling the Toolbar themes.xml   <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>  <item name=“toolbarTheme”>@style/ThemeOverlay.AppCompat.Dark.ActionBar</item> layout.xml

Slide 18

Slide 18 text

Toolbar Icons <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> menu.xml       as attributes

Slide 19

Slide 19 text

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);   …  }  

Slide 20

Slide 20 text

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);  }  };

Slide 21

Slide 21 text

One last detail

Slide 22

Slide 22 text

Use a Global Dark Theme AndroidManifest.xml   ... ... themes.xml Transitioning from dark to light works better than the other way round

Slide 23

Slide 23 text

Final Result screenshots from Memento Calendar

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Wrap it up Customizations ftw! Use attributes instead of color references Structure your themes by Light/Dark

Slide 26

Slide 26 text

Thank you Questions? Alex Styl @alexstyl https://github.com/alexstyl/Theming-Android