Search code examples
androidmaterial-designandroid-toolbarandroid-appcompatandroid-support-design

Change toolbar back arrow color


enter image description here

Hi. In the picture above you can see a back arrow and a (part of) title. I changed the title color using the attached .xml code. But I want to color the back arrow to white too.

I read some answer on the internet, but they look too complicated for such a simple question.

Is the any simple why to do it?

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:titleTextColor="@android:color/white"/>

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
//...

public class LoginActivity extends AppCompatActivity {
    protected void onCreate(Bundle savedInstanceState) {

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
      //...
    }
    //...
}


Solution

  • You can override the theme in your Toolbar.
    With a Material Components theme:

      <com.google.android.material.appbar.MaterialToolbar
            style="@style/Widget.MaterialComponents.Toolbar.Primary"
            android:theme="@style/MyThemeOverlay_Toolbar"
            ..>
    

    with:

      <style name="MyThemeOverlay_Toolbar2" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    
        <!-- This attributes is used by navigation icon and overflow icon -->
        <item name="colorOnPrimary">@color/secondaryColor</item>
      </style>
    

    With an AppCompat theme:

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

    Then in your theme you can define the colorControlNormal attribute:

       <style name=""  parent="ThemeOverlay.AppCompat.Dark.ActionBar">
          ....
          <item name="colorControlNormal">@color/myColor</item>  
       </style>