Toolbar TitleTextColor not changing in dark mode
Asked Answered
D

2

3

I'm integrating Dark Mode , i have Collapsing toolbar and toolbar which are wrapped in an appbarlayout , the issue is when i try to set the toolbar title color into white when dark mode is set , it is not working meanwhile in light mode , the color shows accordingly , i tried almost everything but i don't know exactly what is happening , i have color and color night folders and i set up the color for both and added it to to my toolbar but it didn't change anything , if any one could help , i ll deeply appreciate it , thank you

  • This is before collapsing title enter image description here

  • And after i collapse the title to be set in toolbar , it dosn't show white ( which is the color i want in dark mode for the toolbar title color ) enter image description here

  • This is my xml code

 <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".View.MealDetails">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbarlaout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/collapsingtoolbar"
                android:fitsSystemWindows="true"
                app:contentScrim="@color/toolbarcolor"
                app:titleEnabled="true"
                app:title="@{details.strMeal}"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="190dp"
                    app:mealDetailsImg="@{details.strMealThumb}"
                    android:background="@drawable/noimg"
                    tools:ignore="ContentDescription" />
                    <com.google.android.material.appbar.MaterialToolbar
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:id="@+id/mealdetailstoolbar"
                        app:menu="@menu/addfavmenu"
                        app:navigationIcon="@drawable/arrow_back_black"
                        app:layout_collapseMode="pin" />

            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>
  • This is color folder
<resources>
    <color name="colorPrimary">#6200EE</color> 
    <color name="colorPrimaryDark">#000000</color> // changing status bar color 
    <color name="colorAccent">#000000</color> // changing icons color 
    <color name="textColorPrimary">#000000</color> // i m not sure if this is correct but i think it is for toolbar text ( i could be wrong )
    <color name="ratetextcolor">#000000</color> /// this is to change rate text color
    <color name="iconscolor">#000000</color> // this is for icons color
    <color name="faviconcolor">#d10d06</color> // i have an icon which i wanted to settle to red in light mode and blue in dark mod
    <color name="categoryareacolor">#000000</color> //textviews
    <color name="headerColor">#ffffff</color>
</resources>

  • This is the night folder
<resources>
        <color name="colorPrimary">#6200EE</color>
        <color name="colorPrimaryDark">#6200EE</color>
        <color name="colorAccent">#6200EE</color>
        <color name="textColorPrimary">#ffffff</color>
        <color name="ratetextcolor">#ffffff</color>
        <color name="iconscolor">#3266a8</color>
        <color name="faviconcolor">#3266a8</color>
        <color name="categoryareacolor">#000000</color>
</resources>
Discovery answered 3/7, 2020 at 8:26 Comment(6)
Which app theme are you using?Sproul
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">Discovery
can you show me the colors.xml from values and values-night folderMaury
i made an edit , thank you , i m not sure if i m making something wrong , isn't the textColorPrimary the one responsible for changing toolbar title color ?Discovery
there is not toolbarcolor in those xml files , where is it?Maury
reply with @AbhinavChauhan, otherwise i don't get notificationMaury
S
0

You can use:

 <com.google.android.material.appbar.AppBarLayout
    ...>

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            app:contentScrim="@color/..."
            android:theme="@style/CollapsingToolbarLayout_Overlay"
            >

    

with:

<style name="CollapsingToolbarLayout_Overlay">
    <!-- Title text color -->
    <item name="android:textColorPrimary">@color/....</item>
    <!-- Toolbar up color -->
    <item name="colorControlNormal">@color/...</item>
</style>   

enter image description here enter image description here

Sproul answered 3/7, 2020 at 9:12 Comment(3)
after adding that line of the style into toolbar , it made the toolbar visible before i even collapse the title , and the color didn't change as well , this is the photo of it , this is an image of it , imgur.com/a/fGxvV5tDiscovery
i have added the theme to my collapsing toolbar and for some reason still not showing the white color in dark mode ,textColorPrimary is responsible for changing the color , but i don't know why it dsont , thankyouDiscovery
i actually did it and nothing changed as the collapsed toolbar text color was the one concerned so i solved it by doing it programmatically , i made a function that checks for the mode and change the color accordingly , thank you for the help mate appreciatedDiscovery
M
0

as android chooses the correct color based on themes from the folder values in light theme and from values-night in dark theme but there is no toolbarcolor in those xml files so it always chooses it from the toolbarcolor of AppTheme

so i think the following can work (tell me if it doesn't)

add to the colors.xml of values

<color name="toolbarcolor">your day color</color>

add to the colors.xml of values-night

<color name="toolbarcolor">your night color</color>

and you can delete toolbarcolor from the styles.xml

Maury answered 4/7, 2020 at 12:30 Comment(2)
i actually did it and nothing changed as the collapsed toolbar text color was the one concerned so i solved it by doing it programmatically , i made a function that checks for the mode and change the color accordingly , thank you for the help mate appreciatedDiscovery
did you try adding textColor attribute too , in both the colors.xml? and are you saying you added the color to contentSrim.Maury

© 2022 - 2024 — McMap. All rights reserved.