Understanding origin of the color of a menu icon

Question

I am currently digging through the Google IO 2019 source code and there is one thing I can't figure out where it comes from: the color of the hamburger menu icon.

Here's a screenshot of the preview of mobile\src\main\res\layout\fragment_codelabs.xml (source link):

And here is a zoom-in of the hamburger menu icon, one can easily see that it's at least not black:

The image source is @drawable/ic_menu:

The source code of @drawable/ic_menu(mobile\src\main\res\drawable\ic_menu.xml) (source link) is

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0"
    android:tint="?colorControlNormal">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z" />
</vector>

So here the fillColor is specified as #FF000000 which is 100 % black and opaque (alpha FF). Yet the hamburger menu icon isn't displayed in black. So, where is the color that the hamburger menu icon is displayed in actually coming from?

Answer 1

I tried to dig deeper into the styles, most likely it comes from default parameter of one of the parent of Activity theme. I'll try to show how I found it.

1. In the \mobile\src\main\AndroidManifest.xml file, all Activities are inherited from android:theme="@style/AppTheme"
2. <style name="AppTheme" parent="Base.AppTheme" />
3. <style name="Base.AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
4. <style name="Theme.MaterialComponents.DayNight.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar"/>
5. <style name="Theme.MaterialComponents.Light" parent="Base.Theme.MaterialComponents.Light"/>
6. <style name="Base.Theme.MaterialComponents.Light" parent="Base.V14.Theme.MaterialComponents.Light"/>
7. <style name="Base.V14.Theme.MaterialComponents.Light" parent="Base.V14.Theme.MaterialComponents.Light.Bridge">
8. <style name="Base.V14.Theme.MaterialComponents.Light.Bridge" parent="Platform.MaterialComponents.Light">
9. <style name="Platform.MaterialComponents.Light" parent="Theme.AppCompat.Light"/>
10. <style name="Theme.AppCompat.Light" parent="Base.Theme.AppCompat.Light"/>
11. <style name="Base.Theme.AppCompat.Light" parent="Base.V28.Theme.AppCompat.Light"/>
12. <style name="Base.V28.Theme.AppCompat.Light" parent="Base.V26.Theme.AppCompat.Light">
13. <style name="Base.V26.Theme.AppCompat.Light" parent="Base.V23.Theme.AppCompat.Light">
14. <style name="Base.V23.Theme.AppCompat.Light" parent="Base.V22.Theme.AppCompat.Light">
15. <style name="Base.V22.Theme.AppCompat.Light" parent="Base.V21.Theme.AppCompat.Light">
16. <style name="Base.V21.Theme.AppCompat.Light" parent="Base.V7.Theme.AppCompat.Light">
17. There you can see that we're close <item name="android:colorControlNormal">?attr/colorControlNormal</item>, we need to go deeper.
18. <style name="Base.V7.Theme.AppCompat.Light" parent="Platform.AppCompat.Light">
19. There it is <item name="colorControlNormal">?android:attr/textColorSecondary</item> :)
20. But, we can go even further deeper, until we get to <style name="Theme.Material.Light" parent="Theme.Light">
21. There's <item name="textColorSecondary">@color/text_color_secondary</item>

22. text_color_secondary.xml

    <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:alpha="?attr/disabledAlpha" android:color="?attr/colorForeground"/> <item android:alpha="?attr/secondaryContentAlpha" android:color="?attr/colorForeground"/> </selector>

23. <item name="colorForeground">@color/foreground_material_light</item>

24. And in colors_material.xml it is <color name="foreground_material_light">@color/black</color>
25. And alpha is <item name="secondary_content_alpha_material_light" format="float" type="dimen">0.54</item>

So, to put it simply: the color of a menu icon is default theme black with alpha 0.54