Search code examples
androidxmlandroid-studioandroid-layoutandroid-menu

How do I change the color of menu in a custom created toolbar?


I have a homepage where I have created a custom toolbar, and now I need to add the menu items to it. So far I have been successful and I have my search icon in app:showAsAction="always" mode (which is white) but when I add anything in app:showAsAction="never" mode then the menu indicator(three dots) appear as black in color, but I want them white.

AndroidManifest.xml

<activity
        android:name=".HomePage"
        android:launchMode="singleTask" />

actvity_homepage.xml

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintVertical_bias="0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:titleTextColor="#ffffff"
        style="@style/ToolbarTheme"
        android:textAlignment="textStart"
        android:background="#2B772E"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

homepage_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item android:id="@+id/logoutmenu"
    android:title= "Log Out"
    android:icon="@drawable/logout"
    app:itemIconTint = "#ffffff"
    app:showAsAction="never"/>
<item
    android:id="@+id/search"
    android:icon="@drawable/search"
    app:showAsAction="always"
    android:title="Hello" />
</menu>

This is the result


Solution

  • (first way) in your style :

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        ...
        <item name="actionOverflowButtonStyle">@style/MyOverflowButtonStyle</item>
    </style>
    
    <style name="MyOverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
        <item name="android:tint">#62ff00</item>
    </style>
    

    Or you can change it with toolbar style like this:

    <android.support.v7.widget.Toolbar
      ...
      theme="@style/MyToolbarStyle"
    />
    

    and in your style:

    <style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
      <item name="android:textColorSecondary">#333333</item>
    </style>