wordpress-mobile / wordpress-mobile/WordPress-Android

Add splash screen to avoid bright flash in dark mode

Open
#11,380 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

[Type] Enhancement UI
Dominant language
Kotlin
Stars
3.2k
Forks
1.4k
Avg merge
1d 11h
Merged PRs (30d)
69

Description

This issue may appear on adding dark mode support in the app. Choosing a night mode other than MODE_NIGHT_FOLLOW_SYSTEM creates a screen flash in the special case when the night mode in the app is different from system's night mode.

This issue was discovered and resolved in the Simplenote app recently. Detailed discussion is here.

Expected behavior

App opens directly in dark mode.

Actual behavior

App briefly shows a white screen before opening in dark mode.

The behaviour as seen in Simplenote app:

The reciprocal behaviour also happens but is less distracting: a dark splash screen is shown before the app opens in light mode if app theme is light and system theme is dark (API 29+ only)

Steps to reproduce the behavior
  1. Set app theme to dark.
  2. Close app and remove from recent apps.
  3. Set system theme to light (default on pre API29/Android 10)
  4. Open app.
Tested on [device], Android [version], WPAndroid [version]

Not tested on WPAndroid

Suggested solution

Create a splash theme and set it as the default app theme. Android uses this theme to inflate the initial window before applying the app's chosen night mode.

In the splash theme set android:windowBackground to a neutral colour or a drawable with a neutral coloured background. This is also an opportunity to highlight brand colours. In the Simplenote app, the background is a drawable with a white logo centred in 'Simplenote blue' background.

Splash background drawable:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
    <item android:drawable="@color/blue"/>
    <item
        android:width="@dimen/icon_empty"
        android:height="@dimen/icon_empty"
        android:drawable="@drawable/ic_simplenote_24dp"
        android:gravity="center"/>
</layer-list>

Splash theme:

 <style name="Theme.Simplestyle.Splash">
        <item name="android:navigationBarColor">@color/blue</item>
        <item name="android:statusBarColor">@color/blue</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="android:windowLightStatusBar">false</item>
        <item name="android:windowLightNavigationBar">false</item>
    </style>

Behaviour after changes:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Locate the app's default theme and Android resource definitions, then review the proposed splash theme and splash background drawable in the issue. Confirm the change by reproducing the light-to-dark and dark-to-light startup cases; done means the app opens without a bright or dark flash before its selected theme appears.

Written by the indexing model from the issue text.

Assessment

Tech stack
android
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.