migrate from MaterialComponents to Material 3, how to use my old custom colors for new version of ma-CodePudding

I am trying to migrate my current app from MaterialComponents to use newset version Material3 I want to use my old colors (custom colors) for the toolbars and navigation drawer but I am a little bit confused about many attributes that changed and I cannot determine which attributes I need to do it

the followin my old colors and themes i used in my app

colors.xml

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

    <color name="primaryColor">#1aae66</color>
    <color name="primaryLightColor">#5ee194</color>
    <color name="primaryDarkColor">#007d3a</color>

    <color name="secondaryColor">#1de9b6</color>
    <color name="secondaryLightColor">#6effe8</color>
    <color name="secondaryDarkColor">#00b686</color>

    <color name="primaryTextColor">@color/white</color>
    <color name="secondaryTextColor">#000000</color>


    <color name="lightGray">#F9F9F9</color>
    <color name="mediumGray">#D1D1D1</color>
    <color name="lightMediumGray">#80D1D1D1</color>
    <color name="gray">#A9000000</color>
    <color name="lighterGray">#ddd</color>
    <color name="darkGray">#4B4B4B</color>
    <color name="dark">#313C44</color>
    <color name="darker">#151B20</color>
    <color name="deepPurple">#4a148c</color>

    <color name="statusBarColor">@color/primaryDarkColor</color>
    <color name="contextualStatusBarColor">@color/darker</color>
    <color name="contextualActionBarColor">@color/dark</color>
    <color name="actionBarBackgroundColor">@color/primaryColor</color>
    <color name="buttonColor">@color/primaryColor</color>


    // Custom CardView Style
    <color name="strokeColor">@color/lightMediumGray</color>
    <color name="cardBackgroundColor">@color/white</color>
    <color name="cardBackgroundLightColor">#106200EA</color>
    <color name="titleColor">@color/darker</color>
    <color name="descriptionColor">@color/darkGray</color>
    <color name="backgroundColor">@color/lightGray</color>
    <color name="placeholderColor">@color/mediumGray</color>
    <color name="color_navigation_list_background">@color/white</color>

    <color name="favoritesIconColor">#F05D6E</color>
</resources>

colors night version

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <color name="primaryColor" tools:ignore="MissingDefaultResource">@color/darker</color>
    <color name="primaryLightColor" tools:ignore="MissingDefaultResource">@color/darkGray</color>
    <color name="primaryDarkColor" tools:ignore="MissingDefaultResource">@color/black</color>

    <color name="secondaryColor" tools:ignore="MissingDefaultResource">#4db6ac</color>
    <color name="secondaryLightColor" tools:ignore="MissingDefaultResource">#82e9de</color>
    <color name="secondaryDarkColor" tools:ignore="MissingDefaultResource">#00867d</color>

    <color name="primaryTextColor" tools:ignore="MissingDefaultResource">#ffffff</color>
    <color name="secondaryTextColor" tools:ignore="MissingDefaultResource">#000000</color>

    <color name="statusBarColor">@color/primaryDarkColor</color>
    <color name="actionBarBackgroundColor">@color/primaryColor</color>
    <color name="buttonColor">@color/deepPurple</color>


    // Custom CardView Style
    <color name="strokeColor">@color/mediumGray</color>
    <color name="cardBackgroundColor">@color/darker</color>
    <color name="cardBackgroundLightColor">#106200EA</color>
    <color name="titleColor">@color/mediumGray</color>
    <color name="descriptionColor">@color/mediumGray</color>
    <color name="backgroundColor">@color/dark</color>
    <color name="placeholderColor">@color/darker</color>
    <color name="color_navigation_list_background">@color/darker</color>
    <color name="favoritesIconColor">#F05D6E</color>


</resources>

theme light

<resources>
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>

        <!-- Status bar color. -->
        <item name="android:statusBarColor">@color/statusBarColor</item>
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>

        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>


    </style>

    <style name="WindowAnimationTransition">
        <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    </style>


    <style name="EmptyViewStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:gravity">center</item>
        <item name="android:textSize">@dimen/_18ssp</item>
        <item name="android:visibility">gone</item>
    </style>

    <style name="CustomActionBarStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
        <item name="background">@color/primaryColor</item>
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:textColorSecondary">@color/white</item>

    </style>

    <style name="ThemeOverlay.AppCompat.navTheme">
        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/primaryColor</item>

        <item name="background">@color/white</item>

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/mediumGray</item>

    </style>

    <style name="progressBarBlue" parent="@style/Theme.AppCompat">
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <style name="Divider">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">?android:attr/listDivider</item>
    </style>


    <style name="PostTitle">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/titleColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="PostBody">
        <item name="android:textSize">15sp</item>
        <!--        <item name="android:textColor">@color/descriptionColor</item>-->
    </style>

    <style name="roundedImageViewRounded">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>


</resources>

theme night

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">@color/statusBarColor</item>
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>

        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>

    </style>

    `
    <style name="CustomActionBarStyle" parent="Widget.MaterialComponents.ActionBar.Primary">
        <item name="background">@color/actionBarBackgroundColor</item>

        <item name="android:textColorPrimary">@color/white</item>

        <item name="android:textColorSecondary">@color/white</item>
    </style>

    <style name="ThemeOverlay.AppCompat.navTheme">

        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/white</item>

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/mediumGray</item>

    </style>

    <style name="progressBarBlue" parent="@style/Theme.AppCompat">
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <style name="Divider">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">?android:attr/listDivider</item>
    </style>


    <style name="PostTitle">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/titleColor</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="PostBody">
        <item name="android:textSize">15sp</item>
        <item name="android:textColor">@color/descriptionColor</item>
    </style>


</resources>

The changes that I made is changed parent in each item to parent="Theme.Material3.Light"> and parent="Theme.Material3.Dark"> but I see the new theme dosen't use my old colors, for example selected item in drawer the item it was black and background of checked state is green now it's kind of purpule, and toolbars it was primary color green now it's white with option menu background light green

example of drawer changes

CodePudding user response：

It's because when you were using Material 2 your navigation drawer has its active item indicator color set as colorPrimary but when you changed it to Material 3 , it is now using colorSecondaryContainer for the active indicator.

Material 2 : Navigation Drawer | Text Overlay attributes

Material 3 : Navigation Drawer | Item attributes

You can read the docs for color info and change it to your preferences.