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. Switching themes on the go
    Alex Styl

    View full-size slide

  2. Alex Styl
    Software Craftsman @ Novoda

    View full-size slide

  3. Why theming?

    View full-size slide

  4. Make it mine

    View full-size slide

  5. Power users already do it
    the hard way

    View full-size slide

  6. The Dark Theme Syndrome

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  11. “But how?”
    - You (2016)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Theme Resources
    themes.xml
    parent="Theme.AppCompat.Light.DarkActionBar">

    @color/dark_blue

    @color/blue

    @color/pink


    View full-size slide

  15. Custom Attributes



    parent="Theme.AppCompat.Light.DarkActionBar">

    @color/colorPrimaryDark

    @color/colorPrimary

    @color/colorAccent
    @color/colorSecondary
    @color/headlineColor
    @color/cardBackground


    View full-size slide

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

    View full-size slide

  17. Styling the Toolbar

    themes.xml
    parent="Theme.AppCompat.Light.NoActionBar">

    @style/ThemeOverlay.AppCompat.Light

    @style/ThemeOverlay.AppCompat.Dark.ActionBar

    layout.xml
    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:theme="?attr/toolbarTheme" />

    View full-size slide

  18. Toolbar Icons

    parent=“Theme.AppCompat.Light.NoActionBar">
    @color/colorPrimaryDark

    @color/colorPrimary

    @color/colorAccent

    @style/ThemeOverlay.AppCompat.Light

    @style/ThemeOverlay.AppCompat.Dark.ActionBar/item>
    @drawable/ic_action_edit_dark

    menu.xml

    android:id=“@+id/action_edit"

    android:icon="?attr/actionEditIcon"

    android:title="@string/title" />


    as attributes

    View full-size slide

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

    …

    }

    View full-size slide

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

    }

    };

    View full-size slide

  21. One last detail

    View full-size slide

  22. Use a Global Dark Theme
    AndroidManifest.xml

    ...
    android:theme=“@style/Theme.AppTheme”>
    ...


    themes.xml
    parent="Theme.AppCompat" />
    Transitioning from dark to light works
    better than the other way round

    View full-size slide

  23. Final Result
    screenshots from Memento Calendar

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide