Skip to content

Major changes to UI and support to dark mode theme
Compare
Choose a tag to compare
@rtchagas rtchagas released this 01 Mar 20:41
· 46 commits to master since this release
2.0.0
bf2824a

This is a major release and it will break your current style for PING.

  • Support to new Material Components theme.

    • Now the base theme inherits from Theme.MaterialComponents.DayNight.NoActionBar

  • Support to dark/night mode.

    • PING can now switch to dark mode automatically.
    • A dark style will be applied to all maps.
    • The application must provide a values-night/colors.xml to present the right colors in night mode.

  • New and improved Auto Complete Search UI.

  • Merged PR #59 that automatically moves the camera to the auto complete search result.

  • Fixed issue #56

In order to update your application theme to support PING, you need to override new colors:

For day/light theme:

res/values/colors.xml

    <!-- Toolbar color, places icons, text on top of primary surfaces -->
    <color name="colorPrimary">@color/material_teal500</color>
    <color name="colorPrimaryDark">@color/material_teal800</color>
    <color name="colorOnPrimary">@color/material_white</color>

    <!-- Accent color in buttons and actions -->
    <color name="colorSecondary">@color/material_deeporange500</color>
    <color name="colorSecondaryDark">@color/material_deeporange800</color>
    <color name="colorOnSecondary">@color/material_white</color>

    <!-- Main activity background -->
    <color name="colorBackground">@color/material_grey200</color>
    <color name="colorOnBackground">@color/material_black</color>

    <!-- Cards and elevated views background -->
    <color name="colorSurface">@color/material_white</color>
    <color name="colorOnSurface">@color/material_black</color>

    <!-- Text colors -->
    <color name="textColorPrimary">@color/material_on_surface_emphasis_high_type</color>
    <color name="textColorSecondary">@color/material_on_surface_emphasis_medium</color>

    <color name="colorMarker">@color/material_deeporange400</color>
    <color name="colorMarkerInnerIcon">@color/material_white</color>

For night/dark theme:

res/values-night/colors.xml

    <color name="colorPrimary">@color/material_teal300</color>
    <!-- Let the primary dark color as the surface color to not colorfy the status bar -->
    <color name="colorPrimaryDark">@color/colorSurface</color>
    <color name="colorOnPrimary">@color/material_black</color>

    <color name="colorSecondary">@color/material_deeporange200</color>
    <color name="colorSecondaryDark">@color/material_deeporange300</color>
    <color name="colorOnSecondary">@color/material_black</color>

    <color name="colorBackground">@color/colorSurface</color>
    <color name="colorOnBackground">@color/colorOnSurface</color>

    <color name="colorSurface">#202125</color>
    <color name="colorOnSurface">@color/material_white</color>

    <color name="textColorPrimary">@color/material_on_surface_emphasis_high_type</color>
    <color name="textColorSecondary">@color/material_on_surface_emphasis_medium</color>

    <color name="colorMarker">@color/material_deeporange200</color>
    <color name="colorMarkerInnerIcon">@color/colorSurface</color>

In case of doubt in how to implement the new styles, please take a look at the sample app.

Assets 2
Loading