How should I change the color of the icons and title in the top toolbar using material design? -NoActionBar theme - Android Material Design

Question

I started using material design and am not to familiar with the guidelines (I'm following the tutorial from https://material.io/components/app-bars-top/android#contextual-action-bar). While following the example, my title and their default overflow menu icon (the 3 vertical dots) were coming out a different shade of white compared to by other icons (back navigation and edit icon), I don't know if this is how it should be but I don't think so. Moreover, if I use `android:tint="?attr/colorControlNormal">' in the xml file for the vector like they show in the tutorial, they come out a light color and i want it close to black so it looks better with my toolbar background. I can't edit the color for their default overflow menu icon (the 3 vertical dots) from white.

My solution: I made my own more options icon (3 vertical dots) will get the color from colors.xml file, then add a spinner to the more options icon.

Here's a screenshot with light theme icons to the left of the default material design more options icon (3 vertical dots). Title not pictured here but that's not a problem for me.:

My theme:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">

Here's the activity in which I have the toolbar:

<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context=".ui.main.view.MainActivity">

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:liftOnScroll="true">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:titleTextColor="?attr/colorControlNormal"
        app:menu="@menu/top_app_bar"
        app:navigationIcon="@drawable/ic_navigation_24dp"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        style="@style/Widget.MaterialComponents.Toolbar.Primary" />

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

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:visibility="gone" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Here's my top_app_bar menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/edit"
    android:icon="@drawable/ic_edit_24dp"
    android:title="@string/appbar_edit"
    app:showAsAction="ifRoom"/>

<item
    android:id="more_options"
    android:icon="@drawable/ic_more_options_24dp"
    android:title="More Options"
    app:showAsAction="ifRoom"/>

<item
    android:id="@+id/place_holder"
    android:title="@string/appbar_more_place_holder"
    app:showAsAction="never" />

Here's my 'edit' vector item:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal"
    android:alpha="0.8">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"/>
</vector>

Is there a better way of changing the icon colors using material design? Also, is there a specific color these should be (I have the feeling the standard is a shade of black or white, no other colors)?

Answer 1

This solution only works on Android versions Lollipop and above, which is most likely fine. On devices outside of this range, the icon will just be a different color.

Make your own more options icon and in your activity kotlin/java class, set the icon programmatically: topAppBar.overflowIcon = getDrawable(R.drawable.ic_more_options_24dp)

A downside to this approach is as @Mohammed Abdul Bari says, "...when the project gets larger, this approach can become tedious to maintain."