Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Switching themes on the go

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

Alex Styl

July 08, 2016
Tweet

More Decks by Alex Styl

Other Decks in Technology

Transcript

  1. What about the Brand? Your brand is not just colors

    What about Accessibility? Brand logos and assets should work on different backgrounds
  2. 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
  3. Things to consider Design with attributes in mind Create fallback

    colors Consider Accessibility when creating Themes Simulate color space in Developer Options
  4. 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>
  5. 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" />
  6. 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
  7. 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); 
 …
 } 

  8. 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);
 }
 };
  9. 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
  10. Wrap it up Customizations ftw! Use attributes instead of color

    references Structure your themes by Light/Dark