How to customize theme.xml and theme.xml(night) in efficient way? Explain what Primary and Secondary band colors specifically used for

user_16191599 0
Viewed 605

In newer version of Android Studio In values directory there is theme.xml and theme.xml(night) Can any point out differences between them?

What is specific use of colorPrimary, colorPrimaryVariant, colorOnPrimary and colorSecondary, colorSecondaryVariant, colorOnSecondary in these themes.

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

</resources>

res/values/themes/themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.App" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

res/values/themes/themes.xml(night)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.App" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_200</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/purple_200</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_200</item>
        <item name="colorOnSecondary">@color/teal_200</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Looking for some code for explanation how theme.xml and theme.xml (night) can be used to switch app theme from light to dark and vice versa.

android-theme android-studio android xml
1 Answers

This is UI/UX terminology, the whole idea is to create a color theme that reflects your brand or style.

A primary color is the color displayed most frequently across your app's screens and components.

A secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

So for example the design team may have decided they will use

Green - primary colour and Blue - secondary colour

colorPrimaryVariant? colorSecondaryVariant? These two colours will have light and dark “variants” that can also be used

colorOnPrimary? colorOnSecondary? These are colours to do with accessibility

You have a default theme then a Dark theme. A dark theme is a low-light UI that displays mostly dark surfaces.

You will need to study the Google material guidelines to learn more: https://material.io/develop/android/theming/color

Admin1
Related