1

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.: enter image description here

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

madbeans
  • 99
  • 1
  • 14
  • Check out the answer here (https://stackoverflow.com/questions/35453953/how-to-change-options-menu-dots-color), you should be setting the color using style as it would be applicable at the theme level, if you keep making your own drawables, things get out of hand real quick – Mohammed Abdul Bari Feb 11 '21 at 03:21
  • @Mohammed Abdul Bari solutions like this did not work probably bc I am using NoActionBar theme. I solved the problem by using my own icon : `topAppBar.overflowIcon = getDrawable(R.drawable.ic_more_options_24dp)` but it only works on Android versions Lollipop and above, which is fine with me. – madbeans Feb 11 '21 at 05:03
  • Update on the post: I could not add my own icon in the .xml file bc when i added them menu items, the Material Design library recognized it as its own overflow icon and changed the color back to white. I solved the problem by adding my own icon in my kotlin code. – madbeans Feb 11 '21 at 05:07
  • For a smaller application adding by code is ok, but when the project gets larger, this approach can become tedious to maintain. especially if you go into the multi-module realm – Mohammed Abdul Bari Feb 11 '21 at 18:01

1 Answers1

0

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

madbeans
  • 99
  • 1
  • 14